JavaScript AJAX Отправить запрос на сервер
Объект XMLHttpRequest используется для обмена данными с сервером.
Отправить запрос на сервер
Чтобы отправить запрос на сервер, мы используем методы open() и send() объекта XMLHttpRequest
:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Метод | Описание |
---|---|
open(method, url, async) | Указывает тип запроса method: тип запроса: GET или POST url: расположение сервера (файла) async: true (асинхронный) или false (синхронный) |
send() | Отправляет запрос на сервер (используется для GET) |
send(string) | Отправляет запрос на сервер (используется для POST) |
GET или POST?
GET
проще и быстрее, чем POST
и может использоваться в большинстве случаев.
Однако всегда используйте запросы POST, когда:
- Кэшированный файл не является вариантом (обновить файл или базу данных на сервере).
- Отправка большого количества данных на сервер (POST не имеет ограничений по размеру).
- Отправка пользовательского ввода (который может содержать неизвестные символы), POST более надежен и безопасен, чем GET.
GET запросы
Простой GET
запрос:
In the example above, you may get a cached result. To avoid this, add a unique ID to the URL:
Если вы хотите отправить информацию с помощью GET
метода, добавьте информацию в URL:
Пример
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Форд", true);
xhttp.send();
Попробуйте сами »
POST запросы
Простой POST
запрос:
Для POST данных, таких как HTML форма, добавьте HTTP заголовок с расширением setRequestHeader()
. Укажите данные, которые вы хотите отправить в send()
методе:
Пример
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Форд");
Попробуйте сами »
Метод | Описание |
---|---|
setRequestHeader(header, value) | Добавляет HTTP заголовки для запроса header: задает имя заголовка value: определяет значение заголовка |
URL адрес - файл на сервере
Параметр url open()
метода - это адрес файла на сервере:
xhttp.open("GET", "ajax_test.asp", true);
Это может быть файл любого типа, например .txt и .xml, или файлы серверных сценариев, например .php и .php (которые могут выполнять действия на сервере перед отправкой ответа).
Асинхронный - true или false?
Запросы к серверу следует отправлять асинхронно.
Параметр async метода open() должен иметь значение true:
xhttp.open("GET", "ajax_test.asp", true);
Посылая асинхронно, JavaScript не должен ждать ответа сервера, но вместо этого может:
- выполнять другие скрипты, ожидая ответа сервера
- обработывать ответ после того, как ответ будет готов
Свойство onreadystatechange
С помощью XMLHttpRequest
объекта вы можете определить функцию, которая будет выполняться, когда запрос получит ответ.
Функция определяется в onreadystatechange
свойстве XMLHttpRequest
объекта:
Пример
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Попробуйте сами »
Вы узнаете больше об этом onreadystatechange
в следующей главе.
Синхронный запрос
Чтобы выполнить синхронный запрос, измените третий параметр в open()
методе на false
:
xhttp.open("GET", "ajax_info.txt", false);
Иногда async = false используется для быстрого тестирования. Вы также найдете синхронные запросы в старом коде JavaScript.
Поскольку код будет ждать завершения работы сервера, в onreadystatechange
функции нет необходимости:
Пример
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Попробуйте сами »
Синхронный XMLHttpRequest (async = false) не рекомендуется, потому что JavaScript перестанет выполняться, пока не будет готов ответ сервера. Если сервер занят или работает медленно, приложение зависнет или остановится.
Синхронный XMLHttpRequest находится в процессе удаления из веб стандарта, но этот процесс может занять много лет.
Современные инструменты разработчика могут предупреждать об использовании синхронных запросов и могут вызывать исключение InvalidAccessError, когда это происходит.