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

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

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

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

GET или POST?

Запрос типа GET проще и быстрее запроса типа POST и может использоваться в большинстве случаев.

Тем не менее, запросы типа POST всегда используются, когда:

• Кэшированный файл не является опцией (обновление файла или базы данных на сервере)
• На сервер посылается большой объем данных (у типа POST нет ограничения на размер отсылаемых данных).
• Посылается пользовательский ввод (который может содержать неизвестные символы), POST надежнее и безопаснее GET.

Запросы типа GET

Простой запрос типа GET:

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

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

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

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

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

Запросы типа POST

Простой запрос типа POST:

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

Чтобы передать данные методом 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=Ford"); 

URL – файл на сервере

Параметр URL метода open() определяет адрес файла на сервере:

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

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

Асинхронный – True или False?

Запросы на сервер необходимо отправлять асинхронно.

Для этого параметр async метода open() следует установить в значение true:

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

Отправляя запрос асинхронно, JavaScript не придется ждать, когда сервер ответит. Вместо этого JavaScript может:

• выполнять другие скрипты во время ожидания ответа сервера
• обработать ответ после того, как он будет готов

Свойство onreadystatechange

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

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

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 будет рассказано дальше в этом учебнике.

Синхронный запрос

Чтобы выполнить синхронный запрос, достаточно задать в третьем параметре метода z значение 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 будет останавливать выполнение скрипта до тех пор, пока не будет готов ответ сервера. В том случае, если сервер занят или работает медленно, JavaScript приложение может зависнуть или остановиться.

Функционал синхронных запросов объекта XMLHttpRequest в настоящее время находится в процессе удаления из стандарта. Хотя этот процесс может продлиться еще достаточно долгое время.

В настоящее время современным инструментам разработки рекомендуется предупреждать об использовании в скрипте синхронных запросов. При этом некоторые средства разработки могут генерировать исключение InvalidAccessError при встречи с такими запросами.