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, когда это происходит.
