XMLHttpRequest

Тот самый объект, из которого и произошел AJAX/AJAJ. Программный способ послать GET или POST запрос на сервер незаметно для пользователя и обработать приходящие данные JS-кодом.

Пример

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 является устаревшим, подвешивает браузер и не поддерживает многие полезные новые функции.

Пример (асинхронный)


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() // инициируем запрос.

Пример выше работает в асинхронном режиме - вместо блокирования браузера пока прийдут данные от удаленного сервера назначается обработчик, который запускается при прохождении разных фаз запроса:

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

Задание

JSON. Загрузить используя XMLHttpRequest и распарсить как ассоциативный массив.
Организовать выбор страны и города, используя два select и ассоциативный массив из примера выше. При выборе страны в списке городов должны быть только города из выбранной страны.

11XMLHttpRequest.md 3.9 KB Permalink History Raw