|
|
@@ -0,0 +1,75 @@
|
|
|
+# XMLHttpRequest
|
|
|
+
|
|
|
+Тот самый объект, из которого и произошел **AJAX/AJAJ**. Программный способ послать **GET** или **POST** запрос на сервер незаметно для пользователя и обработать приходящие данные **JS**-кодом.
|
|
|
+
|
|
|
+## Пример
|
|
|
+
|
|
|
+```javascript
|
|
|
+var request = new XMLHttpRequest()
|
|
|
+
|
|
|
+request.open('GET', 'URL', false) // последний параметр указывает на синхронность или асинхронность запроса. В данном случае запрос синхронный
|
|
|
+
|
|
|
+request.send() // висим пока получаем данные если синхронный запрос, или быстро проскакиваем в случае асинхронного запроса
|
|
|
+
|
|
|
+if (request.status == 200){
|
|
|
+ alert('all ok')
|
|
|
+ console.log(request.responseText)
|
|
|
+}
|
|
|
+else {
|
|
|
+ alert('shit happens: ' + request.status + ', ' + request.statusText );
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+Пример выше написан в синхронном стиле, и предполагает, что на конец выполнения `request.send()` данные уже будут в браузере и код будет вправе проверять код ошибки. Однако такой режим объекта `XMLHttpRequest` является устаревшим,
|
|
|
+подвешивает браузер и не поддерживает многие полезные новые функции.
|
|
|
+
|
|
|
+## Пример (асинхронный)
|
|
|
+
|
|
|
+```javascript
|
|
|
+
|
|
|
+var request = new XMLHttpRequest()
|
|
|
+
|
|
|
+request.open('GET', 'URL', true) // последний параметр указывает на синхронность или асинхронность запроса. В данном случае запрос асинхронный
|
|
|
+
|
|
|
+
|
|
|
+request.onreadystatechange = function(){ //обработчик изменения статуса запроса. Статус == 4 сигнализирует о том, что запрос окончен.
|
|
|
+ if (request.readyState != 4){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (request.status == 200){
|
|
|
+ alert('all ok')
|
|
|
+ console.log(request.responseText)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ alert('shit happens: ' + request.status + ', ' + request.statusText );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+request.send() // инициируем запрос.
|
|
|
+```
|
|
|
+
|
|
|
+Пример выше работает в асинхронном режиме - вместо блокирования браузера пока прийдут данные от удаленного сервера назначается обработчик, который запускается при прохождении разных фаз запроса:
|
|
|
+
|
|
|
+```c++
|
|
|
+const unsigned short UNSENT = 0; // начальное состояние
|
|
|
+const unsigned short OPENED = 1; // вызван open
|
|
|
+const unsigned short HEADERS_RECEIVED = 2; // получены заголовки
|
|
|
+const unsigned short LOADING = 3; // загружается тело (получен очередной пакет данных)
|
|
|
+const unsigned short DONE = 4; // запрос завершён
|
|
|
+```
|
|
|
+
|
|
|
+## `timeout`
|
|
|
+
|
|
|
+Это свойство позволяет установить время ожидания выполнения запроса в миллисекундах.
|
|
|
+
|
|
|
+## Подробнее
|
|
|
+
|
|
|
+https://learn.javascript.ru/ajax-xmlhttprequest
|
|
|
+
|
|
|
+## Задание
|
|
|
+
|
|
|
+1. [JSON](https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json). Загрузить используя XMLHttpRequest и распарсить как ассоциативный массив.
|
|
|
+2. Организовать выбор страны и города, используя два `select` и ассоциативный массив из примера выше. При выборе страны в списке городов должны быть только города из выбранной страны.
|
|
|
+
|
|
|
+
|
