From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/api/xmlhttprequest/abort/index.html | 70 ++ .../xmlhttprequest/getresponseheader/index.html | 118 ++++ files/ru/web/api/xmlhttprequest/index.html | 613 +++++++++++++++++ .../xmlhttprequest/onreadystatechange/index.html | 117 ++++ files/ru/web/api/xmlhttprequest/open/index.html | 66 ++ .../web/api/xmlhttprequest/readystate/index.html | 153 +++++ .../ru/web/api/xmlhttprequest/response/index.html | 145 ++++ .../web/api/xmlhttprequest/responsetext/index.html | 75 +++ .../web/api/xmlhttprequest/responsetype/index.html | 137 ++++ .../web/api/xmlhttprequest/responseurl/index.html | 42 ++ .../web/api/xmlhttprequest/responsexml/index.html | 142 ++++ files/ru/web/api/xmlhttprequest/send/index.html | 291 ++++++++ .../sending_and_receiving_binary_data/index.html | 171 +++++ .../api/xmlhttprequest/setrequestheader/index.html | 110 +++ files/ru/web/api/xmlhttprequest/status/index.html | 77 +++ .../web/api/xmlhttprequest/statustext/index.html | 78 +++ .../index.html | 234 +++++++ files/ru/web/api/xmlhttprequest/timeout/index.html | 56 ++ files/ru/web/api/xmlhttprequest/upload/index.html | 116 ++++ .../xmlhttprequest/using_xmlhttprequest/index.html | 743 +++++++++++++++++++++ .../api/xmlhttprequest/withcredentials/index.html | 104 +++ .../api/xmlhttprequest/xmlhttprequest/index.html | 58 ++ 22 files changed, 3716 insertions(+) create mode 100644 files/ru/web/api/xmlhttprequest/abort/index.html create mode 100644 files/ru/web/api/xmlhttprequest/getresponseheader/index.html create mode 100644 files/ru/web/api/xmlhttprequest/index.html create mode 100644 files/ru/web/api/xmlhttprequest/onreadystatechange/index.html create mode 100644 files/ru/web/api/xmlhttprequest/open/index.html create mode 100644 files/ru/web/api/xmlhttprequest/readystate/index.html create mode 100644 files/ru/web/api/xmlhttprequest/response/index.html create mode 100644 files/ru/web/api/xmlhttprequest/responsetext/index.html create mode 100644 files/ru/web/api/xmlhttprequest/responsetype/index.html create mode 100644 files/ru/web/api/xmlhttprequest/responseurl/index.html create mode 100644 files/ru/web/api/xmlhttprequest/responsexml/index.html create mode 100644 files/ru/web/api/xmlhttprequest/send/index.html create mode 100644 files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html create mode 100644 files/ru/web/api/xmlhttprequest/setrequestheader/index.html create mode 100644 files/ru/web/api/xmlhttprequest/status/index.html create mode 100644 files/ru/web/api/xmlhttprequest/statustext/index.html create mode 100644 files/ru/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html create mode 100644 files/ru/web/api/xmlhttprequest/timeout/index.html create mode 100644 files/ru/web/api/xmlhttprequest/upload/index.html create mode 100644 files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html create mode 100644 files/ru/web/api/xmlhttprequest/withcredentials/index.html create mode 100644 files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html (limited to 'files/ru/web/api/xmlhttprequest') diff --git a/files/ru/web/api/xmlhttprequest/abort/index.html b/files/ru/web/api/xmlhttprequest/abort/index.html new file mode 100644 index 0000000000..d98ce045bf --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/abort/index.html @@ -0,0 +1,70 @@ +--- +title: XMLHttpRequest.abort() +slug: Web/API/XMLHttpRequest/abort +tags: + - AJAX + - API + - HTTP + - HttpRequest + - XHR + - XMLHttpRequest + - Отмена + - метод +translation_of: Web/API/XMLHttpRequest/abort +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Метод XMLHttpRequest.abort() прерывает уже отправленный запрос. Когда запрос прерывается, то его свойство {{domxref("XMLHttpRequest.readyState", "readyState")}} устанавливается в UNSENT (0), а {{domxref("XMLHttpRequest.status", "status")}} в 0.

+ +

Синтаксис

+ +
XMLHttpRequest.abort()
+ +

Параметры

+ +

Нет.

+ +

Возвращаемое значение

+ +

undefined

+ +

Пример

+ +
var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+xhr.open(method, url, true);
+
+xhr.send();
+
+xhr.abort();
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('XMLHttpRequest', '#the-abort()-method')}}{{Spec2('XMLHttpRequest')}}Действующий стандарт WHATWG
+ +

Совместимость браузеров

+ + + +

{{Compat("api.XMLHttpRequest.abort")}}

+ +

Cм. также

+ + diff --git a/files/ru/web/api/xmlhttprequest/getresponseheader/index.html b/files/ru/web/api/xmlhttprequest/getresponseheader/index.html new file mode 100644 index 0000000000..ebe4a094b6 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/getresponseheader/index.html @@ -0,0 +1,118 @@ +--- +title: XMLHttpRequest.getResponseHeader() +slug: Web/API/XMLHttpRequest/getResponseHeader +tags: + - API + - XHR + - XMLHttpRequest + - getResponseHeader + - метод +translation_of: Web/API/XMLHttpRequest/getResponseHeader +--- +

{{draft}}{{APIRef('XMLHttpRequest')}}

+ +

Метод XMLHttpRequest.getResponseHeader() возвращает строку, содержащую текст определённого хэдера (header). Если в наличии несколько хэдеров с одинаковыми именами, то они возвращаются в виде одной строки, где значения отделены друг от друга парой "запятая + пробел". Метод getResponseHeader() возвращает значение в кодировке UTF.

+ +

Синтаксис

+ +
var myHeader = getResponseHeader(name);
+ +

Параметры

+ +
+
name
+
Строка {{domxref("ByteString")}}, представляющая имя хэдера, значение которого необходимо возвратить в виде текста.
+
+ +

Возвращаемое значение

+ +

Строка {{domxref("ByteString")}}, представляющее текстовое значение хэдера или null, если ответ ещё не был получен или хэдер с именем name отсутствует в ответе.

+ +

Пример

+ +
var client = new XMLHttpRequest();
+client.open("GET", "unicorns-are-teh-awesome.txt", true);
+client.send();
+client.onreadystatechange = function() {
+  if(this.readyState == this.HEADERS_RECEIVED) {
+    console.log(client.getResponseHeader("Content-Type"));
+  }
+}
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('XMLHttpRequest', '#dom-xmlhttprequest-getresponseheader', 'getResponseHeader()')}}{{Spec2('XMLHttpRequest')}}Действующий стандарт WHATWG
+ +

Совместимость браузеров

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(1)}}{{CompatUnknown}}{{CompatIe('5')}}[1]
+ {{CompatIe('7')}}		{{CompatVersionUnknown}}{{CompatSafari('1.2')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Это свойство обеспечивалось посредством ActiveXObject(). Internet Explorer поддерживает стандарт XMLHttpRequest начиная с версии 7.

+ +

См. также

+ + diff --git a/files/ru/web/api/xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..ee51092cf6 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/index.html @@ -0,0 +1,613 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX + - API + - HTTP + - JavaScript + - MakeBrowserAgnostic + - NeedsMobileBrowserCompatibility + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +

{{APIRef("XMLHttpRequest")}}

+ +

XMLHttpRequest это API, который предоставляет клиенту функциональность для обмена данными между клиентом и сервером. Данный API предоставляет простой способ получения данных по ссылке без перезагрузки страницы. Это позволяет обновлять только часть веб-страницы не прерывая пользователя.  XMLHttpRequest используется в AJAX запросах и особенно в single-page приложениях.

+ +

XMLHttpRequest изначально был разработан Microsoft и позже заимствован Mozilla, Apple, и Google. Сейчас он стандартизирован WHATWG. Несмотря на свое название, XMLHttpRequest может быть использован для получения любых типов данных, не только XML, и поддерживает протоколы помимо HTTP (включая file и ftp).

+ +

Чтобы начать работать с XMLHttpRequest, выполните этот код:

+ +
var myRequest = new XMLHttpRequest();
+
+ +

более детальное описание создание объекта, можно увидеть в разделе Using XMLHttpRequest.

+ +

Список методов объекта

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
XMLHttpRequest(JSObject objParameters);
void abort();
DOMString getAllResponseHeaders();
DOMString? getResponseHeader(DOMString header);
void open(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);
void overrideMimeType(DOMString mime);
void send();
+ void send(ArrayBuffer data);
+ void send(ArrayBufferView data);
+ void send(Blob data);
+ void send(Document data);
+ void send(DOMString? data);
+ void send(FormData data);
void setRequestHeader(DOMString header, DOMString value);
Нестандартные методы
[noscript] void init(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);
[noscript] void openRequest(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password);
void sendAsBinary(in DOMString body); {{ deprecated_inline(31) }}
+ +

Поля объекта

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeTypeDescription
+

onreadystatechange

+ 		Function? +

Callback - функция, которая вызывается всякий раз, когда поле readyState меняет свое значение. Callback выполняется в потоке работы приложения.

+ +
Внимание: Он не должен использоваться в синхронных запросах, и не должен выполняться из нативного кода (? must not be used from native code).
+
readyStateunsigned short +

Состояние запроса:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ЗначениеСостояниеОписание
0UNSENTКлиент создан. Метод open() еще не вызван.
1OPENEDВызван метод open(). В этом состоянии можно добавить заголовки через метод setRequestHeader(); вызов метода send() отправит запрос.
2HEADERS_RECEIVEDВызван метод send(), получены заголовки и код ответа (200, 404, 501 и проч).
3LOADINGЗагрузка; если значение responseType равно "text" или пустой строке, то responseText содержит частичные данные.
4DONEОперация завершена. Все данные получены.
+
responsevaries +

Тело сущности запроса. Соласно полю responseType, может быть ArrayBuffer, Blob, {{ domxref("Document") }}, JavaScript объектом (для "json"), или строкой. Равно null если запрос не завершен или окончен с ошибкой.

+
responseText {{ReadOnlyInline()}}DOMStringОтвет на запрос в виде строки или null в случае если запрос не успешен или ответ еще не получен.
responseTypeXMLHttpRequestResponseType +

Может использоваться для определения типа ответа.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueData type of response property
"" (пустая строка)String (строка, дефолтное значение)
"arraybuffer"ArrayBuffer
"blob"{{ domxref("Blob") }}
"document"{{ domxref("Document") }}
"json"JavaScript объект, полученный путем парсинга JSON строки, полученной с сервера.
"text"String (строка)
"moz-blob"Firefox - велосипед, который позволяет работать с частично-полученными данными {{ domxref("Blob") }} при помощи событий прогресса (progressing events). Эта штука позволяет работать с ответом от сервера, до того как он получен полностью.
"moz-chunked-text" +

Похоже на поле "text", но только находится в потоке(streaming). Это значит, что значение доступно только в промежуток времени между событиями прогресса ("progress" event), и содержит данные которые пришли из последнего события прогресса.

+ +

Поле содержит строку, пока выполняются события прогресса. После того как ответ получен польность, значение поля меняется на null.

+ +

Работает только в Firefox.

+
"moz-chunked-arraybuffer" +

Похоже на поле "arraybuffer", но только находится в потоке(streaming). Это значит, что значение доступно только в промежуток времени между событиями прогресса ("progress" event), и содержит данные которые пришли из последнего события прогресса.

+ +

Поле содержит строку, пока выполняются события прогресса. После того как ответ получен полностью, значение поля меняется на null.

+ +

Работает только в Firefox.

+
+ +
Note: Starting with Gecko 11.0 {{ geckoRelease("11.0") }}, as well as WebKit build 528, these browsers no longer let you use the responseType attribute when performing synchronous requests. Attempting to do so throws an NS_ERROR_DOM_INVALID_ACCESS_ERR exception. This change has been proposed to the W3C for standardization.
+
responseXML {{ReadOnlyInline()}}Document? +

Ответ является объектом DOM Document, или null в случае если запрос окончился ошибкой, или ответ не получен полностью, или если ответ невозможно распарсить как XML или HTML. Ответ парсится как если бы это был text/xml stream. Когда значение responseType равно "document" и запрос выполнен асинхронно, ответ парсится как text/html stream.

+ +
Примечание: Если сервер не работаетс заголовком (не присылает в ответе) "Content-type: text/xml", то можно использовать метод overrideMimeType() для того чтобы парсить получаемый ответ как XML.
+
status {{ReadOnlyInline()}}unsigned shortСтатус ответа на запрос. Равен кодам HTTP (200 - успешно, 404 не найдено, 301 - перенесено навсегда).
statusText {{ReadOnlyInline()}}DOMStringСтрока статуса ответа. В отличи от поля status, эта строка включает в себя текст - ("200 OK", например).
timeoutunsigned long +

Время в миллисекундах, после которого запрос будет отменен. Значение 0 (по умолчанию) значит что таймаута не будет. Никогда.

+ +
Примечание: Вы можете не использовать поле timeout для синхронных запросов из owning window.
+
ontimeoutFunction +

Функция обратного вызова которая будет вызвана в случае таймаута.

+
uploadXMLHttpRequestUploadЗагрзка (upload process) может отслеживаться event listener'ом.
withCredentialsboolean +

Определяет что cross-site запрос, согласно Access-Control  должен использовать авторизацию (креды для логина и пароля) через куки, или заголовок с авторизационными данными. По умолчанию false.

+ +
Примечание: Не влияет на same-site запросы.
+ +
Примечание: Начиная с Gecko 11.0 {{ geckoRelease("11.0") }}, Gecko больше не позволяет использовать поле withCredentials при выполнении синхронных запросов. Попытка выполнить это выбрасывает NS_ERROR_DOM_INVALID_ACCESS_ERR исключение.
+
+ +

Нестандартные свойства

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeTypeDescription
channel {{ReadOnlyInline()}}{{Interface("nsIChannel")}}The channel used by the object when performing the request. This is null if the channel hasn't been created yet. In the case of a multi-part request, this is the initial channel, not the different parts in the multi-part request. Requires elevated privileges to access.
mozAnon {{ReadOnlyInline()}}boolean +

Если значение равно true, запрос отправляется без куки и заголовков авторизации.

+
mozSystem {{ReadOnlyInline()}}boolean +

Если значение равно true, same origin policy не будут использоваться в запросе (кроссдоменный запрос не сработает).

+
mozBackgroundRequestboolean +
+

Этот метод не может быть вызван из контекста страницы. Для того чтобы воспользоваться им нужны повышенные привелегии (elevated privileges).

+
+ +

Флаг, означающий что запрос от пользователя надо скрыть. Для пользователя не появится никаких сообщений и/или оповещений что запрос вообще был.

+ +

В случае, если для продолжения запроса нужна какая-то аутентификация, и в других случаях было бы отображено оповещение, этот запрос просто не сработает.

+ +
Note: Этот флаг должен быть выставлен до вызова метода open().
+
mozResponseArrayBuffer {{ obsolete_inline("6") }} {{ReadOnlyInline()}}ArrayBufferМассив, в который ляжет ответ от сервера, если ответ приходит в виде Javascript массива ([]). В случае, если запрос не удалось завершить, или если запрос не был отправлен, то это поле будет null.
multipart {{ obsolete_inline("22") }}boolean +

This Gecko-only feature was removed in Firefox/Gecko 22. Please use Server-Sent Events, Web Sockets, or responseText from progress events instead.

+ +

Indicates whether or not the response is expected to be a stream of possibly multiple XML documents. If set to true, the content type of the initial response must be multipart/x-mixed-replace or an error will occur. All requests must be asynchronous.

+ +

This enables support for server push; for each XML document that's written to this request, a new XML DOM document is created and the onload handler is called between documents.

+ +
Note: When this is set, the onload handler and other event handlers are not reset after the first XMLdocument is loaded, and the onload handler is called after each part of the response is received.
+
+ +

Конструктор

+ +

XMLHttpRequest()

+ +

Конструктор создает объект XMLHttpRequest. Он должен быть вызван перед обращением к любому методу класса.

+ +

Gecko/Firefox 16 добавляет нестандартные параметры в конструктор, для лучшего взаимодействия с режимом инкогнито, (смотри Bug 692677). Установка флага mozAnon в значение true создает сущность AnonXMLHttpRequest() описанную в XMLHttpRequest спецификации, но не реализованную не в одном из браузеров (информация сентября 2012).

+ +
XMLHttpRequest (
+  JSObject objParameters
+);
+ +
Параметры (нестандартные)
+ +
+
objParameters
+
Вы можете использовать два флага: +
+
mozAnon
+
Boolean: Использование этого флага уберет из запроса заголовки origin, и user credentials. Кроме этого, куки не будут отправлены в запросе, если только они не будут добавлены к запросу специально, через метод setRequestHeader.
+
mozSystem
+
Boolean: Если выставить этот флаг в значение true то это позволит делать cross-доменные запросы без необходимости получения специальных заголовков со стороны сервера (CORS). Для использования этого флага необходимо использовать дополнительный флаг mozAnon: true, поскольку для отправки запроса на другой домен, нельзя использовать куки и креды пользователя. Этот флаг работает только с привилегированными (одобренными) приложениями; он не сработает с произвольно загруженными страницами.
+
+
+
+ +

Методы

+ +

abort()

+ +

Отменяет запрос, если он был отправлен.

+ +

getAllResponseHeaders()

+ +
DOMString getAllResponseHeaders();
+ +

Возвращает все заголовки ответа как строку, или null если ответ не был получен. Для multypart запросов возвращает заголовки текущей части запроса, а не всего канала.

+ +

getResponseHeader()

+ +
DOMString? getResponseHeader(DOMString header);
+ +

Возвращает значение указанного заголовка из полученного ответа, или null в случает если ответ не получен, или такого заголовка в ответе нет. Возвращаемая строка имеет кодировку UTF.

+ +
+

Примечание: Если в ответе есть заголовки с одни названием, то значения этих заголовков будут объеденены в одну строку, разделенную запятой и пробелом.

+
+ +

open()

+ +

Инициализирует запрос. Этот метод может (и должен) быть вызван из JavaScript кода; если необходимо вызвать запрос из нативного кода, то нужно использовать метод openRequest().

+ +
Примечание: Вызов этого метода из активного запроса (если метод open() или openRequest() уже были вызваны) эквивалентно вызову метода abort().
+ +
void open(
+   DOMString method,
+   DOMString url,
+   optional boolean async,
+   optional DOMString user,
+   optional DOMString password
+);
+
+ +
Параметры
+ +
+
method
+
HTTP метод отправки сообщения - "GET", "POST", "PUT", "DELETE", и проч. Ignored for non-HTTP(S) URLs.
+
url
+
URL адрес, на который будет отправлено сообщение.
+
async
+
Необязательный boolean параметр, по умолчанию равный true. Определяет, будет ли запрос отправлен асинхронно. Если значение равно false, метод send() вернет ответ в общем потоке работы приложения (иначе говоря, приложение зависнет на некоторое время), в противном случае, ответ может быть получен только при помощи определенных event listener'ов. В случае, если используется отправка multipart запроса, то этот атрибут должен быть true, или будет выброшено исключение. +
Примечание: Начиная с Gecko 30.0 {{ geckoRelease("30.0") }}, синхронные запросы объявлены как deprecated, в силу того что все пользователи недовольны тем, что приложение "зависает".
+
+
user
+
Необязательный параметр, используется для аутентификации пользователя. По умолчанию, пустая строка.
+
password
+
Необязательный параметр, используется для аутентификации пользователя. По умолчанию пустая строка.
+
+ +

overrideMimeType()

+ +

Переопределяет MIME тип, получаемый от сервера. Это может быть использовано, например, для того чтобы получить и распарсить данные в формате text/xml, даже, если сервер сообщает что это не так. Этот метод должен быть вызван перед вызовом метода send().

+ +
void overrideMimeType(DOMString mimetype);
+ +

send()

+ +

Отправляет запрос. Если запрос асинхронный (а по умолчанию это так), этот метод вернет значение сразу после того как метод вызван.

+ +
+

Примечание переводчика: в этом случае, в ответе не будет содержаться информации, которая пришла с сервера, поскольку она еще не пришла. Для того чтобы получить эту информацию, нужно слушать события загрузки, или использовать promise.

+
+ +

Если запрос синхронный, то метод вернет значение только после того, как придет запрос от сервера.

+ +
Примечание: все необходимые слушатели событий (event listeners) должны быть установлены перед вызовом send().
+ +
Примечание: Лучше не использовать параметр ArrayBuffer. Сейчас он не входит в спецификацию XMLHttpRequest. Вместо него можно использовать ArrayBufferView (смотри таблицу совместимости для различных версий).
+ +
void send();
+void send(ArrayBuffer data);
+void send(ArrayBufferView data);
+void send(Blob data);
+void send(Document data);
+void send(DOMString? data);
+void send(FormData data);
+ +
Примечания
+ +

Если тип data - Document, то он будет сериализован перед отправкой. Firefox до версии 3 всегда отправляет такой запрос в кодировке UTF-8; Firefox 3 отправляет данные в той кодировке, которая указаны в body.xmlEncoding, или UTF-8 если такой информации нет.

+ +

If it's an nsIInputStream, it must be compatible with nsIUploadChannel's setUploadStream()method. In that case, a Content-Length header is added to the request, with its value obtained using nsIInputStream's available()method. Any headers included at the top of the stream are treated as part of the message body. The stream's MIMEtype should be specified by setting the Content-Type header using the setRequestHeader() method prior to calling send().

+ +

The best way to send binary content (like in files upload) is using an ArrayBufferView or Blobs in conjuncton with the send() method. However, if you want to send a stringifiable raw data, use the sendAsBinary() method instead, or the StringView Non native typed arrays superclass.

+ +

setRequestHeader()

+ +

Устанавливает значение заголовка HTTP-запроса. Вы должны вызвать setRequestHeader() после open(), но перед send(). Если данный метод вызывается несколько раз с одним и тем же заголовком, все значения объеденяются в один заголовок запроса.

+ +
void setRequestHeader(
+   DOMString header,
+   DOMString value
+);
+
+ +
Параметры
+ +
+
header
+
Имя заголовка, значение которого будет установлено.
+
value
+
Значение, заданное как тело заголовка.
+
+ +

Нестандартные методы

+ +

init()

+ +

Инициализирует объект для использования с C++ кодом.

+ +
Внимание: Этот метод нельзя вызывать из JavaScript.
+ +
[noscript] void init(
+   in nsIPrincipal principal,
+   in nsIScriptContext scriptContext,
+   in nsPIDOMWindow ownerWindow
+);
+
+ +
Параметры
+ +
+
principal
+
+

Принцип, используемый для запроса; не должен быть null.

+
+
scriptContext
+
+

Контекст скрипта, используемого для запроса; не должен быть null.

+
+
ownerWindow
+
+

Окно, связанное с запросом; может быть null.

+
+
+ +

openRequest()

+ +

Инициализирует запрос. Этот метод должен использоваться из собственного кода; для инициализации запроса из кода JavaScript вместо этого используйте используйте open() метод. Смотрите документацию для open().

+ +

sendAsBinary() {{ deprecated_inline(31) }}

+ +

Вариант метода send() который посылает бинарные данные.

+ +
Примечание: Етот нестандартный метод считается устарелым по состоянию на Gecko 31 {{ geckoRelease(31) }}, и со временем будет удален. Взамен может использоваться стандарт метода send(Blob data). 
+ +
void sendAsBinary(
+   in DOMString body
+);
+
+ +

Даный метод используется в сочетании с методом readAsBinaryString, который присутствует в FileReader API, и позволяет прочитать и загрузить файл любого типа и превратить необработанные данные в JSON-строку.

+ +
Параметры
+ +
+
body
+
Тело запроса в виде DOMstring. Эти данные конвертированы в строку с однобайтовыми символами с помощью усечения (удаления байта с высоким порядком в каждом символе).
+
+ +
sendAsBinary() polyfill
+ +

Since sendAsBinary() is an experimental feature, here is a polyfill for browsers that don't support the sendAsBinary() method but support typed arrays.

+ +
/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+|*|
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function (sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+ +
Note: It's possible to build this polyfill putting two types of data as argument for send(): an ArrayBuffer (ui8Data.buffer – the commented code) or an ArrayBufferView (ui8Data, which is a typed array of 8-bit unsigned integers – uncommented code). However, on Google Chrome, when you try to send an ArrayBuffer, the following warning message will appear: ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead. Another possible approach to send binary data is the StringView Non native typed arrays superclass in conjunction with the send() method.
+ +

Notes

+ + + +

Events

+ +

onreadystatechange as a property of the XMLHttpRequest instance is supported in all browsers.

+ +

Since then, a number of additional event handlers were implemented in various browsers (onload, onerror, onprogress, etc.). These are supported in Firefox. In particular, see {{ interface("nsIXMLHttpRequestEventTarget") }} and Using XMLHttpRequest.

+ +

More recent browsers, including Firefox, also support listening to the XMLHttpRequest events via standard addEventListener APIs in addition to setting on* properties to a handler function.

+ +

Permissions

+ +

When using System XHR via the mozSystem property, for example for Firefox OS apps, you need to be sure to add the systemXHR permission into your manifest file. System XHR can be used in privileged or certified apps.

+ +
"permissions": {
+    "systemXHR":{}
+}
+ +

Совместимость с браузерами

+ +

{{Compat("api.XMLHttpRequest")}}

+ +

See also

+ + diff --git a/files/ru/web/api/xmlhttprequest/onreadystatechange/index.html b/files/ru/web/api/xmlhttprequest/onreadystatechange/index.html new file mode 100644 index 0000000000..4069a6378b --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/onreadystatechange/index.html @@ -0,0 +1,117 @@ +--- +title: XMLHttpRequest.onreadystatechange +slug: Web/API/XMLHttpRequest/onreadystatechange +tags: + - API + - XHR + - XMLHttpRequest + - Обработчик + - Свойство + - Событие + - Ссылка +translation_of: Web/API/XMLHttpRequest/onreadystatechange +--- +
{{APIRef}}
+ +

Обработчик события (EventHandler), который вызывается всякий раз, когда изменяется состояние свойства readyState. Свойство XMLHttpRequest.onreadystatechange содержит обработчик события, вызываемый когда происходит событие {{event("readystatechange")}}, всякий раз  когда свойство {{domxref("XMLHttpRequest.readyState", "readyState")}} запроса {{domxref("XMLHttpRequest")}} изменяется. Функция обратного вызова запускается из потока пользовательского интерфейса.

+ +
+

Внимание: Не должно использоваться при синхронных запросах  и из исходного кода (native code).

+
+ +

Событие readystatechange не произойдёт если запрос XMLHttpRequest отменён методом abort().

+ +

Синтаксис

+ +
XMLHttpRequest.onreadystatechange = callback;
+ +

Значение

+ + + +

Пример

+ +
var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(method, url, true);
+xhr.onreadystatechange = function () {
+        if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+            console.log(xhr.responseText);
+        };
+    };
+xhr.send();
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}{{Spec2('XMLHttpRequest')}}Действующий стандарт WHATWG
+ +

Совместимость браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatChrome(1)}}{{CompatGeckoDesktop(1.0)}}{{CompatIe(7)}}[1]{{CompatVersionUnknown}}{{CompatSafari(1.2)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer версий 5 и 6 поддерживают запросы ajax при использовании ActiveXObject().

diff --git a/files/ru/web/api/xmlhttprequest/open/index.html b/files/ru/web/api/xmlhttprequest/open/index.html new file mode 100644 index 0000000000..24b59f60f5 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/open/index.html @@ -0,0 +1,66 @@ +--- +title: XMLHttpRequest.open() +slug: Web/API/XMLHttpRequest/open +translation_of: Web/API/XMLHttpRequest/open +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Метод XMLHttpRequest.open() инициализирует новый запрос или повторно инициализирует уже созданный.

+ +
Заметка: Вызов этого метода для уже активного запроса (для которого уже был вызван  open()) эквивалентно вызову abort().
+ +

Синтаксис

+ +
XMLHttpRequest.open(method, url[, async[, user[, password]]])
+
+ +

Параметры

+ +
+
method
+
Для HTTP-запроса используются такие методы как "GET", "POST", "PUT", "DELETE", и т. д. Игнорируется для URL, отличных от HTTP(S)-запросов.
+
url
+
{{domxref("DOMString")}} представляет URL для отправки запроса.
+
async {{optional_inline}}
+
+

Необязательный логический параметр со значением по умолчанию true, указывающим, выполнять ли операцию асинхронно или нет. Если это значение равно false, метод send() не возвращается, пока не будет получен ответ. Если true, уведомление о получении ответа осуществляется с помощью обработчика события. Должен быть true, если аттрибут multipart равен true, иначе будет выброшено исключение.

+ +
Заметка: Синхронные запросы в основном потоке могут нарушить работу пользователя, их следует избегать. Фактически большинство браузеров полностью отказались от поддержки синхронных XHR в основном потоке. Синхронные запросы можно использовать в {{domxref("Worker")}}.
+
+
user {{optional_inline}}
+
Опционально: имя пользователя, использующееся для аутентификации; по умолчанию имеет значение null.
+
password {{optional_inline}}
+
Опционально: пароль, использующийся для аутентификации; по умолчанию имеет значение null.
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}{{Spec2('XMLHttpRequest')}}WHATWG живой стандарт
+ +

Браузерная совместимость

+ + + +

{{Compat("api.XMLHttpRequest.open")}}

+ +

См. также

+ + diff --git a/files/ru/web/api/xmlhttprequest/readystate/index.html b/files/ru/web/api/xmlhttprequest/readystate/index.html new file mode 100644 index 0000000000..a585b31e8b --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/readystate/index.html @@ -0,0 +1,153 @@ +--- +title: XMLHttpRequest.readyState +slug: Web/API/XMLHttpRequest/readyState +tags: + - AJAX + - XMLHttpRequest + - Свойство + - Ссылка +translation_of: Web/API/XMLHttpRequest/readyState +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Свойство XMLHttpRequest.readyState возвращает текущее состояние объекта XMLHttpRequest. Объект XHR может иметь следующие состояния:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ЗначениеСостояниеОписание
0UNSENTОбъект был создан. Метод open() ещё не вызывался.
1OPENEDМетод open() был вызван.
2HEADERS_RECEIVEDМетод send() был вызван, доступны заголовки (headers) и статус.
3LOADINGЗагрузка; responseText содержит частичные данные.
4DONEОперация полностью завершена.
+ +
+
UNSENT
+
Объект XMLHttpRequest был создан, но метод open() ещё не вызывался.
+
OPENED
+
Был вызван метод open(). На этом этапе методом setRequestHeader() могут быть установлены заголовки запроса (request headers), после чего для начала выполнения запроса может быть вызван метод send() .
+
HEADERS_RECEIVED
+
Был вызван метод send() и получены заголовки ответа (response headers) .
+
LOADING
+
Получена часть ответа. Если responseType  - это пустая строка или имеет значение "text", responseText будет содержать загруженную порцию текста ответа.
+
DONE
+
Операция доставки данных завершена. Это может означать как то, что передача данных полностью завершена успешно, так и то, что произошла ошибка.
+
+ +
+

Названия состояний отличаются в версиях Internet Explorer ранее 11. Вместо UNSENT, OPENED, HEADERS_RECEIVED, LOADING и DONE, используются названия READYSTATE_UNINITIALIZED (0), READYSTATE_LOADING (1), READYSTATE_LOADED (2), READYSTATE_INTERACTIVE (3) и READYSTATE_COMPLETE (4).

+
+ +

Пример

+ +
var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.readyState); // readyState будет равно 0
+
+xhr.open('GET', '/api', true);
+console.log('OPENED', xhr.readyState); // readyState будет равно 1
+
+xhr.onprogress = function () {
+    console.log('LOADING', xhr.readyState); // readyState будет равно 3
+};
+
+xhr.onload = function () {
+    console.log('DONE', xhr.readyState); // readyState будет равно 4
+};
+
+xhr.send(null);
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('XMLHttpRequest', '#states')}}{{Spec2('XMLHttpRequest')}}Действующий стандарт WHATWG
+ +

Совместимость браузеров

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(1)}}{{CompatGeckoDesktop("1.0")}}[1]{{CompatIe(7)}}{{CompatVersionUnknown}}{{CompatSafari("1.2")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidChrome для AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/api/xmlhttprequest/response/index.html b/files/ru/web/api/xmlhttprequest/response/index.html new file mode 100644 index 0000000000..81a922d5ab --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/response/index.html @@ -0,0 +1,145 @@ +--- +title: XMLHttpRequest.response +slug: Web/API/XMLHttpRequest/response +tags: + - AJAX + - Response + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/response +--- +
{{APIRef('XMLHttpRequest')}}
+ +
Свойство 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 , чтобы узнать больше об использовании XHR для извлечения содержимого HTML.

+
"json"response является JavaScript object, созданный путем анализа содержимого полученных данных как JSON.
"text"response является текстом в DOMString object.
"moz-chunked-arraybuffer"  +

 

+ +

Похож на "arraybuffer", но данные принимаются в потоке. При использовании этого типа ответа значение в response доступно только в обработчике для события progress и содержит только данные, полученные с момента последнего события 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('');
+}
+
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-response-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG живой стандарт
+ +

Совместимость браузера

+ + + +

{{Compat("api.XMLHttpRequest.response")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/xmlhttprequest/responsetext/index.html b/files/ru/web/api/xmlhttprequest/responsetext/index.html new file mode 100644 index 0000000000..67421dc290 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/responsetext/index.html @@ -0,0 +1,75 @@ +--- +title: XMLHttpRequest.responseText +slug: Web/API/XMLHttpRequest/responseText +translation_of: Web/API/XMLHttpRequest/responseText +--- +
{{draft}}
+ +
{{APIRef('XMLHttpRequest')}}
+ +

Только для чтения {{domxref("XMLHttpRequest")}} свойство responseText возвращает текст ответа от сервера на отправленный запрос.

+ +

Syntax

+ +
var resultText = XMLHttpRequest.responseText;
+ +

Значение

+ +

Строка {{domxref("DOMString")}} содержащая либо текстовые данные, полученные при использовании XMLHttpRequest, либо null в случае, когда вопрос возвратил ошибку, или же еще не был  отослан на сервер вызовом функции {{domxref("XMLHttpRequest.send", "send()")}}.

+ +

Во время выполнения асинхронных запросов, в значении responseText всегда находится текущее содержимое, полученное от сервера, даже если запрос еще не завершен, и данные от сервера не получены полностью.

+ +

Понять, что ответ получен полностью, можно когда значение {{domxref("XMLHttpRequest.readyState", "readyState")}} становится {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (4), а значение {{domxref("XMLHttpRequest.status", "status")}} становится 200 ("OK").

+ +

Исключения

+ +
+
InvalidStateError
+
Возникает, когда значению {{domxref("XMLHttpRequest.responseType")}} не присвоена либо пустая строка, либо "text". Поскольку свойство responseText предназначено только для текстового содержимого, любое другое значение вызовет ошибку.
+
+ +

Пример

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+// responseType должно быть пустой строкой, либо "text"
+xhr.responseType = 'text';
+
+xhr.onload = function () {
+    if (xhr.readyState === xhr.DONE) {
+        if (xhr.status === 200) {
+            console.log(xhr.response);
+            console.log(xhr.responseText);
+        }
+    }
+};
+
+xhr.send(null);
+ +

Спецификации

+ +

 

+ + + + + + + + + + + + + + + + +
Спецификация СтатусComment
{{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Браузерная совместимость

+ + + +

{{Compat("api.XMLHttpRequest.responseText")}}

diff --git a/files/ru/web/api/xmlhttprequest/responsetype/index.html b/files/ru/web/api/xmlhttprequest/responsetype/index.html new file mode 100644 index 0000000000..91e38522bf --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/responsetype/index.html @@ -0,0 +1,137 @@ +--- +title: XMLHttpRequest.responseType +slug: Web/API/XMLHttpRequest/responseType +translation_of: Web/API/XMLHttpRequest/responseType +--- +

{{APIRef('XMLHttpRequest')}}

+ +

XMLHttpRequest.responseType Свойство является перечислимым значением, которое возвращает тип ответа. Он также позволяет автору изменять тип ответа. Если значение не задано, будет использовано значение по умолчанию text. Установка значения responseType в «document» игнорируется, если выполняется в  рабочей среде. При настройке responseType на определенное значение автор должен убедиться, что сервер действительно отправляет ответ, совместимый с этим форматом. Если сервер возвращает данные, которые не совместимы с установленным responseType, значение response будет null. Кроме того, установка responseType для синхронных запросов вызовет исключение InvalidAccessError.

+ +

Поддерживаемые значения responseType:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueData type of response property
""{{domxref("DOMString")}} (this is the default value)
"arraybuffer"{{domxref("ArrayBuffer")}}
"blob"{{domxref("Blob")}}
"document"{{domxref("Document")}}
"json"JSON
"text"{{domxref("DOMString")}}
"moz-chunked-arraybuffer" {{non-standard_inline}} +

Похоже на "arraybuffer", но потоковое. Это означает, что значение в response доступно только при отправке "progress" события и содержит только данные, полученные с момента последнего "progress" события.

+ +

При response обращении во время события "progress" он содержит строку с данными. В противном случае он возвращается null.

+ +

Этот режим работает только в Firefox.. {{gecko_minversion_inline("9.0")}}

+
"ms-stream"{{non-standard_inline}}Указывает, что ответ является частью потоковой загрузки. Он поддерживается только для запросов на загрузку. Этот режим доступен только в Internet Explorer.
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-responsetype-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support31{{CompatVersionUnknown}}12[1]10187.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support +

4.0.3 [2]
+ 4.4

+ 		55{{CompatVersionUnknown}}50[1]10{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Проприетарный moz-blob и moz-chunked-text значения полностью удалены в Firefox 58.

+ +

[2] Поддерживается только text и arraybuffer.

diff --git a/files/ru/web/api/xmlhttprequest/responseurl/index.html b/files/ru/web/api/xmlhttprequest/responseurl/index.html new file mode 100644 index 0000000000..ed61b3451b --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/responseurl/index.html @@ -0,0 +1,42 @@ +--- +title: XMLHttpRequest.responseURL +slug: Web/API/XMLHttpRequest/responseURL +translation_of: Web/API/XMLHttpRequest/responseURL +--- +
{{APIRef('XMLHttpRequest')}}
+ +

Свойство XMLHttpRequest.responseURL доступно только для чтения, возвращает сериализованный URL ответа или пустую строку,  если URL равен null. Если URL возвращен, любой URL фрагмент в URL будет стерт. Значение responseURL станет окончательным URL, получаемым после любых редиректов.

+ +

Пример

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://example.com/test', true);
+xhr.onload = function () {
+  console.log(xhr.responseURL); // http://example.com/test
+};
+xhr.send(null);
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest', '#the-responseurl-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Браузерная совместимость

+ + + +

{{Compat("api.XMLHttpRequest.responseURL")}}

diff --git a/files/ru/web/api/xmlhttprequest/responsexml/index.html b/files/ru/web/api/xmlhttprequest/responsexml/index.html new file mode 100644 index 0000000000..950d731c0d --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/responsexml/index.html @@ -0,0 +1,142 @@ +--- +title: XMLHttpRequest.responseXML +slug: Web/API/XMLHttpRequest/responseXML +tags: + - AJAX + - API + - XMLHttpRequest + - Отправка + - Свойство + - Справка + - Только для чтения + - загрузка +translation_of: Web/API/XMLHttpRequest/responseXML +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Свойство XMLHttpRequest.responseXML это доступное только для чтения значение, которое содержит {{domxref("Document")}} содержащий HTML или XML полученный запросом, или null в случае, если запрос не был успешен, ещё не был отправлен или полученные данные не могут быть корректно обработаны как XML или HTML. Ответ обрабатывается так, как если бы это был "text/xml". В случае, если {{domxref("XMLHttpRequest.responseType", "responseType")}} установлен как "document" и запрос был осуществлён асинхронно, ответ обрабатывается как "text/html". responseXML содержит null для любых других типов данных так же, как и для data: URLs.

+ +
+

Название responseXML это наследие истории этого свойства, на самом деле оно работает как для HTML, так и для XML.

+
+ +

Если сервер не определяет заголовок {{HTTPHeader("Content-Type")}} как "text/xml" или "application/xml", вы в любом случае можете использовать {{domxref("XMLHttpRequest.overrideMimeType()")}} чтобы заставить XMLHttpRequest обрабатывать ответ как XML.

+ +

Синтаксис

+ +
var data = XMLHttpRequest.responseXML;
+
+ +

Значение

+ +

{{domxref("Document")}} содержащий древовидный результат обработки XML или HTML, полученных с использованием {{domxref("XMLHttpRequest")}}, или null, если данные не были получены или содержат другой тип данных.

+ +

Исключения

+ +
+
InvalidStateError
+
{{domxref("XMLHttpRequest.responseType", "responseType")}} не является "document" или пустой строкой (каждый из которых указывает, что принятые данные это XML или HTML).
+
+ +

Пример

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+// Значение responseType, если указано, должно быть пустой строкой или "document"
+xhr.responseType = 'document';
+
+// overrideMimeType() может быть использован, чтобы заставить ответ обрабатываться как XML
+xhr.overrideMimeType('text/xml');
+
+xhr.onload = function () {
+  if (xhr.readyState === xhr.DONE) {
+    if (xhr.status === 200) {
+      console.log(xhr.response);
+      console.log(xhr.responseXML);
+    }
+  }
+};
+
+xhr.send(null);
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest', '#the-responsexml-attribute')}}{{Spec2('XMLHttpRequest')}}Действующий стандарт WHATWG
+ +

Браузерная совместимость

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)[1]Microsoft EdgeInternet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1]  До Firefox 51, обработка ошибок полученных данных добавляла узел <parsererror> в верх {{domxref("Document")}} и затем возвращала Document в каком бы состоянии он ни оказывался. Это было расхождение со спецификацией. Начиная с Firefox 51 сейчас в этом случае возвращается null, как и указано в спецификации.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/xmlhttprequest/send/index.html b/files/ru/web/api/xmlhttprequest/send/index.html new file mode 100644 index 0000000000..4ad9a4cd9e --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/send/index.html @@ -0,0 +1,291 @@ +--- +title: XMLHttpRequest.send() +slug: Web/API/XMLHttpRequest/send +tags: + - AJAX + - API + - HTTP запрос + - XHR + - XHR запрос + - XMLHttpRequest + - send + - запрос +translation_of: Web/API/XMLHttpRequest/send +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Метод XMLHttpRequest.send() отправляет запрос. Если запрос асинхронный (каким он является по-умолчанию), то возврат из данного метода происходит сразу после отправления запроса. Если запрос синхронный, то метод возвращает управление только после получения ответа. Метод send() принимает необязательные аргументы в тело запросов. Если метод запроса GET или HEAD, то аргументы игнорируются и тело запроса устанавливается в null.

+ +

Если заголовок {{HTTPHeader("Accept")}} не был задан с помощью {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, будет отправлено значение Accept по-умолчанию */*.

+ +

Синтаксис

+ +
XMLHttpRequest.send(body)
+
+ +

Параметры

+ +
+
+

body {{optional_inline}}

+
+
+

Данные из параметра body оправляются в запросе через XHR. Это могут быть:

+ +
    +
  • {{domxref("Document")}}, и в этом случае данные будут сериализованы перед отправкой.
    • +
  • BodyInit, которые, согласно спецификации Fetch могут быть: {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("ReadableStream")}}, или объектом {{domxref("USVString")}}.
    • +
+
+
+ +

Лучший способ передать двоичные данные (например при загрузке файлов) - это использование ArrayBufferView или Blobs в сочетании с методомsend().

+ +

Если никакого значения не определено в качестве body, то будет использовано значение по-умолчанию: null.

+ +

Возвращаемое значение

+ + + +

undefined.

+ +

Исключения

+ + + + + + + + + + + + + + + + + + +
ИсключениеОписание
InvalidStateErrorsend() уже был вызван для запроса, и/или запрос завершен.
NetworkErrorТип запрошенного ресурса - Blob, но метод запроса не GET.
+ + + +

Пример: GET

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.onload = function () {
+  // Запрос завершен. Здесь можно обрабатывать результат.
+};
+
+xhr.send(null);
+// xhr.send('string');
+// xhr.send(new Blob());
+// xhr.send(new Int8Array());
+// xhr.send({ form: 'data' });
+// xhr.send(document);
+
+ +

Пример: POST

+ +
var xhr = new XMLHttpRequest();
+xhr.open("POST", '/server', true);
+
+//Передает правильный заголовок в запросе
+xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+
+xhr.onreadystatechange = function() {//Вызывает функцию при смене состояния.
+    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
+        // Запрос завершен. Здесь можно обрабатывать результат.
+    }
+}
+xhr.send("foo=bar&lorem=ipsum");
+// xhr.send('string');
+// xhr.send(new Blob());
+// xhr.send(new Int8Array());
+// xhr.send({ form: 'data' });
+// xhr.send(document);
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatIe('5')}}[1]
+ {{CompatIe('7')}}		{{CompatVersionUnknown}}{{CompatSafari('1.2')}}
send(ArrayBuffer){{CompatChrome(9)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}{{CompatIe('10')}}{{CompatOpera('11.60')}}{{compatUnknown}}
send(ArrayBufferView){{CompatChrome(22)}}{{CompatUnknown}}{{CompatGeckoDesktop("20.0")}}{{compatUnknown}}{{compatUnknown}}{{compatUnknown}}
send(Blob){{CompatChrome(7)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}}{{CompatIe('10')}}{{CompatOpera('12')}}{{compatUnknown}}
send(FormData){{CompatChrome(6)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}{{CompatIe('10')}}{{CompatOpera('12')}}{{compatUnknown}}
send(URLSearchParams){{CompatChrome(59)}}{{CompatUnknown}}{{CompatGeckoDesktop("44.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
send(ArrayBuffer){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{compatUnknown}}{{CompatUnknown}}
send(ArrayBufferView){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{compatUnknown}}{{CompatUnknown}}
send(Blob){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{compatUnknown}}{{CompatUnknown}}
send(FormData){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{compatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
send(URLSearchParams){{CompatUnknown}}{{CompatChrome(59)}}{{CompatUnknown}}{{CompatGeckoMobile("44.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Возможность реализуется с помощью ActiveXObject(). Начиная с версии 7 Internet Explorer реализует стандарт XMLHttpRequest.

+ + + +

Смотрите также

+ + diff --git a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html new file mode 100644 index 0000000000..9cc9ae0a35 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html @@ -0,0 +1,171 @@ +--- +title: Отправка и получение бинарных данных +slug: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data +translation_of: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data +--- +

Получение бинарных данных используя JavaScript arrays 

+ +

Свойство responseType объекта XMLHttpRequest можно задать для изменения ожидаемого типа ответа с сервера. Возможные значения: пустая строка (по умолчанию), "arraybuffer", "blob", "document", "json" и "text". Свойство response будет содержать тело сущности в соответствии с типом ответа, как ArrayBuffer, Blob, Document, JSON или string. Это значение равно null, если запрос не завершен или не был успешным.

+ +

В этом примере изображение считывается как двоичный файл и создается 8-разрядный массив целых чисел без знака из необработанных байтов. Обратите внимание, что это не будет декодировать изображение и читать пиксели. Для этого вам понадобится библиотека декодирования png.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", "/myfile.png", true);
+oReq.responseType = "arraybuffer";
+
+oReq.onload = function (oEvent) {
+  var arrayBuffer = oReq.response; // Note: not oReq.responseText
+  if (arrayBuffer) {
+    var byteArray = new Uint8Array(arrayBuffer);
+    for (var i = 0; i < byteArray.byteLength; i++) {
+      // do something with each byte in the array
+    }
+  }
+};
+
+oReq.send(null);
+
+ +

Альтернатива вышеуказанному методу использует интерфейс {{domxref("Blob")}} для непосредственного построения Blob с данными arraybuffer.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", "/myfile.png", true);
+oReq.responseType = "arraybuffer";
+
+oReq.onload = function(oEvent) {
+  var blob = new Blob([oReq.response], {type: "image/png"});
+  // ...
+};
+
+oReq.send();
+
+ +

Также вы можете прочитать двоичный файл как {{domxref ("Blob")}}, установив строку" blob " в свойство responseType.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", "/myfile.png", true);
+oReq.responseType = "blob";
+
+oReq.onload = function(oEvent) {
+  var blob = oReq.response;
+  // ...
+};
+
+oReq.send();
+ +

Получение бинарных данных в старых браузерах

+ +

Функция load_binary_resource(), показанная ниже, загружает двоичные данные из указанного URL, возвращая их вызывающему объекту.

+ +
function load_binary_resource(url) {
+  var req = new XMLHttpRequest();
+  req.open('GET', url, false);
+  //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
+  req.overrideMimeType('text\/plain; charset=x-user-defined');
+  req.send(null);
+  if (req.status != 200) return '';
+  return req.responseText;
+}
+
+ +

Магия происходит в строке 5, которая переопределяет тип MIME, заставляя браузер рассматривать его как обычный текст, используя пользовательский набор символов. Это говорит браузеру не анализировать его и пропускать байты через необработанные.

+ +
var filestream = load_binary_resource(url);
+var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)
+
+ +

The example above fetches the byte at offset x within the loaded binary data. The valid range for x is from 0 to filestream.length-1.

+ +

See downloading binary streams with XMLHttpRequest for a detailed explanation. See also downloading files.

+ +

Получение бинарных данных из различных источников

+ +

Библиотека jBinary для работы с бинарными данными в JavaScript позволяет загрузить данные из любого источника, автоматически определяя лучший способ для этого в текущем броузере или Node.js:

+ +
jBinary.load(url).then(function (binary) {
+  // здесь аргумент `binary` может использовться для обработки данных
+  // в любом формате (строка, массив байтов, структура данных и т. д.)
+});
+
+ +

Отправка бинарных данных

+ +

Метод send объекта XMLHttpRequest был расширен, чтобы обеспечить легкую передачу бинарных данных - теперь он принимает объекты ArrayBuffer, {{domxref("Blob")}}, или {{domxref("File")}}.

+ +

В примере ниже на лету создается текстовый файл и отпрвляется методом POST на сервер. Здесь используется обычный текст, но нетрудно представить себе пример с бинарным файлом.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("POST", url, true);
+oReq.onload = function (oEvent) {
+  // Uploaded.
+};
+
+var blob = new Blob(['abc123'], {type: 'text/plain'});
+
+oReq.send(blob);
+
+ +

Отправка типизированнх массивов как бинарных данных

+ +

Точно так же можно отправлять типизированные массивы JavaScript.

+ +
var myArray = new ArrayBuffer(512);
+var longInt8View = new Uint8Array(myArray);
+
+for (var i=0; i< longInt8View.length; i++) {
+  longInt8View[i] = i % 255;
+}
+
+var xhr = new XMLHttpRequest;
+xhr.open("POST", url, false);
+xhr.send(myArray);
+
+ +

Здесь создается и отправляется 512-ти байтовый массив из 8-битных целых чисел, н, разумеется, можно использовать любые двоичные данные.

+ +
Примечание: Поддержка передачи объектов ArrayBuffer с помощью XMLHttpRequest появилась в Gecko 9.0 {{geckoRelease("9.0")}}. Add information about other browsers' support here.
+ +

Отправка форм и загрузка файлов

+ +

См. этот параграф.

+ +

Примеры для Firefox

+ +

В этом примере двоичные данные передаются асинхронно методом POST и нестандартным методом Firefox's sendAsBinary().

+ +
var req = new XMLHttpRequest();
+req.open("POST", url, true);
+// установите заголовок и тип данных
+req.setRequestHeader("Content-Length", 741);
+req.sendAsBinary(aBody);
+
+ +

В строке 4 заголовок Content-Length устанавливается в 741, что означает, что размер данных 741 байт. Разумеется, это значение должно соотвествовать реальному размеру данных.

+ +

В строке 5 метод sendAsBinary() начинает запрос.

+ +
Примечание: Нестандартный метод sendAsBinary начиная с Gecko 31 {{ geckoRelease(31) }} считается устаревшим и скоро будет удален. Вместо него, как показывалось выше, можно использовать стандартный метод send(Blob data).
+ +

Кроме того, чтобы отправить бинарные данные можно передать экземплят {{interface("nsIFileInputStream")}} в метод send(). В этом случае заголовок Content-Length заполнять явно необязательно, поскольку информация получается из потока автоматически:

+ +
// Создание потока из файла.
+var stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
+                       .createInstance(Components.interfaces.nsIFileInputStream);
+stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsIFile instance
+
+// Попытка опредедения типа MIME для файла
+var mimeType = "text\/plain";
+try {
+  var mimeService = Components.classes["@mozilla.org/mime;1"]
+          .getService(Components.interfaces.nsIMIMEService);
+  mimeType = mimeService.getTypeFromFile(file); // file is an nsIFile instance
+}
+catch (oEvent) { /* в случае ошибки просто использовать text/plain */ }
+
+// Отправка
+var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
+                    .createInstance(Components.interfaces.nsIXMLHttpRequest);
+req.open('PUT', url, false); /* синхронный вызов! */
+req.setRequestHeader('Content-Type', mimeType);
+req.send(stream);
+
diff --git a/files/ru/web/api/xmlhttprequest/setrequestheader/index.html b/files/ru/web/api/xmlhttprequest/setrequestheader/index.html new file mode 100644 index 0000000000..24951fda1c --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/setrequestheader/index.html @@ -0,0 +1,110 @@ +--- +title: XMLHttpRequest.setRequestHeader() +slug: Web/API/XMLHttpRequest/setRequestHeader +translation_of: Web/API/XMLHttpRequest/setRequestHeader +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Метод XMLHttpRequest.setRequestHeader() устанавливает значения HTTP заголовков. Метод setRequestHeader()  следует вызывать только после  open(), но до send(). Если метод вызывается несколько раз подряд, значения присоединяется к одному и тому же заголовку.

+ +

Если заголовок {{HTTPHeader("Accept")}} не был установлен, то он будет передан в запросе со значением */* когда будет вызван метод {{domxref("XMLHttpRequest.send", "send()")}}.

+ +

В целях безопасности, некоторые заголовки не могут быть установлены программно. Для более подробной информации, смотрите {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  и {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.

+ +
+

Для ваших собственных полей, вы можете увидеть исключение "not allowed by Access-Control-Allow-Headers in preflight response", когда вы делаете кросс-доменный запрос. В этом случае, вам нужно установить заголовок "Access-Control-Allow-Headers" в ответе на стороне сервера.

+
+ +

Синтаксис

+ +
XMLHttpRequest.setRequestHeader(header, value)
+
+ +

Параметры

+ +
+
header
+
Имя устанавливаемого заголовка
+
value
+
Значение, которое будет установлено как тело заголовка
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest', '#the-setRequestHeader()-method', 'setRequestHeader()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Совместимость браузеров

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatIe('5')}}[1]
+ {{CompatIe('7')}}		{{CompatVersionUnknown}}{{CompatSafari('1.2')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Эта особенность была реализована через ActiveXObject(). Internet Explorer реализует стандарт XMLHttpRequest начиная с версии 7.

+ +

Смотрите также

+ +

Использование XMLHttpRequest

diff --git a/files/ru/web/api/xmlhttprequest/status/index.html b/files/ru/web/api/xmlhttprequest/status/index.html new file mode 100644 index 0000000000..be8763b829 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/status/index.html @@ -0,0 +1,77 @@ +--- +title: XMLHttpRequest.status +slug: Web/API/XMLHttpRequest/status +tags: + - API + - Error + - Property + - Reference + - XMLHttpRequest + - XMLHttpRequest Status + - result + - status +translation_of: Web/API/XMLHttpRequest/status +--- +
{{APIRef('XMLHttpRequest')}}
+ +

Доступное только для чтения свойство XMLHttpRequest.status, возвращает числовой код состояния HTTP ответа XMLHttpRequest.

+ +

До завершения запроса значение status равно 0. Браузеры также сообщают о состоянии 0 в случае ошибок XMLHttpRequest.

+ +

Пример

+ +
var xhr = new XMLHttpRequest;
+console.log('UNSENT: ', xhr.status);
+
+xhr.open('GET', '/server');
+console.log('OPENED: ', xhr.status);
+
+xhr.onprogress = function () {
+  console.log('LOADING: ', xhr.status);
+};
+
+xhr.onload = function () {
+  console.log('DONE: ', xhr.status);
+};
+
+xhr.send();
+
+/**
+ * Outputs the following:
+ *
+ * UNSENT: 0
+ * OPENED: 0
+ * LOADING: 200
+ * DONE: 200
+ */
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-status-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG живой стандарт
+ +

Совместимость браузера

+ + + +

{{Compat("api.XMLHttpRequest.status")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/xmlhttprequest/statustext/index.html b/files/ru/web/api/xmlhttprequest/statustext/index.html new file mode 100644 index 0000000000..9db0ccb806 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/statustext/index.html @@ -0,0 +1,78 @@ +--- +title: XMLHttpRequest.statusText +slug: Web/API/XMLHttpRequest/statusText +tags: + - AJAX + - API + - Property + - Read-only + - Reference + - XMLHttpRequest + - XMLHttpRequest Status +translation_of: Web/API/XMLHttpRequest/statusText +--- +
{{APIRef('XMLHttpRequest')}}
+ +
+

Свойство XMLHttpRequest.statusText, доступное только для чтения, возвращает строку DOMString, содержащую сообщение о состоянии ответа, возвращаемое HTTP-сервером. В отличие от XMLHTTPRequest.status, который указывает числовой код состояния, это свойство содержит текст состояния ответа, например «OK» или «Not Found». Если запрос readyState находится в состоянии UNSENT или OPENED, значением statusText будет пустая строка.

+ +

Если в ответе сервера явно не указан текст состояния, для statusText будет принято значение по умолчанию «ОК».

+
+ +

Пример

+ +
var xhr = new XMLHttpRequest();
+console.log('0 UNSENT', xhr.statusText);
+
+xhr.open('GET', '/server', true);
+console.log('1 OPENED', xhr.statusText);
+
+xhr.onprogress = function () {
+  console.log('3 LOADING', xhr.statusText);
+};
+
+xhr.onload = function () {
+  console.log('4 DONE', xhr.statusText);
+};
+
+xhr.send(null);
+
+/**
+ * Outputs the following:
+ *
+ * 0 UNSENT
+ * 1 OPENED
+ * 3 LOADING OK
+ * 4 DONE OK
+ */
+
+ +

Спецификации

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-statustext-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG живой стандарт
+ +

Совместимость браузера

+ + + +

{{Compat("api.XMLHttpRequest.statusText")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/ru/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html new file mode 100644 index 0000000000..ad5e6f8c2c --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html @@ -0,0 +1,234 @@ +--- +title: Синхронные и асинхронные запросы +slug: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests +translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests +--- +

 

+ +

XMLHttpRequest поддерживает как синхронные, так и асинхронные запросы. В основном предпочтительно использовать асинхронные запросы вместо синхронных из-за соображений производительности.

+ +

Синхронный запрос приводит к выполнению кода, который "блокирует" взаимодействие с вкладкой браузера до тех пор, пока запрос не будет полность выполнен, что существенно ухудшает отклик страницы.

+ +

Асинхронные запросы

+ +

Если вы используете асинхронный режим XMLHttpRequest, то после того, как данные будут получены, будет вызвана функция обработчик. Это позволяет браузеру работать нормально пока ваш запрос будет обрабатываться.

+ +

Пример:  отправка запроса и получение файла ответа

+ +

Приведём простейший пример асинхронного запроса XMLHttpRequest.

+ +
var xhr = new XMLHttpRequest();
+xhr.open("GET", "/bar/foo.txt", true);
+xhr.onload = function (e) {
+  if (xhr.readyState === 4) {
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error(xhr.statusText);
+    }
+  }
+};
+xhr.onerror = function (e) {
+  console.error(xhr.statusText);
+};
+xhr.send(null);
+ +

2 строка. 3 параметр метода open установлен как true  для того, чтобы явно указать, что этот запрос будет обрабатываться асинхронно.

+ +

3 строка. Создаётся функция обработчик события onload. Этот обработчик следить за параметром readyState, для того, чтобы определить завершена ли передача данных и если это так и HTTP статус 200, то полученные данные выводятся в консоль. А если в результате передачи данных возникла ошибка, то сообщение об ошибки будет выведено в консоль.

+ +

15 строка. Происходит инициализация отправки запроса. Функция обработчик будет вызываться каждый раз, как будет происходить изменения состояния данного запроса.

+ +

Пример: создание стандартной функции для чтения внешних файлов

+ +

В разных сценариях существует необходимость принимать внешние файлы (ответ от сервера, к примеру, json файл). Это стандартная функция, которая использует
+ XMLHttpRequest объект асинхронно, чтобы передать прочитанный контент в специальную функцию обработчик.

+ +
function xhrSuccess() {
+    this.callback.apply(this, this.arguments);
+}
+
+function xhrError() {
+    console.error(this.statusText);
+}
+
+function loadFile(url, callback /*, opt_arg1, opt_arg2, ... */) {
+    var xhr = new XMLHttpRequest();
+    xhr.callback = callback;
+    xhr.arguments = Array.prototype.slice.call(arguments, 2);
+    xhr.onload = xhrSuccess;
+    xhr.onerror = xhrError;
+    xhr.open("GET", url, true);
+    xhr.send(null);
+}
+
+ +

Использование:

+ +
function showMessage(message) {
+    console.log(message + this.responseText);
+}
+
+loadFile("message.txt", showMessage, "New message!\n\n");
+
+ +

Сигнатура вспомогательной функции LoadFile следующая: 1 аргумент - URL адрес для запроса (через HTTP GET), 2 аргумент - функция, которая будет вызвана после успешного выполнения ajax запроса и 3 аргумент - список аргументов, которые будут передаваться через XHR объект в функцию, которая была указана во 2 аргументе.

+ +

Строка 1 определяет функцию, которая будет вызвана, когда ajax запрос завершиться успешно. В свою очередь это вызовет функции callback, которая была указана в вызове функции loadFile (то есть функция showMessage) которая была обозначена как свойство XHR объекта (строка 11). Дополнительные аргументы, которые были указаны при вызове функции loadFile, подставляются в вызов callback функции.

+ +

Строка 5 определяет функцию, которая будет вызвана в случаи, если ajax запрос не сможет завершиться успешно.

+ +

Строка 11 сохраняет в XHR объекте функцию, которая будет вызвана после успешного завершения ajax запроса. (эта функция передаётся 2 аргументов в вызове функции loadFile).

+ +

12 строка срезает псевдомассив аргументов, который был передан при вызове функции loadFile. Начиная с 3 аргумента все аргументы будут хранится в массиве arguments объекта xhr, который передаётся в функцию xhrSuccess и в конечном итоге будут использованы при вызове функции showMessage, которая будет вызвана функцией xhrSuccess .

+ +

Строка 15 устанавливает true для 3 параметра, что явно указывает на то, что запрос будет выполняться асинхронно.

+ +

Строка 16 инициализирует запрос.

+ +

Пример: использование timeout

+ +

При использовании асинхронных запросов, можно установить максимальное время ожидания ответа от сервера. Это делается путём установки значения свойства timeout XMLHttpRequest объекта, как показано ниже:

+ +
function loadFile(url, timeout, callback) {
+    var args = Array.prototype.slice.call(arguments, 3);
+    var xhr = new XMLHttpRequest();
+    xhr.ontimeout = function () {
+        console.error("The request for " + url + " timed out.");
+    };
+    xhr.onload = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                callback.apply(xhr, args);
+            } else {
+                console.error(xhr.statusText);
+            }
+        }
+    };
+    xhr.open("GET", url, true);
+    xhr.timeout = timeout;
+    xhr.send(null);
+}
+ +

Отметим, что в код была добавлена функция обработчик события ontimeout.

+ +

Использование:

+ +
function showMessage (message) {
+    console.log(message + this.responseText);
+}
+
+loadFile("message.txt", 2000, showMessage, "New message!\n");
+
+ +

2 аргумент функции loadFile устанавливает время ожидание равное 2000ms.

+ +
+

Внимание: Поддержка timeout была добавлена начиная с {{Gecko("12.0")}}.

+
+ +

Synchronous request

+ +
Note: Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, Blink 39.0, and Edge 13, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.
+ +

Synchronous XHR often causes hangs on the web. But developers typically don't notice the problem because the hang only manifests during poor network conditions or slow server response. Synchronous XHR is now in deprecation state. Developers are recommended to move away from the API.

+ +

All new XHR features such as timeout or abort aren't allowed for synchronous XHR. Doing so would invoke InvalidAccessError.

+ +

Example: HTTP synchronous request

+ +

This example demonstrates how to make a simple synchronous request.

+ +
var request = new XMLHttpRequest();
+request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
+request.send(null);
+
+if (request.status === 200) {
+  console.log(request.responseText);
+}
+
+ +

Line 3 sends the request. The null parameter indicates that no body content is needed for the GET request.

+ +

Line 5 checks the status code after the transaction is completed. If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.

+ +

Example: Synchronous HTTP request from a Worker

+ +

One of the few cases in which a synchronous request does not usually block execution is the use of XMLHttpRequest within a Worker.

+ +

example.html (the main page):

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+  var worker = new Worker("myTask.js");
+  worker.onmessage = function(event) {
+    alert("Worker said: " + event.data);
+  };
+
+  worker.postMessage("Hello");
+</script>
+</head>
+<body></body>
+</html>
+
+ +

myFile.txt (the target of the synchronous XMLHttpRequest invocation):

+ +
Hello World!!
+
+ +

myTask.js (the Worker):

+ +
self.onmessage = function (event) {
+  if (event.data === "Hello") {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "myFile.txt", false);  // synchronous request
+    xhr.send(null);
+    self.postMessage(xhr.responseText);
+  }
+};
+
+ +
Note: The effect, because of the use of the Worker, is however asynchronous.
+ +

It could be useful in order to interact in the background with the server or to preload some content. See Using web workers for examples and details.

+ +

Adapting Sync XHR usecases to the Beacon API

+ +

There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the window.onunload and window.onbeforeunload events. You should consider using the fetch API with keepalive flag. When fetch with keepalive isn't available, you can consider using the navigator.sendBeacon API can support these use cases typically while delivering a good UX.

+ +

The following example (from the sendBeacon docs) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unloading of the page to be delayed.

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    var client = new XMLHttpRequest();
+    client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
+    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+    client.send(analyticsData);
+}
+
+ +

Using the sendBeacon() method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, without delaying the unload or affecting the performance of the next navigation.

+ +

The following example shows a theoretical analytics code pattern that submits data to a server by using the sendBeacon() method.

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+
+ +

See also

+ + diff --git a/files/ru/web/api/xmlhttprequest/timeout/index.html b/files/ru/web/api/xmlhttprequest/timeout/index.html new file mode 100644 index 0000000000..47631f9455 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/timeout/index.html @@ -0,0 +1,56 @@ +--- +title: XMLHttpRequest.timeout +slug: Web/API/XMLHttpRequest/timeout +tags: + - AJAX + - XMLHttpRequest + - Свойство + - Ссылка +translation_of: Web/API/XMLHttpRequest/timeout +--- +
{{APIRef('XMLHttpRequest')}}
+ +

Свойство XMLHttpRequest.timeout определяет количество миллисекунд, которое запрос будет выполняться, до того, как будет автоматически прерван. Имеет размер unsigned long. Значение по умолчанию - 0, определяет, что таймаута нет. Таймаут не должен быть использован в синхронных запросах XMLHttpRequests  в {{Glossary('среде документа')}}, или будет вызвано исключение InvalidAccessError. Когда случается таймаут - вызывается событие timeout. {{gecko_minversion_inline("12.0")}}

+ +
+
+
Примечание: Вы не можете использовать таймаут для синхронных запросов с окном - владельцем.
+
+
Использование таймаута с асинхронными запросами
+
+ +

В  Internet Explorer, свойство timeout может быть установлено только после вызова метода open() и до вызова метода send().

+ +

Пример

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.timeout = 2000; // time in milliseconds
+
+xhr.onload = function () {
+  // Запрос завершён. Здесь можно выполнить обработку.
+};
+
+xhr.ontimeout = function (e) {
+  // Таймаут. Здесь можно выполнить что-нибудь..
+};
+
+xhr.send(null);
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest', '#the-timeout-attribute')}}{{Spec2('XMLHttpRequest')}}Действующий стандарт WHATWG
diff --git a/files/ru/web/api/xmlhttprequest/upload/index.html b/files/ru/web/api/xmlhttprequest/upload/index.html new file mode 100644 index 0000000000..81006b8810 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/upload/index.html @@ -0,0 +1,116 @@ +--- +title: XMLHttpRequest.upload +slug: Web/API/XMLHttpRequest/upload +translation_of: Web/API/XMLHttpRequest/upload +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Свойство XMLHttpRequest.upload возвращает объект {{domxref("XMLHttpRequestUpload")}}, представляющий процесс загрузки. Это непрозрачный объект, но так как он является {{domxref("XMLHttpRequestEventTarget")}}, к нему можно добавить обработчики событий.

+ +

Обработчики событий, которые можно добавить к объекту загрузки:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОбработчикСобытие
onloadstartНачало запроса
onprogressПроисходит передача данных
onabortЗапрос был отменён
onerrorПри запросе произошла ошибка
onloadЗапрос завершился
ontimeoutЗапрос не завершился ко времени, указанному автором
onloadendЗапрос завершился (успешно или с ошибкой)
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest', '#the-upload-attribute')}}{{Spec2('XMLHttpRequest')}}Живой стандарт WHATWG
+ +

Поддержка браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
СвойствоChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Начальная поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Начальная поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..f06ee51e88 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,743 @@ +--- +title: Использование XMLHttpRequest +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +

Это инструкция по использованию XMLHttpRequest, для взаимодействия через HTTP-протокол.

+ +

Для отправки HTTP-запроса нужно создать XMLHttpRequest-объект, открыть URL и отправить запрос. После выполнения запроса можно получить и обработать тело и статус ответа.

+ +
function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("get", "yourFile.txt", true);
+oReq.send();
+ +

Типы запросов

+ +

Запрос, сделанный посредством XMLHttpRequest, может загружать данные синхронно или асинхронно. Это определяется третьим аргументом метода open()  объекта XMLHttpRequest: если он равен true или не определён, запрос выполнится асихнронно, в противном случае — синхронно. Детальное обсуждение и демонстрации обоих типов запросов могут быть найдены на странице synchronous and asynchronous requests. Использовать синхронные запросы приходится очень редко.

+ +
Примечание: Начиная с Gecko 30.0 {{ geckoRelease("30.0") }} не рекомендуется использовать синхронные запросы, так как они отрицательно влияют на пользовательский опыт.
+ +

Обработка запросов

+ +

Есть несколько типов атрибутов ответа, определённых спецификацией W3C XMLHttpRequest. Они сообщают запрашивающему важную информацию о статусе ответа. В некоторых случаях обработка нетекстовых типов ответа может потребовать дополнительных действий и анализа; эти случаи описаны ниже.

+ +

Анализ и использование свойства responseXML

+ +

Если скачать XML документ с помощью XMLHttpRequest, в свойстве responseXML будет объект DOM, содержащим распарсенный XML документ. Напрямую работать с ним будет сложно. Есть четыре основных способа анализа этого документа:

+ +
    +
  1. Использовать XPath, чтобы указывать на его части.
    2. +
  2. Использовать JSON, чтобы превратить его в дерево объектов JavaScript.
    3. +
  3. Вручную парсить и превращать XML в строки или объекты. 
    4. +
  4. Использовать XMLSerializer, чтобы превращать деревья DOM в строки или файлы.
    5. +
  5. Можно использовать регулярные выражения, если вы заранее знаете содержимое документа. Возможно, стоит удалить переносы строк, если вы используете регулярные выражения с оглядкой на переносы. Однако этот метод стоит использовать только в крайнем случае, ведь если XML изменится, хотя бы чуть-чуть, то регулярное выражение, скорее всего, не справится.
    6. +
+ +

Анализ и использование свойства responseText, содержащего HTML документ

+ +
Примечание: Спецификация W3C XMLHttpRequest позволяет парсить HTML через свойство XMLHttpRequest.responseXML. Подробнее об этом написано в статье HTML в XMLHttpRequest.
+ +

Если получить содержимое HTML страницы с помощью XMLHttpRequest, свойство responseText будет строкой, содержащей "кашу" изо всех HTML тэгов, с которой будет очень сложно работать. Есть три основных способа анализа этой HTML строки:

+ +
    +
  1. Использовать свойство XMLHttpRequest.responseXML.
    2. +
  2. Вставить содержимое в тело фрагмента документа с помощью fragment.body.innerHTML и работать уже с этим фрагментом.
    3. +
  3. Можно использовать регулярные выражения, если вы заранее знаете содержимое документа.
    4. +
+ +

Работа с двоичными данными

+ +

Хотя обычнно XMLHttpRequest используется, чтобы получать и загружать текст, с его помощью можно обмениваться и двоичными данными. Есть несколько проверенных способов заставить XMLHttpRequest посылать двоичные данные. Они используют метод  XMLHttpRequest.overrideMimeType().

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", url, true);
+// получаем необработанные данные в виде двоичной строки
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+
+ +

Спецификация XMLHttpRequest Level 2 добавляет новые атрибуты responseType, значительно облегчающие работу с двоичными данными:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url, true);
+oReq.responseType = "arraybuffer";
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // not responseText
+  /* ... */
+}
+oReq.send();
+
+ +

Больше примеров можно найти на странице Отправка и получение двоичных данных.

+ +

Отслеживание процесса загрузки

+ +

XMLHttpRequest позволяет подписываться на различные события, которые могут произойти в процессе обработки запроса. Сюда входят периодические уведомления о состоянии запроса, сообщения об ошибках и так далее. 

+ +

Отслеживание событий процесса загрузки  следует спецификации Web API progress events: эти события реализуют интерфейс {{domxref("ProgressEvent")}}.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress, false);
+oReq.addEventListener("load", transferComplete, false);
+oReq.addEventListener("error", transferFailed, false);
+oReq.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+// ...
+
+// состояние передачи от сервера к клиенту (загрузка)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // Невозможно вычислить состояние загрузки, так как размер неизвестен
+  }
+}
+
+function transferComplete(evt) {
+  alert("Загрузка завершена.");
+}
+
+function transferFailed(evt) {
+  alert("При загрузке файла произошла ошибка.");
+}
+
+function transferCanceled(evt) {
+  alert("Пользователь отменил загрузку.");
+}
+ +

На строчках 3-6 добавляются обработчики для различных событий, происходящих при передаче данных с помощью XMLHttpRequest.

+ +
Примечение: Обработчики нужно добавлять до того, как вызвать open(). В противном случае события не будут обработаны.
+ +

Обработчик события progress, представленный функцией updateProgress() в этом примере, получает количество байт, которое должно быть передано, и количество уже переданных байт в полях total и loaded. Но если поле lengthComputable равняется false, значит, длина сообщения неизвестна и будет отображаться как ноль.

+ +

События progress есть и у входящих, и у исходящих передач. События входящих передач создаются для объекта XMLHttpRequest, как показано в примере выше; исходящих —для XMLHttpRequest.upload:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress, false);
+oReq.upload.addEventListener("load", transferComplete, false);
+oReq.upload.addEventListener("error", transferFailed, false);
+oReq.upload.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+ +
Примечание: события progress недоступны для протокола file: .
+ +
Примечание: На данный момент в событиях progress есть открытые ошибки, которые влияют на Firefox 25 для OS X и Linux.
+ +
+

Примечание: Начиная с {{Gecko("9.0")}}, можно быть уверенным, что события progress будут приходить для каждого пакета данных, включая последний пакет в случаях, когда он получен, и соединение закрыто прежде, чем будет создано событие progress. В этом случае, событие progress автоматическисоздастся, когда будет получено событие load для этого пакета. Это позволяет следить за процессом загрузки с помощью только событий progress.

+
+ +
+

Примечание: В {{Gecko("12.0")}}, если событие progress вызвано с  responseType "moz-blob", значение ответа будет {{domxref("Blob")}}, содержащим все данные, полученные на текущий момент.

+
+ +

Также возможно засечь все три события, завершающие загрузку (abort, load, or error) через событие loadend:

+ +
req.addEventListener("loadend", loadEnd, false);
+
+function loadEnd(e) {
+  alert("Передача данных завершена (но мы не знаем, успешно ли).");
+}
+
+ +

Заметьте, что событие loadend никак не сообщает, что вызвало конец передачи. Впрочем, это никак не мешает использовать его, если нужно сделать что-то вне зависимости от причины.

+ +

Отправка форм и загрузка файлов

+ +

Есть два способа передать данные форм с помощью экземпляра XMLHttpRequest:

+ + + +

Второй путь — самый простой и быстрый, но данные, полученные с его помощью, нельзя превратить в строки с помощью JSON.stringify. Первый путь, наоборот, самый сложный, но зато самый гибкий и мощный.

+ +

Используя только XMLHttpRequest

+ +

Отправка форм без FormData не требует других API, кроме FileReader для загрузки файлов.

+ +

Краткое введение в методы отправки

+ +

Есть четыре способа послать HTML {{ HTMLElement("form") }}:

+ + + +

Рассмотрим отправку формы с двумя полями, foo и baz. Если использовать метод POST, сервер получит строку, похожую на одну из показанных ниже, в зависимости от типа кодирования, который вы используете:

+ + + +

Instead, if you are using the GET method, a string like the following will be simply added to the URL:

+ +
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
+ +

Небольшой классический фреймворк

+ +

Все данные эффекты достигаются с помощью веб браузера, когда вы отправляете {{ HTMLElement("form") }}. Но если вам требуется выполнить все операции с помощью лишь JavaScript, то вам придется проинструктировать интерпретатор обо всех выполняемых операциях. Для, того чтобы отправлять формы с помощью чистого AJAX, потребуется слишком комплексное описание, чтобы тут рассуждать о нем во всех подробностях. В связи с этим, мы опубликовали здесь полный(но все еще дидактический) фреймворк, который все же способен использовать все четыре способа отправки и, так же поддерживает файловую загрузку.

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with pure AJAX &ndash; MDN</title>
+<script type="text/javascript">
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    alert(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* alert(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status > 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" && oField.files.length > 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile < oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
+          for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+</script>
+</head>
+<body>
+
+<h1>Sending forms with pure AJAX</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      Your name: <input type="text" name="user" />
+    </p>
+    <p>
+      Your message:<br />
+      <textarea name="message" cols="40" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +

Для того, чтобы произвести его тест, создайте страницу с названием register.php (и укажите атрибут action одной из данных форм) и добавьте данный минимальный контент

+ +
<?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+
+ +

Синтаксис данного скрипта представлен ниже:

+ +
AJAXSubmit(myForm);
+ +
Заметка: Данный фреимворк использует FileReader API для передачи загрузочных файлов. Это новыйAPI и его невозможно использовать IE9 и ниже. В связи с этим, загрузки только с использованием AJAX воспринимаются, лишь как экспериментальные. Если вам не требуется загружать бинарные файлы, то данный фреимворк работает в большинстве современных браузерах.
+ +
Note: The best way to send binary content is via ArrayBuffers or Blobs in conjuncton with the send() method and possibly the readAsArrayBuffer() method of the FileReader API. But, since the aim of this script is to work with a stringifiable raw data, we used the sendAsBinary() method in conjunction with the readAsBinaryString() method of the FileReader API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the FormData API.
+ +
Note: The non-standard sendAsBinary method is considered deprecated as of Gecko 31 {{ geckoRelease(31) }} and will be removed soon. The standard send(Blob data) method can be used instead.
+ +

Используя объекты FormData

+ +

The FormData constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the Using FormData Objects page. For didactic purpose only we post here a translation of the previous example transformed so as to make use of the FormData API. Note the brevity of the code:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with FormData &ndash; MDN</title>
+<script type="text/javascript">
+"use strict";
+
+function ajaxSuccess () {
+  alert(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action, true);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
+    oReq.send(null);
+  }
+}
+</script>
+</head>
+<body>
+
+<h1>Sending forms with FormData</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<p>The text/plain encoding is not supported by the FormData API.</p>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +
Note: As we said, {{domxref("FormData")}} objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file {{ HTMLElement("input") }} fields, when you submit a form through the FormData API you do not need to use the FileReader API also: files are automatically loaded and uploaded.
+ +

Получить дату последнего изменения

+ +
function getHeaderTime () {
+  alert(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html", true);
+oReq.onload = getHeaderTime;
+oReq.send();
+ +

Do something when last modified date changes

+ +

Let's create these two functions:

+ +
function getHeaderTime () {
+
+  var
+    nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
+    nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
+  }
+
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL, true);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}
+ +

Test:

+ +
/* Let's test the file "yourpage.html"... */
+
+ifHasChanged("yourpage.html", function (nModif, nVisit) {
+  alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
+});
+ +

If you want to know whether the current page has changed, please read the article about document.lastModified.

+ +

Межсайтовые XMLHttpRequest

+ +

Современные браузеры поддерживают межсайтовые запросы по стандарту Access Control for Cross-Site Requests. Для этого, серверу необходимо дополнительно указывать заголовок origin. В противном случае, выбрасывается исключение INVALID_ACCESS_ERR.

+ +

Обход кеширования

+ +

Для кросс-браузерного обхода кеширования в конец URL-запроса достаточно добавить случайную строку в GET-параметры, то есть сразу после «?», например:

+ +
http://foo.com/bar.html -> http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
+
+ +

Таким образом, каждый новый запрос будет происходить по новому URL и кеширование страницы не будет производиться.

+ +

Автоматизировать этот подход можно следующим сниппетом:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true);
+oReq.send(null);
+ +

Безопасность

+ +

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy.<policyname>.XMLHttpRequest.open</policyname> to allAccess to give specific sites cross-site access.  This is no longer supported.")}}

+ +

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

+ +

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

+ +

XMLHttpRequests being stopped

+ +

If you end up with an XMLHttpRequest having status=0 and statusText=null, it means that the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then open(). This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie open()) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.

+ +

Using XMLHttpRequest from JavaScript modules / XPCOM components

+ +

Instantiating XMLHttpRequest from a JavaScript module or an XPCOM component works a little differently; it can't be instantiated using the XMLHttpRequest() constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.

+ +
const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
+
+ +

Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason.  If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.

+ +
const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+                                     .getService(Components.interfaces.nsIAppShellService)
+                                     .hiddenDOMWindow;
+var oReq = new XMLHttpRequest();
+ +

Дополнительные ссылки

+ +
    +
  1. MDN AJAX introduction
    2. +
  2. HTTP access control
    3. +
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. +
  4. XMLHttpRequest - REST and the Rich User Experience
    5. +
  5. Microsoft documentation
    6. +
  6. Apple developers' reference
    7. +
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. +
  8. The XMLHttpRequest Object: W3C Specification
    9. +
  9. Web Progress Events specification
    10. +
diff --git a/files/ru/web/api/xmlhttprequest/withcredentials/index.html b/files/ru/web/api/xmlhttprequest/withcredentials/index.html new file mode 100644 index 0000000000..805108a15f --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/withcredentials/index.html @@ -0,0 +1,104 @@ +--- +title: XMLHttpRequest.withCredentials +slug: Web/API/XMLHttpRequest/withCredentials +tags: + - AJAX + - API + - XMLHttpRequest + - Свойство + - Справка +translation_of: Web/API/XMLHttpRequest/withCredentials +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Свойство XMLHttpRequest.withCredentials это {{jsxref("Boolean")}} который определяет, должны ли создаваться кросс-доменные Access-Control запросы с использованием таких идентификационных данных как cookie, авторизационные заголовки или TLS сертификаты. Настройка withCredentials бесполезна при запросах на тот же домен.

+ +

Вдобавок, этот флаг также используется для определения, будут ли проигнорированы куки переданные в ответе. Значение по умолчанию - false. XMLHttpRequest с другого домена не может установить cookie на свой собственный домен в случае, если перед созданием этого запроса флаг withCredentials не установлен в true. Сторонние cookies, полученные с помощью установки withCredentials в true, всё равно будут соблюдать политику одинакового домена и, следовательно, не могут быть получены запрашивающим скриптом через document.cookie или из заголовков ответа.

+ +
+

Примечание: Это свойство не влияет на запросы, отправленные на тот же домен.

+
+ +
+

Примечание: Ответы с другого домена не могут установить куки для своего собственного домена в случае, если перед созданием запроса флаг withCredentials не установлен в true, несмотря на значение заголовков Access-Control-.

+
+ +

Пример

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://example.com/', true);
+xhr.withCredentials = true;
+xhr.send(null);
+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}}{{Spec2('XMLHttpRequest')}}Действующий стандарт WHATWG
+ +

Браузерная совместимость

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базовая поддержка{{CompatChrome(3)}}{{CompatGeckoDesktop("1.9.1")}}[2]{{CompatIe(10)}}[1]{{CompatOpera(12)}}{{CompatSafari("4")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer версий 8 и 9 поддерживает кросс-доменные запросы (CORS) используя XDomainRequest.

+ +

[2] Начиная с Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8), Gecko больше не позволяет использовать аттрибут withCredentials при проведении синхронных запросов. Попытки это сделать выбросят исключение NS_ERROR_DOM_INVALID_ACCESS_ERR.

diff --git a/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html new file mode 100644 index 0000000000..53fb283a75 --- /dev/null +++ b/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html @@ -0,0 +1,58 @@ +--- +title: XMLHttpRequest() +slug: Web/API/XMLHttpRequest/XMLHttpRequest +tags: + - API + - Reference + - XHR + - XMLHttpRequest + - Конструктор + - Получение данных + - Чтение данных +translation_of: Web/API/XMLHttpRequest/XMLHttpRequest +--- +

XMLHttpRequest

+ +

Конструктор XMLHttpRequest() создаёт новый объект {{domxref("XMLHttpRequest")}}.

+ +

Для получения подробной информации о том, как использовать XMLHttpRequest, см. Использование XMLHttpRequest.

+ +

Синтаксис

+ +
const request = new XMLHttpRequest();
+
+ +

Параметры

+ +

Нет.

+ +

Возвращаемое значение

+ +

Новый объект {{domxref("XMLHttpRequest")}}. Этот объект должен быть подготовлен вызовом функции {{domxref("XMLHttpRequest.open", "open()")}} перед вызовом {{domxref("XMLHttpRequest.send", "send()")}} для отправки запроса на сервер.

+ +

Нестандартный синтаксис Firefox 

+ +

В Firefox 16 в конструктор добавлен нестандартный параметр, который позволяет включать анонимный режим (см. {{Bug("692677")}}). Установка флага mozAnon в значение true по сути напоминает конструктор AnonXMLHttpRequest(), описанный в более старых версиях спецификации XMLHttpRequest.

+ +
const request = new XMLHttpRequest(paramsDictionary);
+ +

Параметры (нестандартные)

+ +
+
objParameters 
+
Существует два флага, которые можно установить: +
+
mozAnon
+
Boolean: Установка этого флага в значение true приведет к тому, что браузер не будет раскрывать {{Glossary("origin")}} и учётные данные пользователя при получении ресурсов. Главным образом это означает, что файлы {{Glossary("Cookie", "cookies")}} не будут отправлены, если они не добавлены явно с использованием setRequestHeader.
+
mozSystem
+
Boolean: Установка этого флага в значение true позволяет устанавливать межсайтовые соединения не требуя подключения сервера с помощью {{Glossary("CORS")}}. Требует установки флага mozAnon: true, т.к. это нельзя сочетать с отправкой файлов cookie или других учетных данных пользователя. Это работает только в привилегированных (проверенных) приложениях ({{Bug ("692677")}}));  не работает на произвольных веб-страницах, загруженных в Firefox.
+
+
+
+ +

См. также

+ + -- cgit v1.2.3-54-g00ecf