AJAX — XMLHttpRequest
Объект XMLHttpRequest используется для запроса данных с сервера.
Отправить запрос на сервер
Чтобы отправить запрос на сервер, мы используем методы open() и send() XMLHttpRequestобъекта:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| Method | Description |
|---|---|
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
URL - файл на сервере
Параметр url open()метода — это адрес файла на сервере:
xhttp.open("GET", "ajax_test.asp", true);
Это может быть файл любого типа, например .txt и .xml, или файлы сценариев сервера, такие как .asp и .php (которые могут выполнять действия на сервере перед отправкой ответа обратно).
Асинхронность — правда или ложь?
Запросы к серверу должны отправляться асинхронно.
Параметр async метода open() должен быть установлен в true:
xhttp.open("GET", "ajax_test.asp", true);
Отправляя асинхронно, JavaScript не должен ждать ответа сервера, а вместо этого может:
- выполнять другие скрипты, ожидая ответа сервера
- обрабатывать ответ после того, как ответ будет готов
Значение по умолчанию для параметра async — async = true.
Вы можете безопасно удалить третий параметр из своего кода.
Синхронный XMLHttpRequest (async = false) не рекомендуется, поскольку выполнение JavaScript прекратится до тех пор, пока не будет готов ответ сервера. Если сервер занят или работает медленно, приложение зависнет или остановится.
ПОЛУЧИТЬ или ПОСТАВИТЬ?
GETпроще и быстрее, чем POST, и может использоваться в большинстве случаев.
Однако всегда используйте POST-запросы, когда:
- Кэшированный файл не вариант (обновите файл или базу данных на сервере).
- Отправка большого количества данных на сервер (POST не имеет ограничений по размеру).
- При отправке пользовательского ввода (который может содержать неизвестные символы) POST более надежен и безопасен, чем GET.
ПОЛУЧИТЬ запросы
Простой GETзапрос:
Пример
xhttp.open("GET", "demo_get.asp");
xhttp.send();
В приведенном выше примере вы можете получить кешированный результат. Чтобы этого избежать, добавьте к URL уникальный идентификатор:
Пример
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
Если вы хотите отправить информацию с помощью GETметода, добавьте информацию в URL-адрес:
Пример
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
Как сервер использует ввод и как сервер отвечает на запрос, объясняется в следующей главе.
POST-запросы
Простой POSTзапрос:
Пример
xhttp.open("POST", "demo_post.asp");
xhttp.send();
Чтобы отправить данные, такие как HTML-форма, добавьте заголовок HTTP с расширением setRequestHeader(). Укажите данные, которые вы хотите отправить в send()методе:
Пример
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
| Method | Description |
|---|---|
| setRequestHeader(header, value) | Adds HTTP headers to the request header: specifies the header name value: specifies the header value |
Синхронный запрос
Чтобы выполнить синхронный запрос, измените третий параметр в 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 прекратится до тех пор, пока не будет готов ответ сервера. Если сервер занят или работает медленно, приложение зависнет или остановится.
Рекомендуется, чтобы современные инструменты разработчика предупреждали об использовании синхронных запросов и могли вызвать исключение InvalidAccessError при его возникновении.