Xmlhttprequest javascript with response

XMLHttpRequest

XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing.

XMLHttpRequest is used heavily in AJAX programming.

Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML. If your communication needs to involve receiving event data or message data from a server, consider using server-sent events through the EventSource interface. For full-duplex communication, WebSockets may be a better choice.

Constructor

XMLHttpRequest() The constructor initializes an XMLHttpRequest . It must be called before any other method calls.

Instance properties

This interface also inherits properties of XMLHttpRequestEventTarget and of EventTarget . XMLHttpRequest.readyState Read only Returns a number representing the state of the request. XMLHttpRequest.response Read only Returns an ArrayBuffer , a Blob , a Document , a JavaScript object, or a string, depending on the value of XMLHttpRequest.responseType , that contains the response entity body. XMLHttpRequest.responseText Read only Returns a string that contains the response to the request as text, or null if the request was unsuccessful or has not yet been sent. XMLHttpRequest.responseType Specifies the type of the response. XMLHttpRequest.responseURL Read only Returns the serialized URL of the response or the empty string if the URL is null. XMLHttpRequest.responseXML Read only Returns a Document containing the response to the request, or null if the request was unsuccessful, has not yet been sent, or cannot be parsed as XML or HTML. Not available in Web Workers. XMLHttpRequest.status Read only Returns the HTTP response status code of the request. XMLHttpRequest.statusText Read only Returns a string containing the response string returned by the HTTP server. Unlike XMLHttpRequest.status , this includes the entire text of the response message (» OK «, for example).

Note: According to the HTTP/2 specification RFC 7540, section 8.1.2.4: Response Pseudo-Header Fields, HTTP/2 does not define a way to carry the version or reason phrase that is included in an HTTP/1.1 status line.

XMLHttpRequest.timeout The time in milliseconds a request can take before automatically being terminated. XMLHttpRequest.upload Read only A XMLHttpRequestUpload representing the upload process. XMLHttpRequest.withCredentials Returns true if cross-site Access-Control requests should be made using credentials such as cookies or authorization headers; otherwise false .

Non-standard properties

XMLHttpRequest.channel Read only The channel used by the object when performing the request. XMLHttpRequest.mozAnon Read only A boolean. If true, the request will be sent without cookie and authentication headers. XMLHttpRequest.mozSystem Read only A boolean. If true, the same origin policy will not be enforced on the request. XMLHttpRequest.mozBackgroundRequest A boolean. It indicates whether or not the object represents a background service request.

Instance methods

XMLHttpRequest.abort() Aborts the request if it has already been sent. XMLHttpRequest.getAllResponseHeaders() Returns all the response headers, separated by CRLF, as a string, or null if no response has been received. XMLHttpRequest.getResponseHeader() Returns the string containing the text of the specified header, or null if either the response has not yet been received or the header doesn’t exist in the response. XMLHttpRequest.open() Initializes a request. XMLHttpRequest.overrideMimeType() Overrides the MIME type returned by the server. XMLHttpRequest.send() Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent. XMLHttpRequest.setRequestHeader() Sets the value of an HTTP request header. You must call setRequestHeader() after open() , but before send() .

Events

abort Fired when a request has been aborted, for example because the program called XMLHttpRequest.abort() . Also available via the onabort event handler property. error Fired when the request encountered an error. Also available via the onerror event handler property. load Fired when an XMLHttpRequest transaction completes successfully. Also available via the onload event handler property. loadend Fired when a request has completed, whether successfully (after load ) or unsuccessfully (after abort or error ). Also available via the onloadend event handler property. loadstart Fired when a request has started to load data. Also available via the onloadstart event handler property. progress Fired periodically when a request receives more data. Also available via the onprogress event handler property. readystatechange Fired whenever the readyState property changes. Also available via the onreadystatechange event handler property. timeout Fired when progress is terminated due to preset time expiring. Also available via the ontimeout event handler property.

Specifications

Browser compatibility

See also

• XMLSerializer : Serializing a DOM tree into XML
• MDN tutorials covering XMLHttpRequest :
  • Ajax
  • Using XMLHttpRequest
  • HTML in XMLHttpRequest
  • Fetch API

  Found a content problem with this page?

  Источник

  Основы 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) , мы изучим его чуть позже.

  Источник