# 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` и ассоциативный массив из примера выше. При выборе страны в списке городов должны быть только города из выбранной страны. ## BACK-END Для того, что бы опробовать клиент-серверное взаимодействие вы можете использовать следующий простенький сервер на **nodejs**: ```javascript const http = require('http') const server = http.createServer((req, res) => { console.log(req.url) res.writeHead(200, {'Content-Type': 'text/html'}) res.end(`

HELLO WORLD

URL: ${req.url} `); }) server.listen(4000,"0.0.0.0") ``` Этот сервер будет отвечать по адресу `http://localhost:4000` **HTML** страницей. Так же вы можете передать **JSON**, что удобно для общение используя **AJAX**. ## Задание Передайте любой объект с сервера на клиент используя **JSON**.