ItBursa. Блок третий


 

Технология AJAX

Позволяет взаимодействовать с сервером: получать и отправлять информацию
AJAX расшифровывается как Asynchronous Javascript and XML — "асинхронный JavaScript и XML"
В реальности от XML там почти ничего не осталось, все пользуются JSON-ом.

Получим данные с удалённого сервера.
Для этого создаём объект запроса с типом XMLHttpRequest()

 var p = new XMLHttpRequest();

 Затем указываем с каким сервером нужно связаться

 p.open("GET", "http://f2.smartjs.academy/list");

GET - тип запроса
Различие между GET и POST запросами 


Сейчас наиболее часто используются всего два HTTP метода: GET и POST.  
Само название методов подсказывает для чего их используют


GET (get - получать) следует применять для запроса данных.
POST (post - отправлять по почте) — применяем для отправки данных на сервер.

Различия между ними:

GET - безопасный, может только запросить информацию
POST - небезопасный, отправляет данные, отправка сообщений, регистрация, онлайн платежи

GET - тело запроса пустое, поэтому обрабатывается быстро
POST - в теле запроса информация, которую передаём, обрабатывается медленно

GET - передаваемые данные видны в адресной строке, данные не защищены, зато запрос можно сохранить в виде закладки
POST -

GET - ограниченный объём запроса (2 КБ примерно)
POST - можно передавать целые файлы

GET - не разрывает HTTP соединение
POST - разрывает HTTP соединение

 Таким образом
  • если по логике будет происходить небезопасный запрос — использую POST;
  • если идемпотентность (когда при повторном обращении возвращается один и тот же результат) нежелательна — использую POST;
  • если требуется передать большой объем данных или файл — использую POST;
  • в остальных случаях использую GET.
Источник

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

 p.send();

Запрос отправился методом GET по указанному адресу. Увидеть отправку запроса можно в консоли Хрома вкладка Network фильтр XHP

Запрос этот асинхронный и выполняется не сразу.
Если сейчас ввести команду для получения текста ответа, выведет undefined

p.responseText; // должно быть undefined, хоть у меня "", ну пусть

 Это потому что сервер ещё не обработал запрос
Как же тогда получить его результат?

 Существует событие readystatechange, отслеживающее изменение состояния запроса

 p.addEventListener("readystatechange", function() {
     console.log("readystatechange", p.readyState);
});

 Получаем (на самом деле нет, потому что адрес нерабочий)

 readystatechange 2
readystatechange 3
readystatechange 4

А readystatechange 1 был после того как мы ввели команду   p.open

readystatechange4 означает, что данные готовы

Изменим запрос/
Если p.responseText есть, пишем "+" иначе "-"

p.addEventListener("readystatechange", function() {
     console.log("readystatechange", p.readyState, p.responseText? "+" : "-");
});

Видим, что "+" появляется только там, где readystatechange 3 и 4. 
3 - данные начали загружаться, 4 - данные готовы.

То есть условие готовности запроса (if p.readyState === 4) или (if p.readyState === p.DONE), что равнозначно по содержанию, но позволяет обойтись без магических чисел.

 Снова изменим код
p.addEventListener("readystatechange", function() {
     var result = JSON.parse(p.responseText);
     console.log(result);
});