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

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

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

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

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

Метод Описание
open(method,url,async)

Определяет тип запроса, URL и то, должен ли запрос обрабатываться асинхронно.

  • method: тип запроса; GET или POST
  • url: расположение файла на сервере
  • async: true (асинхронно) или false (синхронно)
send(string)

Отправляет запрос на сервер.

  • string: только для POST-запросов

GET или POST?

По сравнению с POST, GET проще и быстрее и работает в большинстве случаев.

Однако в следующих ситуациях используйте POST-запросы:

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

GET-запрос

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

Пример

xmlhttp.open("GET","/try/ajax/demo_get.php",true); xmlhttp.send();

Попробуйте »

В приведённом выше примере вы можете получить кэшированный результат.

Чтобы избежать этого, добавьте уникальный идентификатор в URL:

Пример

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true); xmlhttp.send();

Попробуйте »

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

Пример

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true); xmlhttp.send();

Попробуйте »

POST-запрос

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

Пример

xmlhttp.open("POST","/try/ajax/demo_post.php",true); xmlhttp.send();

Попробуйте »

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

Пример

xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");

Попробуйте »

Метод Описание
setRequestHeader(header,value)

Добавляет HTTP-заголовок к запросу.

  • header: Задаёт имя заголовка
  • value: Задаёт значение заголовка

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

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

xmlhttp.open("GET","ajax_test.html",true);

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

Async - True или False?

AJAX расшифровывается как Asynchronous JavaScript and XML.

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

xmlhttp.open("GET","ajax_test.html",true);

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

С AJAX JavaScript не должен ждать ответа сервера, а вместо этого:

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

Async=true

При использовании async=true укажите функцию, которая будет выполняться, когда ответ находится в состоянии готовности, в событии onreadystatechange:

Пример

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send();

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

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

Async = false

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

xmlhttp.open("GET","test1.txt",false);

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

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

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

Пример

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Попробуйте сами »
Другие расширения