XMLHttpRequest в AJAX

Объект XMLHttpRequest используется для обмена данными с сервером.

Отправка запроса на сервер

Если вам нужно отправить запрос на сервер, мы используем объект XMLHttpRequest open() и send() метод:

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-запрос:

Пример

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

Попробуйте сами

В примерах выше, вы можете получить кэшированный результат. Чтобы избежать этого, добавьте уникальный ID в URL:

Пример

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

Попробуйте сами

Если вам нужно отправить информацию с помощью метода GET, добавьте эти данные в URL:

Пример

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

Попробуйте сами

POST-запрос

Простая POST-запрос:

Пример

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Попробуйте сами

Если вам нужно отправить данные POST, как HTML-форма, пожалуйста, используйте setRequestHeader() Добавьте HTTP-заголовок. Пожалуйста, введите send() Метод требует отправить данные:

Пример

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

Попробуйте сами

Метод Описание
setRequestHeader(заголовок, значение)

Добавление HTTP заголовка к запросу

  • заголовокОпределяет имя заголовка
  • значениеОпределяет значение заголовка

url - файл на сервере

метода open() url параметр, это адрес файла на сервере:

xhttp.open("GET", "ajax_test.asp", true);

Этот файл может быть любого типа, например .txt и .xml, или серверный скрипт, например .asp и .php (они могут выполняться на сервере до отправки ответа).

Асинхронный - true или false?

Чтобы отправить запрос асинхронно:open() метода async параметр должен быть установлен в true:

xhttp.open("GET", "ajax_test.asp", true);

Асинхронная передача запроса - это значительный прогресс для веб-разработчиков.Многие задачи, выполняемые на сервере, занимают много времени.До AJAX это могло привести к зависанию или остановке приложения.

С помощью асинхронной передачи, JavaScript не должен ждать ответа от сервера, а может:

  • Выполнение других скриптов в ожидании ответа от сервера
  • Обработка ответа при готовности

атрибут onreadystatechange

Через XMLHttpRequest объект, вы можете определить функцию, которая будет выполняться при получении ответа на запрос.

Эта функция вызывается в XMLHttpResponse объекте onreadystatechange определенные в свойстве:

Пример

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.