Html xml http request

XML HttpRequest

When you type a character in the input field below, an XMLHttpRequest is sent to the server, and some name suggestions are returned (from the server):

Example

The example above is explained in the AJAX chapters of this tutorial.

Sending an XMLHttpRequest

A common JavaScript syntax for using the XMLHttpRequest object looks much like this:

Example

Example Explained

The first line in the example above creates an XMLHttpRequest object:

The onreadystatechange property specifies a function to be executed every time the status of the XMLHttpRequest object changes:

When readyState property is 4 and the status property is 200, the response is ready:

The responseText property returns the server response as a text string.

The text string can be used to update a web page:

You will learn a lot more about the XMLHttpRequest object in the AJAX chapters of this tutorial.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Основы 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

    Загрузить phones.json!   

Далее мы более подробно разберём основные методы и свойства объекта 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) , мы изучим его чуть позже.

Источник