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/sending_and_receiving_binary_data | |
| 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/sending_and_receiving_binary_data')
| -rw-r--r-- | files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html | 171 |
1 files changed, 171 insertions, 0 deletions
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> |
