Основы XMLHttpRequest
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/xmlhttprequest.
Объект XMLHttpRequest (или, как его кратко называют, «XHR») даёт возможность из JavaScript делать HTTP-запросы к серверу без перезагрузки страницы.
Несмотря на слово «XML» в названии, XMLHttpRequest может работать с любыми данными, а не только с XML.
Использовать его очень просто.
Пример использования
Как правило, XMLHttpRequest используют для загрузки данных.
Для начала посмотрим на пример использования, который загружает файл phones.json из текущей директории и выдаёт его содержимое:
// 1. Создаём новый объект XMLHttpRequest var xhr = new XMLHttpRequest(); // 2. Конфигурируем его: GET-запрос на URL 'phones.json' xhr.open('GET', 'phones.json', false); // 3. Отсылаем запрос xhr.send(); // 4. Если код ответа сервера не 200, то это ошибка if (xhr.status != 200) < // обработать ошибку alert( xhr.status + ': ' + xhr.statusText ); // пример вывода: 404: Not Found >else < // вывести результат alert( xhr.responseText ); // responseText -- текст ответа. >var http = require('http'); var url = require('url'); var querystring = require('querystring'); var static = require('node-static'); var file = new static.Server('.', < cache: 0 >); function accept(req, res) < if (req.url == '/phones.json') < // искусственная задержка для наглядности setTimeout(function() < file.serve(req, res); >, 2000); > else < file.serve(req, res); >> // ------ запустить сервер ------- if (!module.parent) < http.createServer(accept).listen(8080); >else Далее мы более подробно разберём основные методы и свойства объекта XMLHttpRequest , в том числе те, которые были использованы в этом коде.
Настроить: open
xhr.open(method, URL, async, user, password)Этот метод – как правило, вызывается первым после создания объекта XMLHttpRequest .
Задаёт основные параметры запроса:
- method – HTTP-метод. Как правило, используется GET либо POST, хотя доступны и более экзотические, вроде TRACE/DELETE/PUT и т.п.
- URL – адрес запроса. Можно использовать не только http/https, но и другие протоколы, например ftp:// и file:// . При этом есть ограничения безопасности, называемые «Same Origin Policy»: запрос со страницы можно отправлять только на тот же протокол://домен:порт , с которого она пришла. В следующих главах мы рассмотрим, как их можно обойти.
- async – если установлено в false , то запрос производится синхронно, если true – асинхронно.
«Синхронный запрос» означает, что после вызова xhr.send() и до ответа сервера главный поток будет «заморожен»: посетитель не сможет взаимодействовать со страницей – прокручивать, нажимать на кнопки и т.п. После получения ответа выполнение продолжится со следующей строки.
«Асинхронный запрос» означает, что браузер отправит запрос, а далее результат нужно будет получить через обработчики событий, которые мы рассмотрим далее.
Заметим, что вызов open , в противоположность своему названию ( open – англ. «открыть») не открывает соединение. Он лишь настраивает запрос, а коммуникация инициируется методом send .
Отослать данные: send
Именно этот метод открывает соединение и отправляет запрос на сервер.
В body находится тело запроса. Не у всякого запроса есть тело, например у GET-запросов тела нет, а у POST – основные данные как раз передаются через body .
Отмена: abort
Вызов xhr.abort() прерывает выполнение запроса.
Ответ: status, statusText, responseText
Основные свойства, содержащие ответ сервера:
status HTTP-код ответа: 200 , 404 , 403 и так далее. Может быть также равен 0 , если сервер не ответил или при запросе на другой домен. statusText Текстовое описание статуса от сервера: OK , Not Found , Forbidden и так далее. responseText Текст ответа сервера.
Есть и ещё одно свойство, которое используется гораздо реже:
Если сервер вернул XML, снабдив его правильным заголовком Content-type: text/xml , то браузер создаст из него XML-документ. По нему можно будет делать запросы xhr.responseXml.querySelector(«. «) и другие.
Оно используется редко, так как обычно используют не XML, а JSON. То есть, сервер возвращает JSON в виде текста, который браузер превращает в объект вызовом JSON.parse(xhr.responseText) .
Синхронные и асинхронные запросы
Если в методе open установить параметр async равным false , то запрос будет синхронным.
Синхронные вызовы используются чрезвычайно редко, так как блокируют взаимодействие со страницей до окончания загрузки. Посетитель не может даже прокручивать её. Никакой JavaScript не может быть выполнен, пока синхронный вызов не завершён – в общем, в точности те же ограничения как alert .
// Синхронный запрос xhr.open('GET', 'phones.json', false); // Отсылаем его xhr.send(); // . весь JavaScript "подвиснет", пока запрос не завершитсяЕсли синхронный вызов занял слишком много времени, то браузер предложит закрыть «зависшую» страницу.
Из-за такой блокировки получается, что нельзя отослать два запроса одновременно. Кроме того, забегая вперёд, заметим, что ряд продвинутых возможностей, таких как возможность делать запросы на другой домен и указывать таймаут, в синхронном режиме не работают.
Из всего вышесказанного уже должно быть понятно, что синхронные запросы используются чрезвычайно редко, а асинхронные – почти всегда.
Для того, чтобы запрос стал асинхронным, укажем параметр async равным true .
var xhr = new XMLHttpRequest(); xhr.open('GET', 'phones.json', true); xhr.send(); // (1) xhr.onreadystatechange = function() < // (3) if (xhr.readyState != 4) return; button.innerHTML = 'Готово!'; if (xhr.status != 200) < alert(xhr.status + ': ' + xhr.statusText); >else < alert(xhr.responseText); >> button.innerHTML = 'Загружаю. '; // (2) button.disabled = true;Если в open указан третий аргумент true (или если третьего аргумента нет), то запрос выполняется асинхронно. Это означает, что после вызова xhr.send() в строке (1) код не «зависает», а преспокойно продолжает выполняться, выполняется строка (2) , а результат приходит через событие (3) , мы изучим его чуть позже.
XMLHttpRequest.response
Свойство XMLHttpRequest response возвращает содержимое тела ответа в виде ArrayBuffer , Blob , Document , JavaScript Object или DOMString в зависимости от значения свойства responseType .
Синтаксис
var body = XMLHttpRequest.response;
Value
Соответствующий объект, основанный на значении responseType . Вы можете попытаться запросить данные в определённом формате, установив значение responseType после вызова open() для инициализации запроса, но перед вызовом send() для отправки запроса на сервер.
Значение равно null , если запрос ещё не завершён или был неудачным, за исключением того, что при чтении текстовых данных с использованием responseType «text» или пустой строки ( «» ), ответ может содержать ответ до тех пор, пока запрос все ещё находится в состоянии LOADING readyState (3) .
Типы ответов описаны ниже.
| Значение | Описание |
|---|---|
| «» | Пустая строка responseType обрабатывается так же, как «text» , тип по умолчанию (следовательно, как DOMString .) |
| «arraybuffer» | response в JavaScript ArrayBuffer содержит двоичные данные. |
| «blob» | response в Blob object содержит двоичные данные. |
| «document» | response является HTML Document или XML XMLDocument , в зависимости от ситуации, основанный на MIME-типе полученных данных. См. HTML in XMLHttpRequest (en-US) , чтобы узнать больше об использовании XHR для извлечения содержимого HTML. |
| «json» | response является JavaScript object, созданный путём анализа содержимого полученных данных как JSON. |
| «text» | response является текстом в DOMString object. |
| «moz-chunked-arraybuffer» | Похож на «arraybuffer» , но данные принимаются в потоке. При использовании этого типа ответа значение в response доступно только в обработчике для события progress (en-US) и содержит только данные, полученные с момента последнего события progress , а не совокупные данные, полученные с момента отправки запроса.Доступ к response во время события progress возвращает полученные данные. За пределами обработчика событий progress значение response всегда равно null . |
| «ms-stream» | response является частью потоковой загрузки; этот тип ответа разрешён только для запросов на загрузку и поддерживается только Internet Explorer. |
Пример
В этом примере представлена функция load() , которая загружает и обрабатывает страницу с сервера. Он работает путём создания объекта XMLHttpRequest и создания обработчика события с событием readystatechange , чтобы при изменении readyState на DONE (4) response получался и передавался в колбэк-функцию, предоставляемую load() .
Содержимое обрабатывается как необработанные текстовые данные (поскольку здесь ничто не переопределяет responseType по умолчанию).
var url = 'somePage.html'; //A local page function load(url, callback) var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() if (xhr.readyState === 4) callback(xhr.response); > > xhr.open('GET', url, true); xhr.send(''); >
Спецификации
Совместимость браузера
BCD tables only load in the browser