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

Сегодня мы научимся при помощи ajax отправлять запрос на сервер.

Для отправки запроса используются open (); и send (); методы объекта XMLHttpRequest.

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

Давайте отправим простой запрос к файлу на сервере, пускай это будет script.php:

xmlhttp.open ( "GET", "script.php", true );
xmlhttp.send ();

Подробно рассмотрим что мы здесь передаём:

open ( "метод передачи данных", url, "асинхронная передача" );

Этот метод задаёт тип запроса, url файла, тип передачи данных - асинхронная или синхронная.

Метод передачи данных: тип запроса - GET или POST

url: Адрес файла, расположенный на сервере, которому посылаем запрос

Если истина, то асинхронная передача, если ложь, то синхронная передача данных.

send ( строка );

Этот метод отправляет данные с запросом, используется только в том случае, если метод передачи установлен на POST. Если метод передачи GET, то просто оставляем скобки пустыми.

Какой выбрать метод передачи данных: GET или POST?

Передавать данные при помощи метода GET проще и быстрые, чем при помощи метода POST, и такой метод передачи может быть использован в большинстве случаев.

Но всё же нельзя обойтись без метода POST в некоторых случаях:

...Отправка большого кол-ва данных на сервер, метод POST в отличии от GET, не имеет ограничения на размер передаваемых данных

...Метод POST более безопасен чем GET, поскольку пользователи могут отправлять данные с неизвестными символами

...Если файл кэшированный

GET запросы

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

xmlhttp.open ( "GET", "script.php", true );
xmlhttp.send ();

В приведённом примере можно получить результат кэширования, что нам не нужно. Для избежания подобной ситуации, следует добавить к url уникальный идентификатор.

xmlhttp.open ( "GET", "script.php?web=" + Math.random (), true );
xmlhttp.send ();

Если мы хотим отправить какую-то информацию при помощи GET метода, то нам нужно написать её прямо в url, что, как мы уже говорили, очень просто и быстро:

xmlhttp.open ( "GET", "script.php?page=2&id=3", true );
xmlhttp.send ();

POST запросы

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

xmlhttp.open ( "POST", "script.php", true );
xmlhttp.send ();

Можно передать скрипту HTTP заголовок при помощи метода setRequestHeader ().

Давайте передадим простой HTTP заголовок скрипту и отправим какие-нибудь данные при помощи метода send ():

xmlhttp.open ( "POST", "script.php", true );
xmlhttp.setRequestHeader ( "Content-type", "application/x-www-form-urlencoded" );
xmlhttp.send ( "page=2&id=3" );

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

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

заголовок: определяет имя заголовка

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

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

url является параметром метода open (), благодаря ему осуществляется обращение к определённому файлу на сервере, этот параметр несёт в себе путь к файлу-обработчику.

xmlhttp.open("GET","script.php",true);

В данном примере значение url равняется - script.php.

Отправка асинхронных запросов является огромным прогрессом для веб-разработчиков в создании сайтов. Потому как, если на сайте много разных php функций, и при последующей перезагрузке странице придётся ждать долгое время, то AJAX избавляет нас от этого. При помощи ajax, можно выполнять какие-нибудь операции на сайте без перезагрузки страницы и затрагивать при этом только нужные нам функции!

Асинхронная передача данных

При использовании асинхронной передачи данных нужно указывать функцию, которая будет принимать ответ от сервера. Ответ от сервера будет содержаться в событии onreadystatechange:

xmlhttp.onreadystatechange = function () {
  if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   }
}
xmlhttp.open ( "GET", "script.php" ,true );
xmlhttp.send ();

О событии

onreadystatechange мы узнаем больше в следующем уроке!

Cинхронная передача данных

Для того, чтобы использовать синхронную передачу данных, нужно третий параметр метода open (), обозначить как false.

xmlhttp.open ( "GET", "script.php", false );

Использование синхронной передачи данных не рекомендуется, но если запросов не много и они не значительно большие, то можно воспользоваться таким методом передачи данных!

Следует запомнить, что JavaScript не продолжит своё выполнение пока не получит ответ от сервера!

Примечание: При использовании синхронной передачи данных, указывать событие onreadystatechange не нужно, достаточно просто после отправки запроса поставить send ();

xmlhttp.open ( "GET", "script.php", false );
xmlhttp.send ();
document.getElementById( "myDiv" ).innerHTML = xmlhttp.responseText;

О получении данных после отправки запроса, мы с Вами поговорим в следующем уроке!

Поделиться...