diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/api/xmlhttprequest | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/ru/web/api/xmlhttprequest')
22 files changed, 3716 insertions, 0 deletions
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 +--- +<p>{{APIRef('XMLHttpRequest')}}</p> + +<p>Метод <strong>XMLHttpRequest.abort()</strong> прерывает уже отправленный запрос. Когда запрос прерывается, то его свойство {{domxref("XMLHttpRequest.readyState", "readyState")}} устанавливается в <code>UNSENT</code> (0), а {{domxref("XMLHttpRequest.status", "status")}} в 0.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">XMLHttpRequest.abort()</pre> + +<h3 id="Параметры">Параметры</h3> + +<p>Нет.</p> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p><code>undefined</code></p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">var xhr = new XMLHttpRequest(), + method = "GET", + url = "https://developer.mozilla.org/"; +xhr.open(method, url, true); + +xhr.send(); + +xhr.abort(); +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-abort()-method')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Действующий стандарт WHATWG</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + + + +<p>{{Compat("api.XMLHttpRequest.abort")}}</p> + +<h2 id="Cм._также">Cм. также</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></li> +</ul> 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 +--- +<p>{{draft}}{{APIRef('XMLHttpRequest')}}</p> + +<p>Метод <strong>XMLHttpRequest.getResponseHeader()</strong> возвращает строку, содержащую текст определённого хэдера (header). Если в наличии несколько хэдеров с одинаковыми именами, то они возвращаются в виде одной строки, где значения отделены друг от друга парой "запятая + пробел". Метод <code>getResponseHeader()</code> возвращает значение в кодировке UTF.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre>var myHeader = getResponseHeader(name);</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt>name</dt> + <dd>Строка {{domxref("ByteString")}}, представляющая имя хэдера, значение которого необходимо возвратить в виде текста.</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>Строка {{domxref("ByteString")}}, представляющее текстовое значение хэдера или null, если ответ ещё не был получен или хэдер с именем name отсутствует в ответе.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">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")); + } +}</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#dom-xmlhttprequest-getresponseheader', 'getResponseHeader()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Действующий стандарт WHATWG</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Свойство</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatIe('5')}}<sup>[1]</sup><br> + {{CompatIe('7')}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('1.2')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome для Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Это свойство обеспечивалось посредством ActiveXObject(). Internet Explorer поддерживает стандарт XMLHttpRequest начиная с версии 7.</p> + +<h2 id="См._также">См. также</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></li> +</ul> 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 +--- +<p>{{APIRef("XMLHttpRequest")}}</p> + +<p><code>XMLHttpRequest</code> это API, который предоставляет клиенту функциональность для обмена данными между клиентом и сервером. Данный API предоставляет простой способ получения данных по ссылке без перезагрузки страницы. Это позволяет обновлять только часть веб-страницы не прерывая пользователя. <code>XMLHttpRequest используется в AJAX запросах и особенно в single-page приложениях.</code></p> + +<p>XMLHttpRequest изначально был разработан Microsoft и позже заимствован Mozilla, Apple, и Google. Сейчас он <a href="https://xhr.spec.whatwg.org/">стандартизирован WHATWG</a>. Несмотря на свое название, <code>XMLHttpRequest</code> может быть использован для получения любых типов данных, не только XML, и поддерживает протоколы помимо <a href="https://developer.mozilla.org/ru/docs/Web/HTTP">HTTP</a> (включая <code>file</code> и <a href="https://developer.mozilla.org/ru/docs/Словарь/FTP">ftp</a>).</p> + +<p>Чтобы начать работать с <code>XMLHttpRequest</code>, выполните этот код:</p> + +<pre>var myRequest = new XMLHttpRequest(); +</pre> + +<p>более детальное описание создание объекта, можно увидеть в разделе <a class="internal" href="/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a>.</p> + +<h2 id="Список_методов_объекта">Список методов объекта</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code><a class="internal" href="/en/DOM/XMLHttpRequest#XMLHttpRequest()" title="/en/DOM/XMLHttpRequest#XMLHttpRequest()">XMLHttpRequest</a>(JSObject objParameters);</code></td> + </tr> + <tr> + <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#abort()" title="en/DOM/XMLHttpRequest#abort()">abort</a>();</code></td> + </tr> + <tr> + <td><code>DOMString <a class="internal" href="/en/DOM/XMLHttpRequest#getAllResponseHeaders()" title="en/DOM/XMLHttpRequest#getAllResponseHeaders()">getAllResponseHeaders</a>();</code></td> + </tr> + <tr> + <td><code>DOMString? <a class="internal" href="/en/DOM/XMLHttpRequest#getResponseHeader()" title="en/DOM/XMLHttpRequest#getResponseHeader()">getResponseHeader</a>(DOMString header);</code></td> + </tr> + <tr> + <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#open()" title="en/DOM/XMLHttpRequest#open()">open</a>(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);</code></td> + </tr> + <tr> + <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#overrideMimeType()" title="en/DOM/XMLHttpRequest#overrideMimeType()">overrideMimeType</a>(DOMString mime);</code></td> + </tr> + <tr> + <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>();</code><br> + <s><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(ArrayBuffer data);</code></s><br> + <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(ArrayBufferView data);</code><br> + <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(Blob data);</code><br> + <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(Document data);</code><br> + <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(DOMString? data);</code><br> + <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(FormData data);</code></td> + </tr> + <tr> + <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#setRequestHeader()" title="en/DOM/XMLHttpRequest#setRequestHeader()">setRequestHeader</a>(DOMString header, DOMString value);</code></td> + </tr> + <tr> + <th>Нестандартные методы</th> + </tr> + <tr> + <td><code>[noscript] void <a class="internal" href="/en/DOM/XMLHttpRequest#init()" title="en/DOM/XMLHttpRequest#init()">init</a>(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);</code></td> + </tr> + <tr> + <td><code>[noscript] void <a class="internal" href="/en/DOM/XMLHttpRequest#openRequest()" title="en/DOM/XMLHttpRequest#openRequest()">openRequest</a>(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password); </code></td> + </tr> + <tr> + <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#sendAsBinary()" title="en/DOM/XMLHttpRequest#sendAsBinary()">sendAsBinary</a>(in DOMString body);</code> {{ deprecated_inline(31) }}</td> + </tr> + </tbody> +</table> + +<h2 id="Поля_объекта">Поля объекта</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Attribute</th> + <th>Type</th> + <th>Description</th> + </tr> + <tr id="onreadystatechange"> + <td> + <p><code>onreadystatechange</code></p> + </td> + <td><code>Function?</code></td> + <td> + <p>Callback - функция, которая вызывается всякий раз, когда поле <code>readyState меняет свое значение</code>. Callback выполняется в потоке работы приложения.</p> + + <div class="warning"><strong>Внимание:</strong> Он не должен использоваться в синхронных запросах, и не должен выполняться из нативного кода (? must not be used from native code).</div> + </td> + </tr> + <tr id="readyState"> + <td><code>readyState</code></td> + <td><code>unsigned short</code></td> + <td> + <p>Состояние запроса:</p> + + <table class="standard-table"> + <tbody> + <tr> + <td class="header">Значение</td> + <td class="header">Состояние</td> + <td class="header">Описание</td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>UNSENT</code></td> + <td>Клиент создан. Метод <code>open()</code> еще не вызван.</td> + </tr> + <tr> + <td><code>1</code></td> + <td><code>OPENED</code></td> + <td>Вызван метод open<code>()</code>. В этом состоянии можно добавить заголовки через метод <code>setRequestHeader()</code>; вызов метода <code>send()</code> отправит запрос.</td> + </tr> + <tr> + <td><code>2</code></td> + <td><code>HEADERS_RECEIVED</code></td> + <td>Вызван метод <code>send()</code>, получены заголовки и код ответа (200, 404, 501 и проч).</td> + </tr> + <tr> + <td><code>3</code></td> + <td><code>LOADING</code></td> + <td>Загрузка; если значение <code>responseType</code> равно "text" или пустой строке, то <code>responseText</code> содержит частичные данные.</td> + </tr> + <tr> + <td><code>4</code></td> + <td><code>DONE</code></td> + <td>Операция завершена. Все данные получены.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr id="response"> + <td><code>response</code></td> + <td>varies</td> + <td> + <p>Тело сущности запроса. Соласно полю <code><a href="#responseType">responseType</a></code>, может быть <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>, <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>, {{ domxref("Document") }}, JavaScript объектом (для "json"), или строкой. Равно <code>null</code> если запрос не завершен или окончен с ошибкой.</p> + </td> + </tr> + <tr id="responseText"> + <td><code>responseText</code> {{ReadOnlyInline()}}</td> + <td><code>DOMString</code></td> + <td>Ответ на запрос в виде строки или <code>null</code> в случае если запрос не успешен или ответ еще не получен.</td> + </tr> + <tr id="responseType"> + <td><code>responseType</code></td> + <td><code>XMLHttpRequestResponseType</code></td> + <td> + <p>Может использоваться для определения типа ответа.</p> + + <table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Value</td> + <td class="header">Data type of <code>response</code> property</td> + </tr> + <tr> + <td><code>""</code> (пустая строка)</td> + <td>String (строка, дефолтное значение)</td> + </tr> + <tr> + <td><code>"arraybuffer"</code></td> + <td><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td> + </tr> + <tr> + <td><code>"blob"</code></td> + <td>{{ domxref("Blob") }}</td> + </tr> + <tr> + <td><code>"document"</code></td> + <td>{{ domxref("Document") }}</td> + </tr> + <tr> + <td><code>"json"</code></td> + <td>JavaScript объект, полученный путем парсинга JSON строки, полученной с сервера.</td> + </tr> + <tr> + <td><code>"text"</code></td> + <td>String (строка)</td> + </tr> + <tr> + <td><code>"moz-blob"</code></td> + <td>Firefox - велосипед, который позволяет работать с частично-полученными данными {{ domxref("Blob") }} при помощи событий прогресса (progressing events). Эта штука позволяет работать с ответом от сервера, до того как он получен полностью.</td> + </tr> + <tr> + <td><code>"moz-chunked-text"</code></td> + <td> + <p>Похоже на поле <code>"text"</code>, но только находится в потоке(streaming). Это значит, что значение доступно только в промежуток времени между событиями прогресса (<code>"progress"</code> event), и содержит данные которые пришли из последнего события прогресса.</p> + + <p>Поле содержит строку, пока выполняются события прогресса. После того как ответ получен польность, значение поля меняется на <code>null</code>.</p> + + <p>Работает только в Firefox.</p> + </td> + </tr> + <tr> + <td><code>"moz-chunked-arraybuffer"</code></td> + <td> + <p>Похоже на поле <code>"arraybuffer"</code>, но только находится в потоке(streaming). Это значит, что значение доступно только в промежуток времени между событиями прогресса (<code>"progress"</code> event), и содержит данные которые пришли из последнего события прогресса.</p> + + <p>Поле содержит строку, пока выполняются события прогресса. После того как ответ получен полностью, значение поля меняется на <code>null</code>.</p> + + <p>Работает только в Firefox.</p> + </td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note:</strong> Starting with Gecko 11.0 {{ geckoRelease("11.0") }}, as well as WebKit build 528, these browsers no longer let you use the <code>responseType</code> attribute when performing synchronous requests. Attempting to do so throws an <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> exception. This change has been proposed to the W3C for standardization.</div> + </td> + </tr> + <tr id="responseXML"> + <td><code>responseXML</code> {{ReadOnlyInline()}}</td> + <td><code>Document?</code></td> + <td> + <p>Ответ является объектом DOM <code><a class="internal" href="/en/DOM/document" title="En/DOM/Document">Document</a></code>, или <code>null в случае если запрос окончился ошибкой, или ответ не получен полностью, или если ответ невозможно распарсить как </code>XML или HTML. Ответ парсится как если бы это был <code>text/xml</code> stream. Когда значение <code>responseType</code> равно <code>"document"</code> и запрос выполнен асинхронно, ответ парсится как <code>text/html</code> stream.</p> + + <div class="note"><strong>Примечание:</strong> Если сервер не работаетс заголовком (не присылает в ответе) "Content-type: <code>text/xml"</code>, то можно использовать метод <code>overrideMimeType() для того чтобы парсить получаемый ответ как </code>XML.</div> + </td> + </tr> + <tr id="status"> + <td><code>status</code> {{ReadOnlyInline()}}</td> + <td><code>unsigned short</code></td> + <td>Статус ответа на запрос. Равен кодам HTTP (200 - успешно, 404 не найдено, 301 - перенесено навсегда).</td> + </tr> + <tr id="statusText"> + <td><code>statusText</code> {{ReadOnlyInline()}}</td> + <td><code>DOMString</code></td> + <td>Строка статуса ответа. В отличи от поля <code>status</code>, эта строка включает в себя текст - ("<code>200 OK</code>", например).</td> + </tr> + <tr id="timeout"> + <td><code>timeout</code></td> + <td><code>unsigned long</code></td> + <td> + <p>Время в миллисекундах, после которого запрос будет отменен. Значение 0 (по умолчанию) значит что таймаута не будет. Никогда.</p> + + <div class="note"><strong>Примечание:</strong> Вы можете не использовать поле timeout для синхронных запросов из owning window.</div> + </td> + </tr> + <tr id="ontimeout"> + <td><code>ontimeout</code></td> + <td><code>Function</code></td> + <td> + <p>Функция обратного вызова которая будет вызвана в случае таймаута.</p> + </td> + </tr> + <tr id="upload"> + <td><code>upload</code></td> + <td><code>XMLHttpRequestUpload</code></td> + <td>Загрзка (upload process) может отслеживаться event listener'ом.</td> + </tr> + <tr id="withCredentials"> + <td><code>withCredentials</code></td> + <td><code>boolean</code></td> + <td> + <p>Определяет что cross-site запрос, согласно <code>Access-Control</code> должен использовать авторизацию (креды для логина и пароля) через куки, или заголовок с авторизационными данными. По умолчанию false.</p> + + <div class="note"><strong>Примечание:</strong> Не влияет на same-site запросы.</div> + + <div class="note"><strong>Примечание:</strong> Начиная с Gecko 11.0 {{ geckoRelease("11.0") }}, Gecko больше не позволяет использовать поле <code>withCredentials</code> при выполнении синхронных запросов. Попытка выполнить это выбрасывает <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> исключение.</div> + </td> + </tr> + </tbody> +</table> + +<h3 id="Нестандартные_свойства">Нестандартные свойства</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Attribute</th> + <th>Type</th> + <th>Description</th> + </tr> + <tr id="channel"> + <td><code>channel</code> {{ReadOnlyInline()}}</td> + <td>{{Interface("nsIChannel")}}</td> + <td>The channel used by the object when performing the request. This is <code>null</code> 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. <strong>Requires elevated privileges to access.</strong></td> + </tr> + <tr id="mozAnon"> + <td><code>mozAnon</code> {{ReadOnlyInline()}}</td> + <td><code>boolean</code></td> + <td> + <p>Если значение равно true, запрос отправляется без куки и заголовков авторизации.</p> + </td> + </tr> + <tr id="mozSystem"> + <td><code>mozSystem</code> {{ReadOnlyInline()}}</td> + <td><code>boolean</code></td> + <td> + <p>Если значение равно true, same origin policy не будут использоваться в запросе (кроссдоменный запрос не сработает).</p> + </td> + </tr> + <tr id="mozBackgroundRequest"> + <td><code>mozBackgroundRequest</code></td> + <td><code>boolean</code></td> + <td> + <div class="note"> + <p>Этот метод не может быть вызван из контекста страницы. Для того чтобы воспользоваться им нужны повышенные привелегии (elevated privileges).</p> + </div> + + <p>Флаг, означающий что запрос от пользователя надо скрыть. Для пользователя не появится никаких сообщений и/или оповещений что запрос вообще был.</p> + + <p>В случае, если для продолжения запроса нужна какая-то аутентификация, и в других случаях было бы отображено оповещение, этот запрос просто не сработает.</p> + + <div class="note"><strong>Note: Этот флаг должен быть выставлен до вызова метода </strong><code>open()</code>.</div> + </td> + </tr> + <tr id="mozResponseArrayBuffer"> + <td><code>mozResponseArrayBuffer</code> {{ obsolete_inline("6") }} {{ReadOnlyInline()}}</td> + <td><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td> + <td>Массив, в который ляжет ответ от сервера, если ответ приходит в виде Javascript массива ([]). В случае, если запрос не удалось завершить, или если запрос не был отправлен, то это поле будет null.</td> + </tr> + <tr id="multipart"> + <td><code>multipart</code> {{ obsolete_inline("22") }}</td> + <td><code>boolean</code></td> + <td> + <p><strong>This Gecko-only feature was removed in Firefox/Gecko 22.</strong> Please use <a href="/en-US/docs/Server-sent_events" title="/en-US/docs/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">Web Sockets</a>, or <code>responseText</code> from progress events instead.</p> + + <p>Indicates whether or not the response is expected to be a stream of possibly multiple XML documents. If set to <code>true</code>, the content type of the initial response must be <code>multipart/x-mixed-replace</code> or an error will occur. All requests must be asynchronous.</p> + + <p>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 <code>onload</code> handler is called between documents.</p> + + <div class="note"><strong>Note:</strong> When this is set, the <code>onload</code> handler and other event handlers are not reset after the first XMLdocument is loaded, and the <code>onload</code> handler is called after each part of the response is received.</div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Конструктор">Конструктор</h2> + +<h3 id="XMLHttpRequest()" name="XMLHttpRequest()">XMLHttpRequest()</h3> + +<p>Конструктор создает объект XMLHttpRequest. Он должен быть вызван перед обращением к любому методу класса.</p> + +<p>Gecko/Firefox 16 добавляет нестандартные параметры в конструктор, для лучшего взаимодействия с режимом инкогнито, (смотри <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677" title="692677 – Relax same-origin XHR restrictions for privileged applications">Bug 692677</a>). Установка флага <code>mozAnon</code> в значение <code>true</code> создает сущность <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> описанную в XMLHttpRequest спецификации, но не реализованную не в одном из браузеров (информация сентября 2012).</p> + +<pre>XMLHttpRequest ( + JSObject objParameters +);</pre> + +<h5 id="Параметры_(нестандартные)">Параметры (нестандартные)</h5> + +<dl> + <dt><code>objParameters</code></dt> + <dd>Вы можете использовать два флага: + <dl> + <dt><code>mozAnon</code></dt> + <dd>Boolean: Использование этого флага уберет из запроса заголовки origin, и <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">user credentials</a>. Кроме этого, куки не будут отправлены в запросе, если только они не будут добавлены к запросу специально, через метод setRequestHeader.</dd> + <dt><code>mozSystem</code></dt> + <dd>Boolean: Если выставить этот флаг в значение <code>true</code> то это позволит делать cross-доменные запросы без необходимости получения специальных заголовков со стороны сервера (CORS). Для использования этого флага необходимо использовать дополнительный флаг<em> <code>mozAnon: true</code>, поскольку для отправки запроса на другой домен, нельзя использовать куки и креды пользователя. Этот флаг <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677#c68" title="Bug 692677 comment 68">работает только с привилегированными (одобренными) приложениями</a>; он не сработает с произвольно загруженными страницами.</em></dd> + </dl> + </dd> +</dl> + +<h2 id="Методы">Методы</h2> + +<h3 id="abort()" name="abort()">abort()</h3> + +<p>Отменяет запрос, если он был отправлен.</p> + +<h3 id="getAllResponseHeaders()" name="getAllResponseHeaders()">getAllResponseHeaders()</h3> + +<pre>DOMString getAllResponseHeaders();</pre> + +<p>Возвращает все заголовки ответа как строку, или <code>null</code> если ответ не был получен. Для multypart запросов возвращает заголовки текущей части запроса, а не всего канала.</p> + +<h3 id="getResponseHeader()" name="getResponseHeader()">getResponseHeader()</h3> + +<pre>DOMString? getResponseHeader(DOMString <var>header</var>);</pre> + +<p>Возвращает значение указанного заголовка из полученного ответа, или <code>null</code> в случает если ответ не получен, или такого заголовка в ответе нет. Возвращаемая строка имеет кодировку UTF.</p> + +<div class="note"> +<p><code><strong>Примечание: </strong>Если в ответе есть заголовки с одни названием, то значения этих заголовков будут объеденены в одну строку, разделенную запятой и пробелом.</code></p> +</div> + +<h3 id="open()" name="open()">open()</h3> + +<p>Инициализирует запрос. Этот метод может (и должен) быть вызван из JavaScript кода; если необходимо вызвать запрос из нативного кода, то нужно использовать метод <a class="internal" href="/en/nsIXMLHttpRequest#openRequest()" title="/en/XMLHttpRequest#openRequest()"><code>openRequest()</code></a>.</p> + +<div class="note"><strong>Примечание:</strong> Вызов этого метода из активного запроса (если метод <code>open() или</code> <code>openRequest() уже были вызваны</code>) эквивалентно вызову метода <code>abort()</code>.</div> + +<pre>void open( + DOMString <var>method</var>, + DOMString <var>url</var>, + optional boolean <var>async</var>, + optional DOMString <var>user</var>, + optional DOMString <var>password</var> +); +</pre> + +<h6 id="Параметры">Параметры</h6> + +<dl> + <dt><code>method</code></dt> + <dd>HTTP метод отправки сообщения - "GET", "POST", "PUT", "DELETE", и проч. Ignored for non-HTTP(S) URLs.</dd> + <dt><code>url</code></dt> + <dd>URL адрес, на который будет отправлено сообщение.</dd> + <dt><code>async</code></dt> + <dd>Необязательный boolean параметр, по умолчанию равный <code>true. Определяет, будет ли запрос отправлен асинхронно. Если значение равно</code> <code>false</code>, метод <code>send() вернет ответ в общем потоке работы приложения (иначе говоря, приложение зависнет на некоторое время), в противном случае, ответ может быть получен только при помощи определенных </code>event listener'ов. В случае, если используется отправка <code>multipart</code> запроса, то этот атрибут <strong>должен </strong>быть <code>true</code>, или будет выброшено исключение. + <div class="note"><strong>Примечание:</strong> Начиная с Gecko 30.0 {{ geckoRelease("30.0") }}, синхронные запросы объявлены как deprecated, в силу того что все пользователи недовольны тем, что приложение "зависает".</div> + </dd> + <dt><code>user</code></dt> + <dd>Необязательный параметр, используется для аутентификации пользователя. По умолчанию, пустая строка.</dd> + <dt><code>password</code></dt> + <dd>Необязательный параметр, используется для аутентификации пользователя. По умолчанию пустая строка.</dd> +</dl> + +<h3 id="overrideMimeType()" name="overrideMimeType()">overrideMimeType()</h3> + +<p>Переопределяет MIME тип, получаемый от сервера. Это может быть использовано, например, для того чтобы получить и распарсить данные в формате text/xml, даже, если сервер сообщает что это не так. Этот метод должен быть вызван перед вызовом метода <code>send()</code>.</p> + +<pre>void overrideMimeType(DOMString <var>mimetype</var>);</pre> + +<h3 id="send()" name="send()">send()</h3> + +<p>Отправляет запрос. Если запрос асинхронный (а по умолчанию это так), этот метод вернет значение сразу после того как метод вызван.</p> + +<div class="note"> +<p><strong>Примечание переводчика: </strong>в этом случае, в ответе не будет содержаться информации, которая пришла с сервера, поскольку она еще не пришла. Для того чтобы получить эту информацию, нужно слушать события загрузки, или использовать promise.</p> +</div> + +<p>Если запрос синхронный, то метод вернет значение только после того, как придет запрос от сервера.</p> + +<div class="note"><strong>Примечание:</strong> все необходимые слушатели событий (event listeners) должны быть установлены перед вызовом <code>send()</code>.</div> + +<div class="note"><strong>Примечание:</strong> Лучше не использовать параметр ArrayBuffer. Сейчас он не входит в спецификацию <code>XMLHttpRequest</code>. Вместо него можно использовать ArrayBufferView (смотри таблицу совместимости для различных версий).</div> + +<pre>void send(); +<s>void send(ArrayBuffer <var>data</var>);</s> +void send(ArrayBufferView <var>data</var>); +void send(Blob <var>data</var>); +void send(Document <var>data</var>); +void send(DOMString? <var>data</var>); +void send(FormData <var>data</var>);</pre> + +<h6 id="Примечания">Примечания</h6> + +<p>Если тип <var>data</var> - <code>Document</code>, то он будет сериализован перед отправкой. Firefox до версии 3 всегда отправляет такой запрос в кодировке UTF-8; <a href="/en/Firefox_3" rel="internal" title="en/Firefox_3">Firefox 3</a> отправляет данные в той кодировке, которая указаны в <code>body.xmlEncoding</code>, или UTF-8 если такой информации нет.</p> + +<p>If it's an <code>nsIInputStream</code>, it must be compatible with <code>nsIUploadChannel</code>'s <code>setUploadStream()</code>method. In that case, a Content-Length header is added to the request, with its value obtained using <code>nsIInputStream</code>'s <code>available()</code>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 <a class="internal" href="#setRequestHeader()" title="/en/XMLHttpRequest#setRequestHeader()"><code>setRequestHeader()</code></a> method prior to calling <code>send()</code>.</p> + +<p>The best way to send binary content (like in files upload) is using an <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView">ArrayBufferView</a> or <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> in conjuncton with the <code>send()</code> method. However, if you want to send a <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, use the <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> method instead, or the <a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" title="This API is not native.">Non native</span> typed arrays superclass.</p> + +<h3 id="setRequestHeader()" name="setRequestHeader()">setRequestHeader()</h3> + +<p>Устанавливает значение заголовка HTTP-запроса. Вы должны вызвать <code>setRequestHeader()</code> после <a href="#open"><code>open()</code></a>, но перед <code>send()</code>. Если данный метод вызывается несколько раз с одним и тем же заголовком, все значения объеденяются в один заголовок запроса.</p> + +<pre>void setRequestHeader( + DOMString <var>header</var>, + DOMString <var>value</var> +); +</pre> + +<h6 id="Параметры_2">Параметры</h6> + +<dl> + <dt><code>header</code></dt> + <dd>Имя заголовка, значение которого будет установлено.</dd> + <dt><code>value</code></dt> + <dd>Значение, заданное как тело заголовка.</dd> +</dl> + +<h3 id="Нестандартные_методы">Нестандартные методы</h3> + +<h4 id="init()">init()</h4> + +<p>Инициализирует объект для использования с C++ кодом.</p> + +<div class="warning"><strong>Внимание:</strong> Этот метод <strong><em>нельзя</em></strong> вызывать из JavaScript.</div> + +<pre>[noscript] void init( + in nsIPrincipal principal, + in nsIScriptContext scriptContext, + in nsPIDOMWindow ownerWindow +); +</pre> + +<h5 id="Параметры_3">Параметры</h5> + +<dl> + <dt><code>principal</code></dt> + <dd> + <p>Принцип, используемый для запроса; не должен быть <code>null</code>.</p> + </dd> + <dt><code>scriptContext</code></dt> + <dd> + <p>Контекст скрипта, используемого для запроса; не должен быть <code>null</code>.</p> + </dd> + <dt><code>ownerWindow</code></dt> + <dd> + <p>Окно, связанное с запросом; может быть <code>null</code>.</p> + </dd> +</dl> + +<h4 id="openRequest()">openRequest()</h4> + +<p>Инициализирует запрос. Этот метод должен использоваться из собственного кода; для инициализации запроса из кода JavaScript вместо этого используйте используйте <code><a class="internal" href="/en/nsIXMLHttpRequest#open()" title="/en/XMLHttpRequest#open()">open()</a></code> метод. Смотрите документацию для <code><a class="internal" href="/en/nsIXMLHttpRequest#open()" title="/en/XMLHttpRequest#open()">open()</a></code>.</p> + +<h4 id="sendAsBinary()_deprecated_inline(31)">sendAsBinary() {{ deprecated_inline(31) }}</h4> + +<p>Вариант метода <code>send()</code> который посылает бинарные данные.</p> + +<div class="note"><strong>Примечание:</strong> Етот нестандартный метод считается устарелым по состоянию на Gecko 31 {{ geckoRelease(31) }}, и со временем будет удален. Взамен может использоваться стандарт метода <code>send(Blob data).</code> </div> + +<pre>void sendAsBinary( + in DOMString body +); +</pre> + +<p>Даный метод используется в сочетании с методом <code><a href="/en-US/docs/DOM/FileReader#readAsBinaryString()" title="/en-US/docs/DOM/FileReader#readAsBinaryString()">readAsBinaryString</a>,</code> который присутствует в <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API, и позволяет <a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">прочитать и <strong>загрузить</strong> файл любого типа</a> и превратить необработанные данные в <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">JSON-строку</a>.</p> + +<h5 id="Параметры_4">Параметры</h5> + +<dl> + <dt><code>body</code></dt> + <dd>Тело запроса в виде <a href="https://developer.mozilla.org/ru/docs/Web/API/DOMString">DOMstring</a>. Эти данные конвертированы в строку с однобайтовыми символами с помощью усечения (удаления байта с высоким порядком в каждом символе).</dd> +</dl> + +<h5 id="sendAsBinary()_polyfill"><code>sendAsBinary()</code> polyfill</h5> + +<p>Since <code>sendAsBinary()</code> is an experimental feature, here is <strong>a polyfill</strong> for browsers that <em>don't</em> support the <code>sendAsBinary()</code> method but support <a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">typed arrays</a>.</p> + +<pre class="brush: js">/*\ +|*| +|*| :: 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); */ + }; +}</pre> + +<div class="note"><strong>Note:</strong> It's possible to build this polyfill putting two types of data as argument for <code>send()</code>: an <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> (<code>ui8Data.buffer</code> – the commented code) or an <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView"><code>ArrayBufferView</code></a> (<code>ui8Data</code>, which is a <a href="/en-US/docs/JavaScript/Typed_arrays/Uint8Array" title="/en-US/docs/JavaScript/Typed_arrays/Uint8Array">typed array of 8-bit unsigned integers</a> – uncommented code). However, on Google Chrome, when you try to send an <code>ArrayBuffer</code>, the following warning message will appear: <code>ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead.</code> Another possible approach to send binary data is the <a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" style="background-color: #ffffff;" title="This API is not native.">Non native</span> typed arrays superclass in conjunction with the <a href="#send()" title="#send()"><code>send()</code></a> method.</div> + +<h2 id="Notes">Notes</h2> + +<ul> + <li class="note">By default, Firefox 3 limits the number of <code>XMLHttpRequest</code> connections per server to 6 (previous versions limit this to 2 per server). Some interactive web sites may keep an <code>XMLHttpRequest</code> connection open, so opening multiple sessions to such sites may result in the browser hanging in such a way that the window no longer repaints and controls don't respond. This value can be changed by editing the <code>network.http.max-persistent-connections-per-server</code> preference in <code><a class="linkification-ext" href="/about:config" title="Linkification: about:config">about:config</a></code>.</li> + <li class="note">From {{ gecko("7.0") }} headers set by {{ manch("setRequestHeader") }} are sent with the request when following a redirect. Previously these headers would not be sent.</li> + <li class="note"><code>XMLHttpRequest</code> is implemented in Gecko using the {{ interface("nsIXMLHttpRequest") }}, {{ interface("nsIXMLHttpRequestEventTarget") }}, and {{ interface("nsIJSXMLHttpRequest") }} interfaces.</li> + <li class="note">When a request reaches its timeout value, a "timeout" event is raised.</li> +</ul> + +<h4 class="note" id="Events">Events</h4> + +<p><code>onreadystatechange</code> as a property of the <code>XMLHttpRequest</code> instance is supported in all browsers.</p> + +<p>Since then, a number of additional event handlers were implemented in various browsers (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, etc.). These are supported in Firefox. In particular, see {{ interface("nsIXMLHttpRequestEventTarget") }} and <a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p> + +<p>More recent browsers, including Firefox, also support listening to the <code>XMLHttpRequest</code> events via standard <code><a href="/en/DOM/element.addEventListener" title="element.addEventListener">addEventListener</a></code> APIs in addition to setting <code>on*</code> properties to a handler function.</p> + +<h2 id="Permissions" name="Permissions">Permissions</h2> + +<p>When using System XHR via the <code>mozSystem</code> property, for example for Firefox OS apps, you need to be sure to add the <code>systemXHR</code> permission into your manifest file. System XHR can be used in privileged or certified apps.</p> + +<pre class="brush: js">"permissions": { + "systemXHR":{} +}</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2> + +<p>{{Compat("api.XMLHttpRequest")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>MDN articles about XMLHttpRequest: + <ul> + <li><a href="/en/AJAX/Getting_Started" title="en/AJAX/Getting_Started">AJAX - Getting Started</a></li> + <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en/HTML_in_XMLHttpRequest" title="en/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> + <li><a href="/en/DOM/XMLHttpRequest/FormData" title="en/XMLHttpRequest/FormData"><code>FormData</code></a></li> + </ul> + </li> + <li>XMLHttpRequest references from W3C and browser vendors: + <ul> + <li><a class="external" href="http://www.w3.org/TR/XMLHttpRequest1/">W3C: XMLHttpRequest</a> (base features)</li> + <li><a class="external" href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html" title="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">W3C: XMLHttpRequest</a> (latest editor's draft with extensions to the base functionality, formerly XMLHttpRequest Level 2</li> + <li><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li> + <li><a class="external" href="https://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/XHR.html">Apple developers' reference</a></li> + </ul> + </li> + <li><a class="external" href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li> + <li><a class="external" href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li> + <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks - New Tricks in XMLHttpRequest2</a></li> + <li><a href="http://programmers.stackexchange.com/questions/157375/why-does-xmlhttprequest-not-seem-to-follow-a-naming-convention">Thread on the naming convention of <code>XMLHttpRequest</code></a></li> + <li><code>Chrome scope availability</code> - how to access from JSM modules etc which do not have access to DOM + <ul> + <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> + <li><a href="/en-US/docs/nsIXMLHttpRequest">nsIXMLHttpRequest [en-US]</a></li> + </ul> + </li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventHandler" title="A possible way to get notified of Events of a particular type (such as click) for a given object is to specify an event handler using:"><code>Обработчик события (EventHandler)</code></a>, который вызывается всякий раз, когда изменяется состояние свойства <code>readyState</code>. Свойство <strong><code>XMLHttpRequest.onreadystatechange</code></strong> содержит обработчик события, вызываемый когда происходит событие {{event("readystatechange")}}, всякий раз когда свойство {{domxref("XMLHttpRequest.readyState", "readyState")}} запроса {{domxref("XMLHttpRequest")}} изменяется. Функция обратного вызова запускается из потока пользовательского интерфейса.</p> + +<div class="warning"> +<p><strong>Внимание:</strong> Не должно использоваться при синхронных запросах и из исходного кода (native code).</p> +</div> + +<p>Событие <code>readystatechange</code> не произойдёт если запрос <code>XMLHttpRequest</code> отменён методом <a href="/en-US/docs/Web/API/XMLHttpRequest/abort">abort()</a>.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><em>XMLHttpRequest</em>.onreadystatechange = <em>callback</em>;</pre> + +<h3 id="Значение">Значение</h3> + +<ul> + <li><code><em>callback</em></code> - это функция, которая будет вызываться при изменении свойства <code>readyState</code>.</li> +</ul> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush: js">var xhr = new XMLHttpRequest(), + method = "GET", + url = "https://developer.mozilla.org/"; + +xhr.open(<em>method</em>, <em>url</em>, true); +xhr.onreadystatechange = function () { + if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { + console.log(xhr.responseText); + }; + }; +xhr.send();</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Действующий стандарт WHATWG</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Свойство</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>{{CompatIe(7)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari(1.2)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Свойство</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer версий 5 и 6 поддерживают запросы ajax при использовании <code>ActiveXObject()</code>.</p> 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 +--- +<p>{{APIRef('XMLHttpRequest')}}</p> + +<p>Метод <strong>XMLHttpRequest.open()</strong> инициализирует новый запрос или повторно инициализирует уже созданный.</p> + +<div class="note"><strong>Заметка:</strong> Вызов этого метода для уже активного запроса (для которого уже был вызван <code>open()</code>) эквивалентно вызову <code>abort()</code>.</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>XMLHttpRequest</var>.open(<var>method</var>, <var>url</var>[, <var>async</var>[, <var>user</var>[, <var>password</var>]]]) +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>method</code></dt> + <dd>Для HTTP-запроса используются такие методы как "GET", "POST", "PUT", "DELETE", и т. д. Игнорируется для URL, отличных от HTTP(S)-запросов.</dd> + <dt><code>url</code></dt> + <dd>{{domxref("DOMString")}} представляет URL для отправки запроса.</dd> + <dt><code>async</code> {{optional_inline}}</dt> + <dd> + <p>Необязательный логический параметр со значением по умолчанию <code>true</code>, указывающим, выполнять ли операцию асинхронно или нет. Если это значение равно <code>false</code>, метод <code>send()</code> не возвращается, пока не будет получен ответ. Если <code>true</code>, уведомление о получении ответа осуществляется с помощью обработчика события. Должен быть <code>true</code>, если аттрибут <code>multipart</code> равен <code>true</code>, иначе будет выброшено исключение.</p> + + <div class="note"><strong>Заметка:</strong> Синхронные запросы в основном потоке могут нарушить работу пользователя, их следует избегать. Фактически большинство браузеров полностью отказались от поддержки синхронных XHR в основном потоке. Синхронные запросы можно использовать в {{domxref("Worker")}}.</div> + </dd> + <dt><code>user</code> {{optional_inline}}</dt> + <dd>Опционально: имя пользователя, использующееся для аутентификации; по умолчанию имеет значение <code>null</code>.</dd> + <dt><code>password</code> {{optional_inline}}</dt> + <dd>Опционально: пароль, использующийся для аутентификации; по умолчанию имеет значение <code>null</code>.</dd> +</dl> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG живой стандарт</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.XMLHttpRequest.open")}}</p> + +<h2 id="См._также">См. также</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></li> + <li>{{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}</li> + <li>{{domxref("XMLHttpRequest.send", "send()")}}</li> + <li>{{domxref("XMLHttpRequest.abort", "abort()")}}</li> +</ul> 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 +--- +<p>{{APIRef('XMLHttpRequest')}}</p> + +<p><strong>Свойство XMLHttpRequest.readyState</strong> возвращает текущее состояние объекта XMLHttpRequest. Объект <abbr title="XMLHttpRequest">XHR</abbr> может иметь следующие состояния:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Значение</td> + <td class="header">Состояние</td> + <td class="header">Описание</td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>UNSENT</code></td> + <td>Объект был создан. Метод <code>open()</code> ещё не вызывался.</td> + </tr> + <tr> + <td><code>1</code></td> + <td><code>OPENED</code></td> + <td><code>Метод open()</code> был вызван.</td> + </tr> + <tr> + <td><code>2</code></td> + <td><code>HEADERS_RECEIVED</code></td> + <td><code>Метод send()</code> был вызван, доступны заголовки (headers) и статус.</td> + </tr> + <tr> + <td><code>3</code></td> + <td><code>LOADING</code></td> + <td>Загрузка; <code>responseText</code> содержит частичные данные.</td> + </tr> + <tr> + <td><code>4</code></td> + <td><code>DONE</code></td> + <td>Операция полностью завершена.</td> + </tr> + </tbody> +</table> + +<dl> + <dt>UNSENT</dt> + <dd>Объект XMLHttpRequest был создан, но метод <code>open()</code> ещё не вызывался.</dd> + <dt>OPENED</dt> + <dd>Был вызван метод open(). На этом этапе методом <a href="/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader">setRequestHeader()</a> могут быть установлены заголовки запроса (request headers), после чего для начала выполнения запроса может быть вызван метод <a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a> .</dd> + <dt>HEADERS_RECEIVED</dt> + <dd>Был вызван метод send() и получены заголовки ответа (response headers) .</dd> + <dt>LOADING</dt> + <dd>Получена часть ответа. Если <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> - это пустая строка или имеет значение "text", <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseText">responseText</a></code> будет содержать загруженную порцию текста ответа.</dd> + <dt>DONE</dt> + <dd>Операция доставки данных завершена. Это может означать как то, что передача данных полностью завершена успешно, так и то, что произошла ошибка.</dd> +</dl> + +<div class="note"> +<p>Названия состояний отличаются в версиях Internet Explorer ранее 11. Вместо <code>UNSENT</code>, <code>OPENED</code>,<code> HEADERS_RECEIVED</code>,<code> LOADING</code> и <code>DONE, используются названия READYSTATE_UNINITIALIZED</code> (0), <code>READYSTATE_LOADING</code> (1), <code>READYSTATE_LOADED</code> (2), <code>READYSTATE_INTERACTIVE</code> (3) и <code>READYSTATE_COMPLETE</code> (4).</p> +</div> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">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); +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#states')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Действующий стандарт WHATWG</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Свойство</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td> + <td>{{CompatIe(7)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari("1.2")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Свойство</th> + <th>Android</th> + <th>Chrome для Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<div><span class="seoSummary">Свойство <code>XMLHttpRequest </code></span><code><strong>response</strong></code> <span class="seoSummary"> возвращает содержимое тела ответа в виде <code>ArrayBuffer</code>, <code>Blob</code>, <code>Document</code>, <code>JavaScript Object</code> или <code>DOMString </code>в зависимости от значения свойства <code>responseType</code>.</span></div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <em>body</em> = <em>XMLHttpRequest</em>.response; +</pre> + +<h3 id="Value">Value</h3> + +<p> </p> + +<p>Соответствующий объект, основанный на значении <code>responseType</code>. Вы можете попытаться запросить данные в определенном формате, установив значение <code>responseType</code> после вызова <code>open()</code> для инициализации запроса, но перед вызовом <code>send()</code> для отправки запроса на сервер.</p> + +<p>Значение равно <code>null</code>, если запрос еще не завершен или был неудачным, за исключением того, что при чтении текстовых данных с использованием <code>responseType "text"</code> или пустой строки (<code>""</code>), ответ может содержать ответ до тех пор, пока запрос все еще находится в состоянии <code>LOADING readyState (3)</code>.</p> + +<p>Типы ответов описаны ниже.</p> + +<p> </p> + +<p> </p> + +<table> + <thead> + <tr> + <th scope="col">Значение</th> + <th scope="col">Описание</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>""</code></td> + <td>Пустая строка <code>responseType</code> обрабатывается так же, как <code>"text"</code>, тип по умолчанию (следовательно, как <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.">DOMString</a></code>.)</td> + </tr> + <tr> + <td><code>"arraybuffer"</code></td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response" title="The XMLHttpRequest response property returns the response's body content as an ArrayBuffer, Blob, Document, JavaScript Object, or DOMString, depending on the value of the request's responseType property."><code>response</code></a> в JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" title="The ArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer. You cannot directly manipulate the contents of an ArrayBuffer; instead, you create one of the typed array objects or a DataView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer."><code>ArrayBuffer</code></a> содержит двоичные данные.</td> + </tr> + <tr> + <td><code>"blob"</code></td> + <td><code>response</code> в <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob" title="A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system."><code>Blob</code></a> object содержит двоичные данные.</td> + </tr> + <tr> + <td><code>"document"</code></td> + <td> + <p><code>response</code> является <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML" title="HTML: HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure.">HTML</a> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.HTMLElement"><code>Document</code></a> или <a href="https://developer.mozilla.org/en-US/docs/Glossary/XML" title="XML: eXtensible Markup Language (XML) is a generic markup language specified by the W3C. The information technology (IT) industry uses many languages based on XML as data-description languages.">XML</a> <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLDocument" title="The XMLDocument interface represent an XML document. It inherits from the generic Document and does not add any specific methods or properties to it: nevertheless, several algorithms behave differently with the two types of documents."><code>XMLDocument</code></a>, в зависимости от ситуации, основанный на MIME-типе полученных данных. См. <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> , чтобы узнать больше об использовании XHR для извлечения содержимого HTML.</p> + </td> + </tr> + <tr> + <td><code>"json"</code></td> + <td><code>response</code> является JavaScript object, созданный путем анализа содержимого полученных данных как <a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON" title="JSON: JavaScript Object Notation (JSON) is a data-interchange format. Although not a strict subset, JSON closely resembles a subset of JavaScript syntax. Though many programming languages support JSON, JSON is especially useful for JavaScript-based apps, including websites and browser extensions.">JSON</a>.</td> + </tr> + <tr> + <td><code>"text"</code></td> + <td><code>response</code> является текстом в <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a> object.</td> + </tr> + <tr> + <td><code>"moz-chunked-arraybuffer"</code> </td> + <td> + <p> </p> + + <p>Похож на <code>"arraybuffer"</code>, но данные принимаются в потоке. При использовании этого типа ответа значение в <code>response</code> доступно только в обработчике для события <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/progress" title="/en-US/docs/Web/Events/progress">progress</a></code> и содержит только данные, полученные с момента последнего события <code>progress</code>, а не совокупные данные, полученные с момента отправки запроса.</p> + + <p>Доступ к <code>response</code> во время события <code>progress</code> возвращает полученные данные. За пределами обработчика событий <code>progress</code> значение <code>response</code> всегда равно <code>null</code>.</p> + + <p> </p> + </td> + </tr> + <tr> + <td><code>"ms-stream"</code> </td> + <td><code>response</code> является частью потоковой загрузки; этот тип ответа разрешен только для запросов на загрузку и поддерживается только Internet Explorer.</td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<p> </p> + +<p> </p> + +<p>В этом примере представлена функция <code>load()</code>, которая загружает и обрабатывает страницу с сервера. Он работает путем создания объекта <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" title="Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> и создания обработчика собития с событием <code>readystatechange</code>, чтобы при изменении <code>readyState </code>на <code>DONE (4)</code> <code>response</code> получался и передавался в функцию обратного вызова, предоставляемую <code>load()</code>.</p> + +<p>Содержимое обрабатывается как необработанные текстовые данные (поскольку здесь ничто не переопределяет <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType" title="The XMLHttpRequest property responseType is an enumerated string value specifying the type of data contained in the response."><code>responseType</code></a> по умолчанию).</p> + +<p> </p> + +<p> </p> + +<pre class="brush: js">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(''); +} + +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-response-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG живой стандарт</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузера">Совместимость браузера</h2> + +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div> + +<p>{{Compat("api.XMLHttpRequest.response")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li>Getting text and HTML/XML data: {{domxref("XMLHttpRequest.responseText")}} and {{domxref("XMLHttpRequest.responseXML")}}</li> +</ul> 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 +--- +<div>{{draft}}</div> + +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p><span class="seoSummary">Только для чтения {{domxref("XMLHttpRequest")}} свойство <strong><code>responseText</code></strong> возвращает текст ответа от сервера на отправленный запрос.</span></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>resultText</var> = <var>XMLHttpRequest</var>.responseText;</pre> + +<h3 id="Значение">Значение</h3> + +<p>Строка {{domxref("DOMString")}} содержащая либо <code>текстовые данные, </code>полученные при использовании <code>XMLHttpRequest, либо</code> <code>null</code> в случае, когда вопрос возвратил ошибку, или же еще не был отослан на сервер вызовом функции {{domxref("XMLHttpRequest.send", "send()")}}.</p> + +<p>Во время выполнения асинхронных запросов, в значении <code>responseText</code> всегда находится текущее содержимое, полученное от сервера, даже если запрос еще не завершен, и данные от сервера не получены полностью.</p> + +<p>Понять, что ответ получен полностью, можно когда значение {{domxref("XMLHttpRequest.readyState", "readyState")}} становится {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (<code>4</code>), а значение {{domxref("XMLHttpRequest.status", "status")}} становится 200 (<code>"OK"</code>).</p> + +<h3 id="Исключения">Исключения</h3> + +<dl> + <dt><code>InvalidStateError</code></dt> + <dd>Возникает, когда значению {{domxref("XMLHttpRequest.responseType")}} не присвоена либо пустая строка, либо "text". Поскольку свойство <code>responseText</code> предназначено только для текстового содержимого, любое другое значение вызовет ошибку.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">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);</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<p> </p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация </th> + <th scope="col">Статус</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + + + +<p>{{Compat("api.XMLHttpRequest.responseText")}}</p> 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 +--- +<p>{{APIRef('XMLHttpRequest')}}</p> + +<p><strong><code>XMLHttpRequest.responseType</code></strong> <font><font>Свойство является перечислимым значением, </font><font>которое возвращает тип ответа. </font><font>Он также позволяет автору изменять тип ответа. Если значение не задано, будет использовано значение по умолчанию <strong><code>text</code></strong></font></font><font><font>. </font></font><font><font>Установка значения responseType в «document» игнорируется, если выполняется в </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker"><font><font>рабочей</font></font></a><font><font> среде. </font><font>При настройке </font></font><code>responseType</code><font><font> на определенное значение автор должен убедиться, что сервер действительно отправляет ответ, совместимый с этим форматом. Если сервер возвращает данные, которые не совместимы с установленным </font></font><code>responseType</code><font><font>, значение </font></font><code>response</code> <font><font>будет </font></font><code>null</code><font><font>. </font><font>Кроме того, установка </font></font><code>responseType</code> <font><font>для синхронных запросов вызовет исключение </font></font><code>InvalidAccessError</code><font><font>.</font></font></p> + +<p><font><font>Поддерживаемые значения </font></font><code>responseType</code><font><font>:</font></font></p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Value</td> + <td class="header">Data type of <code>response</code> property</td> + </tr> + <tr> + <td><code>""</code></td> + <td>{{domxref("DOMString")}} (this is the default value)</td> + </tr> + <tr> + <td><code>"arraybuffer"</code></td> + <td>{{domxref("ArrayBuffer")}}</td> + </tr> + <tr> + <td><code>"blob"</code></td> + <td>{{domxref("Blob")}}</td> + </tr> + <tr> + <td><code>"document"</code></td> + <td>{{domxref("Document")}}</td> + </tr> + <tr> + <td><code>"json"</code></td> + <td><a href="/en-US/docs/Glossary/JSON"><code>JSON</code></a></td> + </tr> + <tr> + <td><code>"text"</code></td> + <td>{{domxref("DOMString")}}</td> + </tr> + <tr> + <td><code>"moz-chunked-arraybuffer"</code> {{non-standard_inline}}</td> + <td> + <p><font><font>Похоже на </font></font><code>"arraybuffer"</code><font><font>, но потоковое. </font><font>Это означает, что значение в </font></font><code>response</code> <font><font>доступно только при отправке </font></font><code>"progress"</code> <font><font>события и содержит только данные, полученные с момента последнего </font></font><code>"progress"</code> <font><font>события.</font></font></p> + + <p><font><font>При </font></font><code>response</code><font><font> обращении во время события </font></font><code>"progress"</code> <font><font>он содержит строку с данными. </font><font>В противном случае он возвращается </font></font><code>null</code><font><font>.</font></font></p> + + <p>Этот режим работает только в Firefox.. {{gecko_minversion_inline("9.0")}}</p> + </td> + </tr> + <tr> + <td>"ms-stream"{{non-standard_inline}}</td> + <td>Указывает, что ответ является частью потоковой загрузки. Он поддерживается только для запросов на загрузку. Этот режим доступен только в Internet Explorer.</td> + </tr> + </tbody> +</table> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-responsetype-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>31</td> + <td>{{CompatVersionUnknown}}</td> + <td>12<sup>[1]</sup></td> + <td>10</td> + <td>18</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>4.0.3 [2]<br> + 4.4</p> + </td> + <td>55</td> + <td>{{CompatVersionUnknown}}</td> + <td>50<sup>[1]</sup></td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Проприетарный <code>moz-blob</code> и <code>moz-chunked-text</code> значения полностью удалены в Firefox 58.</p> + +<p>[2] Поддерживается только <code>text</code> и <code>arraybuffer</code>.</p> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p>Свойство <code><strong>XMLHttpRequest.responseURL</strong></code> доступно только для чтения, возвращает сериализованный URL ответа или пустую строку, если URL равен <code>null</code>. Если URL возвращен, любой URL фрагмент в URL будет стерт. Значение <code>responseURL</code> станет окончательным URL, получаемым после любых редиректов.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">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);</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-responseurl-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + + + +<p>{{Compat("api.XMLHttpRequest.responseURL")}}</p> 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 +--- +<p>{{APIRef('XMLHttpRequest')}}</p> + +<p><code><font face="Open Sans, Arial, sans-serif">Свойство </font><strong>XMLHttpRequest.responseXML</strong></code> это доступное только для чтения значение, которое содержит {{domxref("Document")}} содержащий HTML или XML полученный запросом, или <code>null</code> в случае, если запрос не был успешен, ещё не был отправлен или полученные данные не могут быть корректно обработаны как XML или HTML. Ответ обрабатывается так, как если бы это был <code>"text/xml"</code>. В случае, если {{domxref("XMLHttpRequest.responseType", "responseType")}} установлен как <code>"document"</code> и запрос был осуществлён асинхронно, ответ обрабатывается как <code>"text/html"</code>. <code>responseXML</code> содержит <code>null</code> для любых других типов данных так же, как и для <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URLs</a>.</p> + +<div class="note"> +<p>Название <code>responseXML</code> это наследие истории этого свойства, на самом деле оно работает как для HTML, так и для XML.</p> +</div> + +<p>Если сервер не определяет заголовок {{HTTPHeader("Content-Type")}} как <code>"text/xml"</code> или <code>"application/xml"</code>, вы в любом случае можете использовать {{domxref("XMLHttpRequest.overrideMimeType()")}} чтобы заставить <code>XMLHttpRequest</code> обрабатывать ответ как XML.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <em>data</em> = <em>XMLHttpRequest</em>.responseXML; +</pre> + +<h3 id="Значение">Значение</h3> + +<p>{{domxref("Document")}} содержащий древовидный результат обработки XML или HTML, полученных с использованием {{domxref("XMLHttpRequest")}}, или <code>null</code>, если данные не были получены или содержат другой тип данных.</p> + +<h3 id="Исключения">Исключения</h3> + +<dl> + <dt><code>InvalidStateError</code></dt> + <dd>{{domxref("XMLHttpRequest.responseType", "responseType")}} не является <code>"document"</code> или пустой строкой (каждый из которых указывает, что принятые данные это XML или HTML).</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">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);</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-responsexml-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Действующий стандарт WHATWG</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)<sup>[1]</sup></th> + <th>Microsoft Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] До Firefox 51, обработка ошибок полученных данных добавляла узел <code><parsererror></code> в верх {{domxref("Document")}} и затем возвращала <code>Document</code> в каком бы состоянии он ни оказывался. Это было расхождение со спецификацией. Начиная с Firefox 51 сейчас в этом случае возвращается <code>null,</code> как и указано в спецификации.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("XMLHttpRequest")}}</li> + <li>{{domxref("XMLHttpRequest.response")}}</li> + <li>{{domxref("XMLHttpRequest.responseType")}}</li> +</ul> 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 +--- +<p>{{APIRef('XMLHttpRequest')}}</p> + +<p>Метод <code><strong>XMLHttpRequest.send()</strong></code> отправляет запрос. Если запрос асинхронный (каким он является по-умолчанию), то возврат из данного метода происходит сразу после отправления запроса. Если запрос синхронный, то метод возвращает управление только после получения ответа. Метод <code>send()</code> принимает необязательные аргументы в тело запросов. Если метод запроса <code>GET</code> или <code>HEAD</code>, то аргументы игнорируются и тело запроса устанавливается в null.</p> + +<p>Если заголовок {{HTTPHeader("Accept")}} не был задан с помощью {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, будет отправлено значение <code>Accept</code> по-умолчанию <code>*/*</code>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">XMLHttpRequest.send(<em>body</em>) +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt> + <p><em>body</em> {{optional_inline}}</p> + </dt> + <dd> + <p>Данные из параметра body оправляются в запросе через XHR. Это могут быть:</p> + + <ul> + <li>{{domxref("Document")}}, и в этом случае данные будут сериализованы перед отправкой.</li> + <li><code>BodyInit</code>, которые, согласно спецификации <a href="https://fetch.spec.whatwg.org/#bodyinit">Fetch </a>могут быть: {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("ReadableStream")}}, или объектом {{domxref("USVString")}}.</li> + </ul> + </dd> +</dl> + +<p>Лучший способ передать двоичные данные (например при загрузке файлов) - это использование <a href="/en-US/docs/Web/API/ArrayBufferView">ArrayBufferView</a> или <a href="/en-US/docs/Web/API/Blob">Blobs</a> в сочетании с методом<code>send()</code>.</p> + +<p>Если никакого значения не определено в качестве <em>body</em>, то будет использовано значение по-умолчанию: <code>null</code>.</p> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + + + +<p><code>undefined</code>.</p> + +<h3 id="Исключения">Исключения</h3> + +<table> + <thead> + <tr> + <th scope="col">Исключение</th> + <th scope="col">Описание</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>InvalidStateError</code></td> + <td><code>send()</code> уже был вызван для запроса, и/или запрос завершен.</td> + </tr> + <tr> + <td><code>NetworkError</code></td> + <td>Тип запрошенного ресурса - Blob, но метод запроса не <code>GET</code>.</td> + </tr> + </tbody> +</table> + + + +<h2 id="Пример_GET">Пример: GET</h2> + +<pre><code>var xhr = new XMLHttpRequest(); +xhr.open('GET', '/server', true); + +xhr.onload = function () { + // Запрос завершен. Здесь можно обрабатывать результат. +}; + +xhr.send(null); +// xhr.send('string'); +</code>// <code>xhr.send(new Blob()); +// xhr.send(new Int8Array()); +// xhr.send({ form: 'data' }); +// xhr.send(document);</code> +</pre> + +<h2 id="Пример_POST">Пример: POST</h2> + +<pre><code>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'); +</code>// <code>xhr.send(new Blob()); +// xhr.send(new Int8Array()); +// xhr.send({ form: 'data' }); +// xhr.send(document);</code> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatIe('5')}}<sup>[1]</sup><br> + {{CompatIe('7')}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('1.2')}}</td> + </tr> + <tr> + <td><code>send(ArrayBuffer)</code></td> + <td>{{CompatChrome(9)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>{{CompatIe('10')}}</td> + <td>{{CompatOpera('11.60')}}</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>send(ArrayBufferView)</code></td> + <td>{{CompatChrome(22)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("20.0")}}</td> + <td>{{compatUnknown}}</td> + <td>{{compatUnknown}}</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>send(Blob)</code></td> + <td>{{CompatChrome(7)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>{{CompatIe('10')}}</td> + <td>{{CompatOpera('12')}}</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>send(FormData)</code></td> + <td>{{CompatChrome(6)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIe('10')}}</td> + <td>{{CompatOpera('12')}}</td> + <td>{{compatUnknown}}</td> + </tr> + <tr> + <td><code>send(URLSearchParams)</code></td> + <td>{{CompatChrome(59)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("44.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>send(ArrayBuffer)</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{compatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>send(ArrayBufferView)</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{compatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>send(Blob)</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{compatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>send(FormData)</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{compatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>send(URLSearchParams)</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(59)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("44.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Возможность реализуется с помощью <code>ActiveXObject()</code>. Начиная с версии 7 Internet Explorer реализует стандарт <code>XMLHttpRequest</code>.</p> + + + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> +</ul> 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 +--- +<h2 id="Receiving_binary_data_using_JavaScript_typed_arrays" name="Receiving_binary_data_using_JavaScript_typed_arrays">Получение бинарных данных используя JavaScript arrays </h2> + +<p>Свойство responseType объекта XMLHttpRequest можно задать для изменения ожидаемого типа ответа с сервера. Возможные значения: пустая строка (по умолчанию), "arraybuffer", "blob", "document", "json" и "text". Свойство response будет содержать тело сущности в соответствии с типом ответа, как ArrayBuffer, Blob, Document, JSON или string. Это значение равно null, если запрос не завершен или не был успешным.</p> + +<p>В этом примере изображение считывается как двоичный файл и создается 8-разрядный массив целых чисел без знака из необработанных байтов. Обратите внимание, что это не будет декодировать изображение и читать пиксели. Для этого вам понадобится <a href="https://github.com/devongovett/png.js/">библиотека декодирования png</a>.</p> + +<pre class="brush: js notranslate">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); +</pre> + +<p>Альтернатива вышеуказанному методу использует интерфейс {{domxref("Blob")}} для непосредственного построения Blob с данными arraybuffer.</p> + +<pre class="brush: js notranslate">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(); +</pre> + +<p>Также вы можете прочитать двоичный файл как {{domxref ("Blob")}}, установив строку" blob " в свойство responseType.</p> + +<pre class="brush: js notranslate">var oReq = new XMLHttpRequest(); +oReq.open("GET", "/myfile.png", true); +oReq.responseType = "blob"; + +oReq.onload = function(oEvent) { + var blob = oReq.response; + // ... +}; + +oReq.send();</pre> + +<h2 id="Receiving_binary_data_in_older_browsers" name="Receiving_binary_data_in_older_browsers">Получение бинарных данных в старых браузерах</h2> + +<p>Функция load_binary_resource(), показанная ниже, загружает двоичные данные из указанного URL, возвращая их вызывающему объекту.</p> + +<pre class="brush: js notranslate">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; +} +</pre> + +<p>Магия происходит в строке 5, которая переопределяет тип MIME, заставляя браузер рассматривать его как обычный текст, используя пользовательский набор символов. Это говорит браузеру не анализировать его и пропускать байты через необработанные.</p> + +<pre class="brush: js notranslate">var filestream = load_binary_resource(url); +var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7) +</pre> + +<p>The example above fetches the byte at offset <code>x</code> within the loaded binary data. The valid range for <code>x</code> is from 0 to <code>filestream.length-1</code>.</p> + +<p>See <a href="http://web.archive.org/web/20071103070418/http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html">downloading binary streams with XMLHttpRequest</a> for a detailed explanation. See also <a href="/en-US/docs/Code_snippets/Downloading_Files" title="Code_snippets/Downloading_Files">downloading files</a>.</p> + +<h2 id="Получение_бинарных_данных_из_различных_источников">Получение бинарных данных из различных источников</h2> + +<p>Библиотека <a href="https://github.com/jDataView/jBinary">jBinary</a> для работы с бинарными данными в JavaScript позволяет загрузить данные из любого источника, автоматически определяя лучший способ для этого в текущем броузере или Node.js:</p> + +<pre class="brush: js notranslate">jBinary.load(url).then(function (binary) { + // здесь аргумент `binary` может использовться для обработки данных + // в любом формате (строка, массив байтов, структура данных и т. д.) +}); +</pre> + +<h2 id="Sending_binary_data" name="Sending_binary_data">Отправка бинарных данных</h2> + +<p>Метод <code>send</code> объекта XMLHttpRequest был расширен, чтобы обеспечить легкую передачу бинарных данных - теперь он принимает объекты <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="ArrayBuffer"><code>ArrayBuffer</code></a>, {{domxref("Blob")}}, или {{domxref("File")}}.</p> + +<p>В примере ниже на лету создается текстовый файл и отпрвляется методом <code>POST</code> на сервер. Здесь используется обычный текст, но нетрудно представить себе пример с бинарным файлом.</p> + +<pre class="brush: js notranslate">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); +</pre> + +<h2 id="Sending_typed_arrays_as_binary_data" name="Sending_typed_arrays_as_binary_data">Отправка типизированнх массивов как бинарных данных</h2> + +<p>Точно так же можно отправлять типизированные массивы JavaScript.</p> + +<pre class="brush: js notranslate">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); +</pre> + +<p>Здесь создается и отправляется 512-ти байтовый массив из 8-битных целых чисел, н, разумеется, можно использовать любые двоичные данные.</p> + +<div class="note"><strong>Примечание:</strong> Поддержка передачи объектов <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="ArrayBuffer"><code>ArrayBuffer</code></a> с помощью XMLHttpRequest появилась в Gecko 9.0 {{geckoRelease("9.0")}}. <strong>Add information about other browsers' support here.</strong></div> + +<h2 id="Submitting_forms_and_uploading_files" name="Submitting_forms_and_uploading_files">Отправка форм и загрузка файлов</h2> + +<p>См. <a href="/ru/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">этот параграф</a>.</p> + +<h2 id="Firefox-specific_examples" name="Firefox-specific_examples">Примеры для Firefox</h2> + +<p>В этом примере двоичные данные передаются асинхронно методом <code>POST</code> и нестандартным методом Firefox's <code>sendAsBinary()</code>.</p> + +<pre class="brush: js notranslate">var req = new XMLHttpRequest(); +req.open("POST", url, true); +// установите заголовок и тип данных +req.setRequestHeader("Content-Length", 741); +req.sendAsBinary(aBody); +</pre> + +<p>В строке 4 заголовок Content-Length устанавливается в 741, что означает, что размер данных 741 байт. Разумеется, это значение должно соотвествовать реальному размеру данных.</p> + +<p>В строке 5 метод <code>sendAsBinary()</code> начинает запрос.</p> + +<div class="note"><strong>Примечание:</strong> Нестандартный метод <code>sendAsBinary</code> начиная с Gecko 31 {{ geckoRelease(31) }} считается устаревшим и скоро будет удален. Вместо него, как показывалось выше, можно использовать стандартный метод <code>send(Blob data)</code>.</div> + +<p>Кроме того, чтобы отправить бинарные данные можно передать экземплят {{interface("nsIFileInputStream")}} в метод <a href="/en-US/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a>. В этом случае заголовок <code>Content-Length</code> заполнять явно необязательно, поскольку информация получается из потока автоматически:</p> + +<pre class="brush: js notranslate">// Создание потока из файла. +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); +</pre> 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 +--- +<p>{{APIRef('XMLHttpRequest')}}</p> + +<p>Метод <strong>XMLHttpRequest.setRequestHeader()</strong> устанавливает значения HTTP заголовков. Метод <code>setRequestHeader()</code> следует вызывать только после <code>open()</code>, но до <code>send()</code>. Если метод вызывается несколько раз подряд, значения присоединяется к одному и тому же заголовку.</p> + +<p>Если заголовок {{HTTPHeader("Accept")}} не был установлен, то он будет передан в запросе со значением <code>*/*</code> когда будет вызван метод {{domxref("XMLHttpRequest.send", "send()")}}.</p> + +<p>В целях безопасности, некоторые заголовки не могут быть установлены программно. Для более подробной информации, смотрите {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} и {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p> + +<div class="note"> +<p>Для ваших собственных полей, вы можете увидеть исключение "<strong>not allowed by Access-Control-Allow-Headers in preflight response</strong>", когда вы делаете кросс-доменный запрос. В этом случае, вам нужно установить заголовок "Access-Control-Allow-Headers" в ответе на стороне сервера.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">XMLHttpRequest.setRequestHeader(<var>header</var>, <var>value</var>) +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>header</code></dt> + <dd>Имя устанавливаемого заголовка</dd> + <dt><code>value</code></dt> + <dd>Значение, которое будет установлено как тело заголовка</dd> +</dl> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-setRequestHeader()-method', 'setRequestHeader()')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatIe('5')}}<sup>[1]</sup><br> + {{CompatIe('7')}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('1.2')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Эта особенность была реализована через ActiveXObject(). Internet Explorer реализует стандарт XMLHttpRequest начиная с версии 7.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<p><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></p> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p>Доступное только для чтения свойство <code><strong>XMLHttpRequest.status</strong></code>, возвращает числовой <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status">код состояния</a> HTTP ответа <code>XMLHttpRequest</code>.</p> + +<p>До завершения запроса значение <code>status</code> равно 0. Браузеры также сообщают о состоянии 0 в случае ошибок <code>XMLHttpRequest</code>.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">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 + */ +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-status-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG живой стандарт</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузера">Совместимость браузера</h2> + +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div> + +<p>{{Compat("api.XMLHttpRequest.status")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Список <a href="/en-US/docs/Web/HTTP/Response_codes">HTTP response codes</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<div> +<p>Свойство <code><strong>XMLHttpRequest.statusText</strong></code>, доступное только для чтения, возвращает строку <code>DOMString</code>, содержащую сообщение о состоянии ответа, возвращаемое HTTP-сервером. В отличие от <code>XMLHTTPRequest.status</code>, который указывает числовой код состояния, это свойство содержит текст состояния ответа, например «OK» или «Not Found». Если запрос <code>readyState </code>находится в состоянии <code>UNSENT </code>или <code>OPENED</code>, значением <code>statusText </code>будет пустая строка.</p> + +<p>Если в ответе сервера явно не указан текст состояния, для <code>statusText </code>будет принято значение по умолчанию «ОК».</p> +</div> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">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 + */ +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-statustext-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>WHATWG живой стандарт</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузера">Совместимость браузера</h2> + +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div> + +<p>{{Compat("api.XMLHttpRequest.statusText")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Список <a href="/en-US/docs/Web/HTTP/Response_codes">HTTP response codes</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> 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 +--- +<p> </p> + +<p><code>XMLHttpRequest</code> поддерживает как синхронные, так и асинхронные запросы. В основном предпочтительно использовать асинхронные запросы вместо синхронных из-за соображений производительности.</p> + +<p>Синхронный запрос приводит к выполнению кода, который "блокирует" взаимодействие с вкладкой браузера до тех пор, пока запрос не будет полность выполнен, что существенно ухудшает отклик страницы.</p> + +<h2 id="Асинхронные_запросы">Асинхронные запросы</h2> + +<p>Если вы используете асинхронный режим <code>XMLHttpRequest</code>, то после того, как данные будут получены, будет вызвана функция обработчик. Это позволяет браузеру работать нормально пока ваш запрос будет обрабатываться.</p> + +<h3 id="Пример_отправка_запроса_и_получение_файла_ответа">Пример: отправка запроса и получение файла ответа</h3> + +<p><code>Приведём простейший пример асинхронного запроса XMLHttpRequest</code>.</p> + +<pre class="brush: js">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); </pre> + +<p>2 строка. 3 параметр метода <code>open</code> установлен как <code>true</code> для того, чтобы явно указать, что этот запрос будет обрабатываться асинхронно.</p> + +<p>3 строка. Создаётся функция обработчик события <code>onload</code>. Этот обработчик следить за параметром <code>readyState</code>, для того, чтобы определить завершена ли передача данных и если это так и HTTP статус 200, то полученные данные выводятся в консоль. А если в результате передачи данных возникла ошибка, то сообщение об ошибки будет выведено в консоль.</p> + +<p>15 строка. Происходит инициализация отправки запроса. Функция обработчик будет вызываться каждый раз, как будет происходить изменения состояния данного запроса.</p> + +<h3 id="Пример_создание_стандартной_функции_для_чтения_внешних_файлов">Пример: создание стандартной функции для чтения внешних файлов</h3> + +<p>В разных сценариях существует необходимость принимать внешние файлы (ответ от сервера, к примеру, json файл). Это стандартная функция, которая использует<br> + <code>XMLHttpRequest</code> объект асинхронно, чтобы передать прочитанный контент в специальную функцию обработчик.</p> + +<pre class="brush: js">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); +} +</pre> + +<p>Использование:</p> + +<pre class="brush: js">function showMessage(message) { + console.log(message + this.responseText); +} + +loadFile("message.txt", showMessage, "New message!\n\n"); +</pre> + +<p>Сигнатура вспомогательной функции <code>LoadFile</code> следующая: 1 аргумент - URL адрес для запроса (через HTTP GET), 2 аргумент - функция, которая будет вызвана после успешного выполнения ajax запроса и 3 аргумент - список аргументов, которые будут передаваться через XHR объект в функцию, которая была указана во 2 аргументе.</p> + +<p>Строка 1 определяет функцию, которая будет вызвана, когда ajax запрос завершиться успешно. В свою очередь это вызовет функции callback, которая была указана в вызове функции <code>loadFile</code> (то есть функция <code>showMessage</code>) которая была обозначена как свойство <code>XHR</code> объекта (строка 11). Дополнительные аргументы, которые были указаны при вызове функции <code>loadFile</code>, подставляются в вызов callback функции.</p> + +<p>Строка 5 определяет функцию, которая будет вызвана в случаи, если ajax запрос не сможет завершиться успешно.</p> + +<p>Строка 11 сохраняет в <code>XHR</code> объекте функцию, которая будет вызвана после успешного завершения ajax запроса. (эта функция передаётся 2 аргументов в вызове функции <code>loadFile</code>).</p> + +<p>12 строка срезает псевдомассив аргументов, который был передан при вызове функции <code>loadFile</code>. Начиная с 3 аргумента все аргументы будут хранится в массиве arguments объекта <code>xhr</code>, который передаётся в функцию <code>xhrSuccess</code> и в конечном итоге будут использованы при вызове функции <code>showMessage</code>, которая будет вызвана функцией <code>xhrSuccess</code> .</p> + +<p>Строка 15 устанавливает <code>true</code> для 3 параметра, что явно указывает на то, что запрос будет выполняться асинхронно.</p> + +<p>Строка 16 инициализирует запрос.</p> + +<h3 id="Пример_использование_timeout">Пример: использование timeout</h3> + +<p>При использовании асинхронных запросов, можно установить максимальное время ожидания ответа от сервера. Это делается путём установки значения свойства <code>timeout</code> <code>XMLHttpRequest</code> объекта, как показано ниже:</p> + +<pre class="brush: js">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); +}</pre> + +<p>Отметим, что в код была добавлена функция обработчик события <code>ontimeout</code>.</p> + +<p>Использование:</p> + +<pre class="brush: js">function showMessage (message) { + console.log(message + this.responseText); +} + +loadFile("message.txt", 2000, showMessage, "New message!\n"); +</pre> + +<p>2 аргумент функции <code>loadFile</code> устанавливает время ожидание равное 2000ms.</p> + +<div class="note"> +<p><strong>Внимание:</strong> Поддержка <code>timeout</code> была добавлена начиная с {{Gecko("12.0")}}.</p> +</div> + +<h2 id="Synchronous_request">Synchronous request</h2> + +<div class="note"><strong>Note:</strong> 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.</div> + +<p>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.</p> + +<p>All new XHR features such as <code>timeout</code> or <code>abort</code> aren't allowed for synchronous XHR. Doing so would invoke <code>InvalidAccessError</code>.</p> + +<h3 id="Example_HTTP_synchronous_request">Example: HTTP synchronous request</h3> + +<p>This example demonstrates how to make a simple synchronous request.</p> + +<pre class="brush: js">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); +} +</pre> + +<p>Line 3 sends the request. The <code>null</code> parameter indicates that no body content is needed for the <code>GET</code> request.</p> + +<p>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.</p> + +<h3 id="Example_Synchronous_HTTP_request_from_a_Worker">Example: Synchronous HTTP request from a <code>Worker</code></h3> + +<p>One of the few cases in which a synchronous request does not usually block execution is the use of <code>XMLHttpRequest</code> within a <code><a href="/en-US/docs/Web/API/Worker">Worker</a></code>.</p> + +<p><code><strong>example.html</strong></code> (the main page):</p> + +<pre class="brush: html"><!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> +</pre> + +<p><code><strong>myFile.txt</strong></code> (the target of the synchronous <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> invocation):</p> + +<pre>Hello World!! +</pre> + +<p><code><strong>myTask.js</strong></code> (the <code><a href="/en-US/docs/Web/API/Worker">Worker</a></code>):</p> + +<pre class="brush: js">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); + } +}; +</pre> + +<div class="note"><strong>Note:</strong> The effect, because of the use of the <code>Worker</code>, is however asynchronous.</div> + +<p>It could be useful in order to interact in the background with the server or to preload some content. See <a class="internal" href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a> for examples and details.</p> + +<h3 id="Adapting_Sync_XHR_usecases_to_the_Beacon_API">Adapting Sync XHR usecases to the Beacon API</h3> + +<p>There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the <a class="internal" href="/en-US/docs/Web/API/WindowEventHandlers/onunload"><code>window.onunload</code></a> and <a class="internal" href="/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload"><code>window.onbeforeunload</code></a> events. You should consider using the <code>fetch</code> API with <code>keepalive</code> flag. When <code>fetch</code> with <code>keepalive</code> isn't available, you can consider using the <a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> API can support these use cases typically while delivering a good UX.</p> + +<p>The following example (from the <a href="/en-US/docs/Web/API/Navigator/sendBeacon">sendBeacon docs</a>) 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.</p> + +<pre class="brush: js">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); +} +</pre> + +<p>Using the <strong><code>sendBeacon()</code></strong> method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, <strong>without delaying the unload or affecting the performance of the next navigation.</strong></p> + +<p>The following example shows a theoretical analytics code pattern that submits data to a server by using the <strong><code>sendBeacon()</code></strong> method.</p> + +<pre class="brush: js">window.addEventListener('unload', logData, false); + +function logData() { + navigator.sendBeacon("/log", analyticsData); +} +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/Web/Guide/AJAX">AJAX</a></li> + <li><code><a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a></code></li> +</ul> 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 +--- +<div>{{APIRef('XMLHttpRequest')}}</div> + +<p>Свойство <code><strong>XMLHttpRequest.timeout</strong></code> определяет количество миллисекунд, которое запрос будет выполняться, до того, как будет автоматически прерван. Имеет размер <code>unsigned long.</code> Значение по умолчанию - 0, определяет, что таймаута нет. Таймаут не должен быть использован в синхронных запросах XMLHttpRequests в {{Glossary('среде документа')}}, или будет вызвано исключение <code>InvalidAccessError</code>. Когда случается таймаут - вызывается событие <a href="/en-US/docs/Web/Events/timeout">timeout</a>. {{gecko_minversion_inline("12.0")}}</p> + +<dl> + <dd> + <div class="note"><strong>Примечание:</strong> Вы не можете использовать таймаут для синхронных запросов с окном - владельцем.</div> + </dd> + <dd><a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Example_using_a_timeout">Использование таймаута с асинхронными запросами</a></dd> +</dl> + +<p>В Internet Explorer, свойство timeout может быть установлено только после вызова метода <a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a> и до вызова метода <a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a>.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">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);</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-timeout-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Действующий стандарт WHATWG</td> + </tr> + </tbody> +</table> 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 +--- +<p>{{APIRef('XMLHttpRequest')}}</p> + +<p>Свойство <strong>XMLHttpRequest.upload</strong> возвращает объект {{domxref("XMLHttpRequestUpload")}}, представляющий процесс загрузки. Это непрозрачный объект, но так как он является {{domxref("XMLHttpRequestEventTarget")}}, к нему можно добавить обработчики событий.</p> + +<p>Обработчики событий, которые можно добавить к объекту загрузки:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Обработчик</td> + <td class="header">Событие</td> + </tr> + <tr> + <td><code>onloadstart</code></td> + <td>Начало запроса</td> + </tr> + <tr> + <td><code>onprogress</code></td> + <td>Происходит передача данных</td> + </tr> + <tr> + <td><code>onabort</code></td> + <td>Запрос был отменён</td> + </tr> + <tr> + <td><code>onerror</code></td> + <td>При запросе произошла ошибка</td> + </tr> + <tr> + <td><code>onload</code></td> + <td>Запрос завершился</td> + </tr> + <tr> + <td><code>ontimeout</code></td> + <td>Запрос не завершился ко времени, указанному автором</td> + </tr> + <tr> + <td><code>onloadend</code></td> + <td>Запрос завершился (успешно или с ошибкой)</td> + </tr> + </tbody> +</table> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-upload-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Живой стандарт WHATWG</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Свойство</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Начальная поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Свойство</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Начальная поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> 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 +--- +<p>Это инструкция по использованию <code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code>, для взаимодействия через HTTP-протокол.</p> + +<p>Для отправки HTTP-запроса нужно создать XMLHttpRequest-объект, открыть URL и отправить запрос. После выполнения запроса можно получить и обработать тело и статус ответа.</p> + +<pre class="brush: js notranslate">function reqListener () { + console.log(this.responseText); +} + +var oReq = new XMLHttpRequest(); +oReq.onload = reqListener; +oReq.open("get", "yourFile.txt", true); +oReq.send();</pre> + +<h2 id="Типы_запросов">Типы запросов</h2> + +<p>Запрос, сделанный посредством <code>XMLHttpRequest</code>, может загружать данные синхронно или асинхронно. Это определяется третьим аргументом метода <a href="/en-US/docs/DOM/XMLHttpRequest#open()" title="DOM/XMLHttpRequest#open()">open()</a> объекта XMLHttpRequest: если он равен true или не определён, запрос выполнится асихнронно, в противном случае — синхронно. Детальное обсуждение и демонстрации обоих типов запросов могут быть найдены на странице <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" title="Synchronous and Asynchronous Requests">synchronous and asynchronous requests</a>. Использовать синхронные запросы приходится очень редко.</p> + +<div class="note"><strong>Примечание:</strong> Начиная с Gecko 30.0 {{ geckoRelease("30.0") }} не рекомендуется использовать синхронные запросы, так как они отрицательно влияют на пользовательский опыт.</div> + +<h2 id="Обработка_запросов">Обработка запросов</h2> + +<p>Есть несколько типов <a href="http://www.w3.org/TR/XMLHttpRequest2/#response">атрибутов ответа</a>, определённых спецификацией W3C XMLHttpRequest. Они сообщают запрашивающему важную информацию о статусе ответа. В некоторых случаях обработка нетекстовых типов ответа может потребовать дополнительных действий и анализа; эти случаи описаны ниже.</p> + +<h3 id="Анализ_и_использование_свойства_responseXML">Анализ и использование свойства <code>responseXML</code></h3> + +<p>Если скачать XML документ с помощью <code>XMLHttpRequest</code>, в свойстве <code>responseXML</code> будет объект DOM, содержащим распарсенный XML документ. Напрямую работать с ним будет сложно. Есть четыре основных способа анализа этого документа:</p> + +<ol> + <li>Использовать <a href="/ru/docs/XPath" title="XPath">XPath</a>, чтобы указывать на его части.</li> + <li>Использовать <a href="/ru/docs/JXON" title="JXON">JSON</a>, чтобы превратить его в дерево объектов JavaScript.</li> + <li>Вручную <a href="/ru/docs/Parsing_and_serializing_XML">парсить и превращать XML</a> в строки или объекты. </li> + <li>Использовать <a href="/ru/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a>, чтобы превращать деревья DOM в строки или файлы.</li> + <li>Можно использовать <a href="/ru/docs/JavaScript/Reference/Global_Objects/RegExp">регулярные выражения</a>, если вы заранее знаете содержимое документа. Возможно, стоит удалить переносы строк, если вы используете регулярные выражения с оглядкой на переносы. Однако этот метод стоит использовать только в крайнем случае, ведь если XML изменится, хотя бы чуть-чуть, то регулярное выражение, скорее всего, не справится.</li> +</ol> + +<h3 id="Анализ_и_использование_свойства_responseText_содержащего_HTML_документ">Анализ и использование свойства <code>responseText,</code> содержащего <code>HTML</code> документ</h3> + +<div class="note"><strong>Примечание:</strong> Спецификация W3C <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> позволяет парсить HTML через свойство <code>XMLHttpRequest.responseXML</code>. Подробнее об этом написано в статье <a href="/ru/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML в XMLHttpRequest</a>.</div> + +<p>Если получить содержимое HTML страницы с помощью <code>XMLHttpRequest</code>, свойство <code>responseText</code> будет строкой, содержащей "кашу" изо всех HTML тэгов, с которой будет очень сложно работать. Есть три основных способа анализа этой HTML строки:</p> + +<ol> + <li>Использовать свойство <code>XMLHttpRequest.responseXML<strong>.</strong></code></li> + <li>Вставить содержимое в тело <a href="/ru/docs/Web/API/DocumentFragment">фрагмента документа</a> с помощью <code>fragment.body.innerHTML</code> и работать уже с этим фрагментом.</li> + <li>Можно использовать <a href="/ru/docs/JavaScript/Reference/Global_Objects/RegExp">регулярные выражения</a>, если вы заранее знаете содержимое документа.</li> +</ol> + +<h2 id="Работа_с_двоичными_данными">Работа с двоичными данными</h2> + +<p>Хотя обычнно <code>XMLHttpRequest</code> используется, чтобы получать и загружать текст, с его помощью можно обмениваться и двоичными данными. Есть несколько проверенных способов заставить <code>XMLHttpRequest</code> посылать двоичные данные. Они используют метод <code>XMLHttpRequest</code>.overrideMimeType().</p> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); +oReq.open("GET", url, true); +// получаем необработанные данные в виде двоичной строки +oReq.overrideMimeType("text/plain; charset=x-user-defined"); +/* ... */ +</pre> + +<p>Спецификация XMLHttpRequest Level 2 добавляет новые атрибуты <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute" title="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute">responseType</a>, значительно облегчающие работу с двоичными данными:</p> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); + +oReq.open("GET", url, true); +oReq.responseType = "arraybuffer"; +oReq.onload = function(e) { + var arraybuffer = oReq.response; // not responseText + /* ... */ +} +oReq.send(); +</pre> + +<p>Больше примеров можно найти на странице <a href="/ru/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Отправка и получение двоичных данных</a>.</p> + +<h2 id="Отслеживание_процесса_загрузки">Отслеживание процесса загрузки</h2> + +<p><code>XMLHttpRequest</code> позволяет подписываться на различные события, которые могут произойти в процессе обработки запроса. Сюда входят периодические уведомления о состоянии запроса, сообщения об ошибках и так далее. </p> + +<p>Отслеживание событий процесса загрузки следует спецификации Web API <a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">progress events</a>: эти события реализуют интерфейс {{domxref("ProgressEvent")}}.</p> + +<pre class="brush:js notranslate">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("Пользователь отменил загрузку."); +}</pre> + +<p>На строчках 3-6 добавляются обработчики для различных событий, происходящих при передаче данных с помощью <code>XMLHttpRequest</code>.</p> + +<div class="note"><strong>Примечение:</strong> Обработчики нужно добавлять до того, как вызвать <code>open(). В противном случае события не будут обработаны.</code></div> + +<p>Обработчик события <code>progress</code>, представленный функцией <code>updateProgress()</code> в этом примере, получает количество байт, которое должно быть передано, и количество уже переданных байт в полях <code>total</code> и <code>loaded.</code> Но если поле <code>lengthComputable</code> равняется <code>false</code>, значит, длина сообщения неизвестна и будет отображаться как ноль.</p> + +<p>События <code>progress</code> есть и у входящих, и у исходящих передач. События входящих передач создаются для объекта <code>XMLHttpRequest</code>, как показано в примере выше; исходящих —для <code>XMLHttpRequest.upload:</code></p> + +<pre class="brush:js notranslate">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(); +</pre> + +<div class="note"><strong>Примечание:</strong> события progress недоступны для протокола <code>file: .</code></div> + +<div class="note"><strong>Примечание</strong>: На данный момент в событиях progress есть открытые ошибки, которые влияют на Firefox 25 для <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=908375">OS X</a> и <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786953">Linux</a>.</div> + +<div class="note"> +<p><strong>Примечание:</strong> Начиная с {{Gecko("9.0")}}, можно быть уверенным, что события progress будут приходить для каждого пакета данных, включая последний пакет в случаях, когда он получен, и соединение закрыто прежде, чем будет создано событие progress. В этом случае, событие progress автоматическисоздастся, когда будет получено событие load для этого пакета. Это позволяет следить за процессом загрузки с помощью только событий progress.</p> +</div> + +<div class="note"> +<p><strong>Примечание:</strong> В {{Gecko("12.0")}}, если событие progress вызвано с <code>responseType</code> "moz-blob", значение ответа будет {{domxref("Blob")}}, содержащим все данные, полученные на текущий момент.</p> +</div> + +<p>Также возможно засечь все три события, завершающие загрузку (<code>abort</code>, <code>load</code>, or <code>error</code>) через событие <code>loadend</code>:</p> + +<pre class="brush:js notranslate">req.addEventListener("loadend", loadEnd, false); + +function loadEnd(e) { + alert("Передача данных завершена (но мы не знаем, успешно ли)."); +} +</pre> + +<p>Заметьте, что событие loadend никак не сообщает, что вызвало конец передачи. Впрочем, это никак не мешает использовать его, если нужно сделать что-то вне зависимости от причины.</p> + +<h2 id="Отправка_форм_и_загрузка_файлов">Отправка форм и загрузка файлов</h2> + +<p>Есть два способа передать данные форм с помощью экземпляра <code>XMLHttpRequest</code>:</p> + +<ul> + <li>используя только AJAX</li> + <li>используя API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a></li> +</ul> + +<p><strong>Второй путь</strong> — самый простой и быстрый, но данные, полученные с его помощью, нельзя превратить в строки с помощью <a href="/ru/docs/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify</a>. <strong>Первый путь</strong>, наоборот, самый сложный, но зато самый гибкий и мощный.</p> + +<h3 id="Используя_только_XMLHttpRequest">Используя только <code>XMLHttpRequest</code></h3> + +<p>Отправка форм без <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> не требует других API, кроме <code><a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader">FileReader</a> </code>для загрузки файлов.</p> + +<h4 id="Краткое_введение_в_методы_отправки">Краткое введение в методы отправки</h4> + +<p>Есть четыре способа послать HTML {{ HTMLElement("form") }}:</p> + +<ul> + <li>использовать метод <code>POST</code> и установить атрибут <code>enctype</code> = <code>application/x-www-form-urlencoded</code> (он установлен по умолчанию);</li> + <li>использовать метод <code>POST</code> и установить атрибут <code>enctype</code> = <code>text/plain</code>;</li> + <li>использовать метод <code>POST</code> и установить атрибут <code>enctype</code> = <code>multipart/form-data</code>;</li> + <li>использовать метод <code>GET </code>(в этом случае атрибут <code>enctype</code> будет проигнорирован).</li> +</ul> + +<p>Рассмотрим отправку формы с двумя полями, <code>foo</code> и <code>baz</code>. Если использовать метод <code>POST</code>, сервер получит строку, похожую на одну из показанных ниже, в зависимости от типа кодирования, который вы используете:</p> + +<ul> + <li> + <p>Метод: <code>POST</code>; тип кодирования: <code>application/x-www-form-urlencoded</code> (по умолчанию):</p> + + <pre class="notranslate">Content-Type: application/x-www-form-urlencoded + +foo=bar&baz=The+first+line.&#37;0D%0AThe+second+line.%0D%0A</pre> + </li> + <li> + <p>Метод: <code>POST</code>; тип кодирования: <code>text/plain</code>:</p> + + <pre class="notranslate">Content-Type: text/plain + +foo=bar +baz=The first line. +The second line.</pre> + </li> + <li> + <p>Метод: <code>POST</code>; тип кодирования: <code>multipart/form-data</code>:</p> + + <pre style="height: 100px; overflow: auto;">Content-Type: multipart/form-data; boundary=---------------------------314911788813839 + +-----------------------------314911788813839 +Content-Disposition: form-data; name="foo" + +bar +-----------------------------314911788813839 +Content-Disposition: form-data; name="baz" + +The first line. +The second line. + +-----------------------------314911788813839--</pre> + </li> +</ul> + +<p>Instead, if you are using the <code>GET</code> method, a string like the following will be simply added to the URL:</p> + +<pre class="notranslate">?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> + +<h4 id="Небольшой_классический_фреймворк">Небольшой классический фреймворк</h4> + +<p>Все данные эффекты достигаются с помощью веб браузера, когда вы отправляете {{ HTMLElement("form") }}. Но если вам требуется выполнить все операции с помощью лишь JavaScript, то вам придется проинструктировать интерпретатор обо <em>всех</em> выполняемых операциях. Для, того чтобы отправлять формы с помощью <em>чистого</em> AJAX, потребуется слишком комплексное описание, чтобы тут рассуждать о нем во всех подробностях. В связи с этим, мы опубликовали здесь <strong>полный(но все еще дидактический) фреймворк, </strong>который все же способен использовать все четыре способа отправки и, так же поддерживает <strong>файловую загрузку.</strong></p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: html notranslate"><!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></pre> +</div> + +<p>Для того, чтобы произвести его тест, создайте страницу с названием <strong>register.php</strong> (и укажите атрибут <code>action</code> одной из данных форм) и добавьте данный <em>минимальный</em> контент</p> + +<pre class="brush: php notranslate"><?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); + +</pre> + +<p>Синтаксис данного скрипта представлен ниже:</p> + +<pre class="syntaxbox notranslate">AJAXSubmit(myForm);</pre> + +<div class="note"><strong>Заметка:</strong> Данный фреимворк использует <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API для передачи загрузочных файлов. Это новыйAPI и его невозможно использовать IE9 и ниже. В связи с этим, загрузки только с использованием AJAX воспринимаются, лишь как <strong>экспериментальные</strong>. Если вам не требуется загружать бинарные файлы, то данный фреимворк работает в большинстве современных браузерах.</div> + +<div class="note"><strong>Note:</strong> The best way to send binary content is via <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> or <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> in conjuncton with the <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29" title="/en-US/docs/DOM/XMLHttpRequest#send()"><code>send()</code></a> method and possibly the <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()" title="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> method of the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API. But, since the aim of this script is to work with a <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, we used the <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> method in conjunction with the <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29" title="/en-US/docs/DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString()</code></a> method of the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> 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 <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API.</div> + +<div class="note"><strong>Note:</strong> The non-standard <code>sendAsBinary </code>method is considered deprecated as of Gecko 31 {{ geckoRelease(31) }} and will be removed soon. The standard <code>send(Blob data)</code> method can be used instead.</div> + +<h3 id="Используя_объекты_FormData">Используя объекты FormData</h3> + +<p>The <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> constructor lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. 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 <code>submit()</code> 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 <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="Using FormData Objects">Using FormData Objects</a> page. For didactic purpose only we post here <strong>a <em>translation</em> of <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous example</a> transformed so as to make use of the <code>FormData</code> API</strong>. Note the brevity of the code:</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: html notranslate"><!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></pre> +</div> + +<div class="note"><strong>Note:</strong> As we said,<strong> {{domxref("FormData")}} objects are not <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> objects</strong>. If you want to stringify a submitted data, use <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous <em>pure</em>-AJAX example</a>. Note also that, although in this example there are some <code>file</code> {{ HTMLElement("input") }} fields, <strong>when you submit a form through the <code>FormData</code> API you do not need to use the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API also</strong>: files are automatically loaded and uploaded.</div> + +<h2 id="Получить_дату_последнего_изменения">Получить дату последнего изменения</h2> + +<pre class="brush: js notranslate">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();</pre> + +<h3 id="Do_something_when_last_modified_date_changes">Do something when last modified date changes</h3> + +<p>Let's create these two functions:</p> + +<pre class="brush: js notranslate">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(); +}</pre> + +<p>Test:</p> + +<pre class="brush: js notranslate">/* 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() + "!"); +});</pre> + +<p>If you want to know <strong>whether <em>the current page</em> has changed</strong>, please read the article about <a href="/en-US/docs/Web/API/document.lastModified" title="/en-US/docs/Web/API/document.lastModified"><code>document.lastModified</code></a>.</p> + +<h2 id="Межсайтовые_XMLHttpRequest">Межсайтовые XMLHttpRequest</h2> + +<p>Современные браузеры поддерживают межсайтовые запросы по стандарту <a href="/en-US/docs/HTTP_access_control" title="HTTP access control">Access Control for Cross-Site Requests</a>. Для этого, серверу необходимо дополнительно указывать заголовок <code>origin</code>. В противном случае, выбрасывается исключение <code>INVALID_ACCESS_ERR</code>.</p> + +<h2 id="Обход_кеширования">Обход кеширования</h2> + +<p>Для кросс-браузерного обхода кеширования в конец URL-запроса достаточно добавить случайную строку в GET-параметры, то есть сразу после «?», например:</p> + +<pre class="notranslate">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 +</pre> + +<p>Таким образом, каждый новый запрос будет происходить по новому URL и кеширование страницы не будет производиться.</p> + +<p>Автоматизировать этот подход можно следующим сниппетом:</p> + +<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); + +oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true); +oReq.send(null);</pre> + +<h2 id="Безопасность">Безопасность</h2> + +<p>{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> to <code>allAccess</code> to give specific sites cross-site access. This is no longer supported.")}}</p> + +<p>{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}</p> + +<p>The recommended way to enable cross-site scripting is to use the <code>Access-Control-Allow-Origin </code> HTTP header in the response to the XMLHttpRequest.</p> + +<h3 id="XMLHttpRequests_being_stopped">XMLHttpRequests being stopped</h3> + +<p>If you end up with an XMLHttpRequest having <code>status=0</code> and <code>statusText=null</code>, it means that the request was not allowed to be performed. It was <code><a href="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent" title="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent">UNSENT</a></code>. A likely cause for this is when the <a href="http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin" style="outline: 1px dotted; outline-offset: 0pt;"><code>XMLHttpRequest</code> origin</a> (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then <code>open()</code>. 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 <code>open()</code>) 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.</p> + +<h2 id="Using_XMLHttpRequest_from_JavaScript_modules_XPCOM_components">Using XMLHttpRequest from JavaScript modules / XPCOM components</h2> + +<p>Instantiating <code>XMLHttpRequest</code> from a <a href="/en-US/docs/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">JavaScript module</a> or an XPCOM component works a little differently; it can't be instantiated using the <code>XMLHttpRequest()</code> 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.</p> + +<pre class="brush: js notranslate">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); +</pre> + +<p>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.</p> + +<pre class="brush:js notranslate">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"] + .getService(Components.interfaces.nsIAppShellService) + .hiddenDOMWindow; +var oReq = new XMLHttpRequest();</pre> + +<h2 id="Дополнительные_ссылки">Дополнительные ссылки</h2> + +<ol> + <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">MDN AJAX introduction</a></li> + <li><a href="/en-US/docs/HTTP_access_control" title="HTTP access control">HTTP access control</a></li> + <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL" title="How to check the security state of an XMLHTTPRequest over SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li> + <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li> + <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li> + <li><a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li> + <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li> + <li><a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Specification</a></li> + <li><a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">Web Progress Events specification</a></li> +</ol> 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 +--- +<p>{{APIRef('XMLHttpRequest')}}</p> + +<p>Свойство<strong> XMLHttpRequest.withCredentials </strong>это {{jsxref("Boolean")}} который определяет, должны ли создаваться кросс-доменные <code>Access-Control</code> запросы с использованием таких идентификационных данных как cookie, авторизационные заголовки или TLS сертификаты. Настройка <code>withCredentials</code> бесполезна при запросах на тот же домен.</p> + +<p>Вдобавок, этот флаг также используется для определения, будут ли проигнорированы куки переданные в ответе. Значение по умолчанию - <code>false</code>. XMLHttpRequest с другого домена не может установить cookie на свой собственный домен в случае, если перед созданием этого запроса флаг <code>withCredentials</code> не установлен в <code>true</code>. Сторонние cookies, полученные с помощью установки <code>withCredentials</code> в true, всё равно будут соблюдать политику одинакового домена и, следовательно, не могут быть получены запрашивающим скриптом через <a href="/en-US/docs/Web/API/Document/cookie">document.cookie</a> или из заголовков ответа.</p> + +<div class="note"> +<p><strong>Примечание: </strong>Это свойство не влияет на запросы, отправленные на тот же домен.</p> +</div> + +<div class="note"> +<p><strong>Примечание: </strong><font face="Consolas, Liberation Mono, Courier, monospace">О</font>тветы с другого домена не могут установить куки для своего собственного домена в случае, если перед созданием запроса флаг <code>withCredentials</code> не установлен в <code>true</code>, несмотря на значение заголовков <code>Access-Control-</code>.</p> +</div> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js notranslate">var xhr = new XMLHttpRequest(); +xhr.open('GET', 'http://example.com/', true); +xhr.withCredentials = true; +xhr.send(null);</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td>Действующий стандарт WHATWG</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatChrome(3)}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[2]</sup></td> + <td>{{CompatIe(10)}}<sup>[1]</sup></td> + <td>{{CompatOpera(12)}}</td> + <td>{{CompatSafari("4")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer версий 8 и 9 поддерживает кросс-доменные запросы (CORS) используя <a href="https://msdn.microsoft.com/en-us/library/cc288060%28VS.85%29.aspx">XDomainRequest</a>.</p> + +<p>[2] Начиная с Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8), Gecko больше не позволяет использовать аттрибут <code>withCredentials</code> при проведении синхронных запросов. Попытки это сделать выбросят исключение <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code>.</p> 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 +--- +<h4 id="XMLHttpRequest"><strong>XMLHttpRequest</strong></h4> + +<p><span class="seoSummary">Конструктор <code><strong>XMLHttpRequest()</strong></code> создаёт новый объект {{domxref("XMLHttpRequest")}}.</span></p> + +<p>Для получения подробной информации о том, как использовать <code>XMLHttpRequest</code>, см. <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest(); +</pre> + +<h3 id="Параметры">Параметры</h3> + +<p>Нет.</p> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>Новый объект {{domxref("XMLHttpRequest")}}. Этот объект должен быть подготовлен вызовом функции {{domxref("XMLHttpRequest.open", "open()")}} перед вызовом {{domxref("XMLHttpRequest.send", "send()")}} для отправки запроса на сервер.</p> + +<h2 id="Нестандартный_синтаксис_Firefox">Нестандартный синтаксис Firefox </h2> + +<p>В Firefox 16 в конструктор добавлен нестандартный параметр, который позволяет включать анонимный режим (см. {{Bug("692677")}}). Установка флага <code>mozAnon</code> в значение <code>true</code> по сути напоминает конструктор <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a>, описанный в более старых версиях спецификации XMLHttpRequest.</p> + +<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest(<var>paramsDictionary</var>);</pre> + +<h3 id="Параметры_нестандартные">Параметры (нестандартные)</h3> + +<dl> + <dt><code>objParameters</code> </dt> + <dd>Существует два флага, которые можно установить: + <dl> + <dt><code>mozAnon</code></dt> + <dd>Boolean: Установка этого флага в значение <code>true</code> приведет к тому, что браузер не будет раскрывать {{Glossary("origin")}} и <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">учётные данные пользователя</a> при получении ресурсов. Главным образом это означает, что файлы {{Glossary("Cookie", "cookies")}} не будут отправлены, если они не добавлены явно с использованием setRequestHeader.</dd> + <dt><code>mozSystem</code></dt> + <dd>Boolean: Установка этого флага в значение <code>true</code> позволяет устанавливать межсайтовые соединения не требуя подключения сервера с помощью {{Glossary("CORS")}}. <em>Требует установки флага <code>mozAnon: true</code>, т.к. это нельзя сочетать с отправкой файлов cookie или других учетных данных пользователя. Это работает только в привилегированных (проверенных) приложениях ({{Bug ("692677")}})); не работает на произвольных веб-страницах, загруженных в Firefox.</em></dd> + </dl> + </dd> +</dl> + +<h2 id="См._также">См. также</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML в XMLHttpRequest</a></li> +</ul> |