Синхронная и асинхронная передача данных в Ajax

Предлагаю в самом начале статьи вспомнить, что технология AJAX расшифровывается не иначе как Асинхронный JavaScript и XML. Это и является главной особенностью технологии. В случае с асинхронной передачей данных браузер не перезагружает страницу и сам не подвисает во время ожидания ответа!

Асинхронную передачу включить легко - достаточно использовать параметр (как правило, третий по порядку) метода open(), где следует указать true (истинно). Соответственно, если поставить false, то браузер будет виснуть на время получения ответа от сервера, будь то лайк, рейтинг или ещё что. А представьте, что было до создания асинхронной передачи данных? На сервере сбой - страница зависла.

Включаем асинхронную передачу данных. Параметры open(метод передачи, действие-файл, асинхронно или синхронно).

Код JS (Ajax)

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

Теперь отосланный запрос будет прорабатывать независимо от других сценариев на странице, а обрабатывать он будет только при получении. Получили ответ с сервера через 20 секунд? Ну вот тогда и обработали, а не зависаем.

Асинхронная отправка

Устанавливаем параметр true в open(). Что делать, когда готов ответ, пишем в событии onreadystatechange (например, отобразить в данном объекте на странице):

Код JS (Ajax)

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

Синхронная передача

Внимание! Синхронную передачу описываю только из приличия. В нашем случае (рассмотрение Ajax) это всё равно, что в 21 век въехать на телеге. Тем не менее, для этого в метод open() вставляем false:

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

Если Вы всё-таки хотите использовать подобную модель, то старайтесь делать это только для небольших запросов. В случае больших запросов браузер зависает, а пользователь пугается и уходит со страницы или закрывает приложение - смотря где используете.



Код JS (Ajax)

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

Спасибо за внимание!

Наконец переходим к следующему уроку с разбором примера Ajax и TXT-файла!