AJAX отправка запроса

После создания объекта XMLHttpRequest (см. предыдущую главу) мы должны отправить запрос на сервер.

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

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

• open();

• send();

　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();

Метод open() принимает три параметра:

• Первый параметр - метод HTTP запроса - GET, POST

• Второй параметр - это URL, в который вы отправляете запрос

• Опциональный третий параметр устанавливает, является ли запрос асинхронным (по умолчанию true)

Метод send() принимает опциональный параметр:

• Для запроса GET не передается никаких значений

• Для запроса POST передаетсяимя=значениеДля

HTTP запросы: GET и POST?

ВGETВ методе, браузер добавляет содержимое формы (пара имя/значение) в конец URL.

GET обычно используется для простых форм, не требующих безопасности. GET предоставляет множество преимуществ для простых форм.

• Запрос GET может быть кэширован

• Запрос GET сохраняется в истории браузера

• Запрос GET может добавить закладку

• При обработке конфиденциальных данных никогда не следует использовать запрос GET

• Запрос GET имеет ограничение по длине (только 2048 символов)

ВPOSTВ методе, содержимое не отображается в URL.

Если данные формы содержат конфиденциальную информацию или личные данные, всегда следует использовать POST.

• Запрос POST никогда не кэшируется

• Запрос POST не сохраняется в истории браузера

• Запрос POST не может добавить закладку

• При обработке конфиденциальных данных следует использовать запрос POST

• Запрос POST не имеет ограничений по длине данных

Запрос GET

Ниже приведен пример того, как использовать JavaScript для отправки простого Ajax GET запроса:

httpRequest.open("GET", "ajax_get.php", true);
httpRequest.send();

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

httpRequest.open("GET", "ajax_get.php?r=" + Math.random(), true);
httpRequest.send();

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

httpRequest.open("GET", "ajax_get.php?fname=Seagull&lname=Anna", true);
httpRequest.send();

Запрос POST

Ниже приведен пример того, как использовать JavaScript для отправки простого Ajax POST запроса:

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.send();

Если нужно отправить информацию методом POST, используйте установку HTTP заголовков, setRequestHeader(), и указание данных для отправки в методе send():

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("fname=Seagull&lname=Anna");

Метод setRequestHeader() принимает два параметра:

• Первый параметр указывает на имя заголовка

• Второй параметр указывает значение заголовка

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

Второй параметр метода open() (url) — это адрес файла на сервере.

　　httpRequest.open("GET", "ajax_get.php", true);

AJAX может отправлять и принимать информацию различных форматов, включая JSON, XML, HTML, PHP, ASP, текст и т.д.

Атрибут onreadystatechange

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

Функция ответа onreadystatechange определяет в атрибуте XMLHttpRequest объекта.

httpRequest.onreadystatechange = function() {
　　if (this.readyState === 4 && this.status === 200) {
　document.getElementById("output").innerHTML = this.responseText;
　　};
};

Вы узнаете о свойстве onreadystatechange в более поздней части этого учебника.

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

Третий параметр метода open() указывает, что запрос являетсяАсинхронныйилиСинхронный.

ОтправитьСинхронныйЗапрос, пожалуйста, измените третий параметр метода open() наfalse.

Если используетсяСинхронныйЗапрос, если не указана функция ответа:

var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "ajax_intro.txt", false);
httpRequest.send();
document.getElementById("output").innerHTML = httpRequest.responseText;

Не рекомендуется использоватьСинхронныйЗапрос, потому что:

• JavaScript остановится до тех пор, пока сервер не будет готов с ответом

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

• Приносит плохой пользовательский опыт