Последние учебники веб-разработки
 

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

пример

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
Попробуй сам "

В приведенном выше примере, вы можете получить результат из кэша. Чтобы избежать этого, добавьте уникальный ID to the URL: ID to the 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 header с setRequestHeader() . Укажите данные , которые вы хотите отправить в send() метод:

пример

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
Попробуй сам "

метод Описание
setRequestHeader(header, value) Добавляет HTTP-заголовки запроса

header : указывает имя заголовка
value : определяет значение заголовка

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

url параметр open() метод, является обращение к файлу на сервере:

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

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


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

AJAX расшифровывается как Asynchronous JavaScript и XML, а для объекта XMLHttpRequest вести себя как AJAX, в async параметра open() метод должен быть установлен верно:

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

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

С помощью AJAX, то JavaScript не придется ждать ответа от сервера, но может вместо того, чтобы:

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

Async=true

При использовании класса = "notranslate" асинхронной = правда, указать функцию для выполнения , когда ответ готов в случае onreadystatechange:

пример

xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Попробуй сам "

Вы узнаете больше о onreadystatechange в следующей главе.


Async=false

Чтобы использовать async=false , измените третий параметр в open() метода к ложным:

xhttp.open("GET", "ajax_info.txt", false);

Использование async=false не рекомендуется, но в течение нескольких небольших запросов это может быть в порядке.

Помните, что JavaScript не будет продолжать выполняться, пока ответ сервера не будет готов. Если сервер занят или медленно, то приложение будет висеть или остановить.

Примечание: При использовании async=false , не пишите функцию onreadystatechange - просто поместите код после send() заявление:

пример

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Попробуй сам "