AJAX - XMLHttpRequest
Объект XMLHttpRequest используется для запроса данных с сервера.
Отправить запрос на сервер
Чтобы отправить запрос на сервер, мы используем методы open() и send() объекта XMLHttpRequest:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| Метод | Описание |
|---|---|
| open(method, url, async) | Указывает тип запроса метод: тип запроса: GET или POST url: расположение сервера (файла) async: true (асинхронный) или false (синхронный) |
| send() | Отправляет запрос на сервер (используется для GET) |
| send(string) | Отправляет запрос на сервер (используется для POST) |
URL - файл на сервере
Параметр url метода open() представляет собой адрес файла на сервере:
xhttp.open("GET", "ajax_test.html", true);
Это может быть файл любого типа, например .txt и .xml, или файлы скриптов сервера, такие как .asp и .html (которые могут выполнять действия на сервере перед отправкой ответа обратно).
Асинхронный - True или False?
Запросы к серверу следует отправлять асинхронно.
Асинхронный параметр метода open() должен иметь значение true:
xhttp.open("GET", "ajax_test.html", true);
Отправляя асинхронно, JavaScript не должен ждать ответа сервера, а вместо этого может:
- выполнять другие скрипты во время ожидания ответа сервера
- обработать ответ после того, как ответ будет готов
Значение по умолчанию для параметра async: async = true.
Вы можете безопасно удалить третий параметр из своего кода.
Синхронный XMLHttpRequest (async = false) не рекомендуется, поскольку выполнение JavaScript прекратится до тех пор, пока не будет готов ответ сервера. Если сервер занят или работает медленно, приложение зависнет или остановится.
GET или POST?
GET проще и быстрее, чем POST, и может использоваться в большинстве случаев.
Однако всегда используйте POST-запросы, когда:
- Кэшированный файл не подходит (обновите файл или базу данных на сервере)
- Отправка большого объема данных на сервер (POST не имеет ограничений по размеру)
- При отправке пользовательского ввода (который может содержать неизвестные символы) POST более надёжен и безопасен, чем GET
GET запросы
Просто GET запрос:
В приведенном выше примере вы можете получить кешированный результат. Чтобы этого избежать, добавьте в URL уникальный идентификатор:
Если вы хотите отправить информацию с помощью метода GET, добавьте информацию в URL-адрес:
Как сервер использует ввод и как сервер отвечает на запрос, объясняется в следующей главе.
POST запросы
Простой POST запрос:
Чтобы отправить данные, такие как HTML-форма, добавьте заголовок HTTP с помощью setRequestHeader(). Укажите данные, которые вы хотите отправить, в методе send():
Пример
xhttp.open("POST", "ajax_test.html");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
Попробуйте сами »
| Метод | Описание |
|---|---|
| setRequestHeader(header, value) | Добавляет заголовки HTTP к запросу 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.
