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

BACK-END

Для того, что бы опробовать клиент-серверное взаимодействие вы можете использовать следующий простенький сервер на nodejs:

const http = require('http')

const server = http.createServer((req, res) => {
    console.log(req.url)
    res.writeHead(200, {'Content-Type': 'text/html'})
    res.end(`<html>
                <body> 
                    <h1>
                        HELLO WORLD
                    </h1>
                    URL: <b> ${req.url} </b>
                </body>
    </html>`);
})

server.listen(4000,"0.0.0.0")

Этот сервер будет отвечать по адресу http://localhost:4000 HTML страницей. Так же вы можете передать JSON, что удобно для общение используя AJAX.

Задание

Передайте любой объект с сервера на клиент используя JSON.

11XMLHttpRequestFS.md 5.0 KB Постоянная ссылка История Исходник

XMLHttpRequest

Пример

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

timeout

Подробнее

Задание

BACK-END

Задание

11XMLHttpRequestFS.md 5.0 KB

Постоянная ссылка История Исходник

`timeout`