JavaScript. Подробное руководство, 6-е издание

22.6.2. Загрузка двоичных объектов

Глава 18 охватывает тему выполнения HTTP-запросов с помощью объекта XMLHttpRequest и также описывает некоторые новые возможности, определяемые проектом спецификации «XMLHttpRequest Level 2» (XHR2). На момент написания этих строк спецификация XHR2 определяла способ загрузки содержимого URL-адреса в виде двоичного объекта, но реализации броузеров пока не поддерживали его. Поскольку программный код не может быть протестирован, этот раздел является лишь схематическим описанием прикладного интерфейса, предусматриваемого спецификацией XHR2 для работы с двоичными объектами.

Пример 22.9 демонстрирует простой способ загрузки двоичного объекта из Веб. Сравните его с примером 18.2, который загружает содержимое URL-адреса как простой текст.

Пример 22.9, Загрузка двоичного объекта с помощью объекта XMLHttpRequest

  // Запрашивает методом GET содержимое URL в виде двоичного объекта и передает его
  // указанной функции обратного вызова. Этот программный код не тестировался: на тот
  // момент, когда он был написан, броузеры еще не поддерживали этот прикладной интерфейс,
  function getBlob(url, callback) {
   var xhr = new XMLHttpRequest; // Создать новый объект XHR
   xhr.open("GET", url); // Указать URL-адрес
   xhr.responseType = "blob" // Желательно получить двоичный объект
   xhr.onload = function { // onload проще, чем onreadystatechange
   callback(xhr.response): // Передать ответ функции обратного вызова
   } // Отметьте: .response, а не .responseText
   xhr.send(null); // Послать запрос
  }

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

22.6.3. Конструирование двоичных объектов

Двоичные объекты часто представляют фрагменты данных из внешних ресурсов, таких как локальные файлы, URL-адреса или базы данных. Но иногда вебприложению требуется создать собственный двоичный объект, чтобы выгрузить его на веб-сервер, сохранить в файле или в базе данных, или передать его фоновому потоку выполнения. Создать объект Blob из имеющихся данных можно с помощью объекта BlobBuilder:

  // Создать новый объект BlobBuilder
  var bb = new BlobBuilder;

  // Добавить в двоичный объект строку и отметить ее конец символом NUL
  bb.append("Данный двоичный объект содержит этот текст и 10 ” +
   "32-битных целых чисел с прямым порядком следования байтов.");
  bb.append("\0"); // Добавить символ NUL, чтобы отметить конец строки

  // Сохранить некоторые данные в объекте ArrayBuffer
  var ab = new ArrayBuffer(4*10);
  var dv = new DataView(ab);
  for(var і = 0: і < 10; i++) dv.setlnt32(i*4,i);

// Добавить ArrayBuffer в двоичный объект
  bb.append(ab);
  // Теперь извлечь полученный двоичный объект, указав искусственный М1МЕ-тип
  var blob = bb.getBlob("x-optional/mime-type-here");

В начале этого раздела мы узнали, что двоичные объекты имеют метод slice, который разбивает их на фрагменты. Точно так же имеется возможность объединять двоичные объекты, передавая их методу append объекта BlobBuilder.

22.6.4. URL-адреса, ссылающиеся на двоичные объекты

В предыдущих разделах было показано, как можно получить или создать двоичный объект. Теперь мы поговорим о том, что можно делать с полученными или созданными двоичными объектами. Самое простое, что можно сделать с двоичным объектом, - это создать URL-адрес, ссылающийся на него. Такой URL-адрес можно использовать везде, где используются обычные URL-адреса: в элементах DOM, в таблицах стилей и даже при работе с объектом XMLHttpRequest.

Создаются URL-адреса, ссылающиеся на двоичные объекты, с помощью функции createObjectURL. На момент написания этих строк проект спецификации и Firefox 4 помещали эту функцию в глобальный объект URL, а броузер Chrome и библиотека Webkit добавляли свой префикс к имени этого объекта, называя его webkitURL. Ранние версии спецификации (и ранние реализации броузеров) помещали эту функцию непосредственно в объект Window. Чтобы получить возможность переносимым образом создавать URL-адреса, ссылающиеся на двоичные объекты, можно определить вспомогательную функцию, как показано ниже:

  var getBlobURL = (window.URL && URL.createObjectURL.bind(URL)) ||
   (window.webkitURL && webkitURL.createObjectURL.bind(webkitURL)) ||
   window.createObjectURL;

Фоновые потоки выполнения также могут использовать этот прикладной интерфейс и обращаться к тем же функциям, в том же объекте URL (или webkitURL).

Если передать двоичный объект функции createObjectURL, она вернет URL-адрес (в виде обычной строки). Этот адрес начинается с названия схемы blob://, за которой следует короткая строка, ссылающаяся на двоичный объект с некоторым уникальным идентификатором. Обратите внимание, что эти URL-адреса совершенно не похожи на URL-адреса data://, которые представляют свое собственное содержимое. URL-адрес, ссылающийся на двоичный объект, - это просто ссылка на объект Blob, хранящийся в памяти броузера или на диске. URL-адреса вида blob:// также отличаются от URL-адресов file://, которые ссылаются непосредственно на файл в локальной файловой системе, давая возможность увидеть путь к файлу, позволяя просматривать содержимое каталогов и тем самым затрагивая проблемы безопасности.

Пример 22.10 демонстрирует два важных приема. Во-первых, он реализует «площадку для сброса», которая обрабатывает события механизма буксировки мышью (drag-and-drop), имеющие отношение к файлам. Во-вторых, когда пользователь сбросит один или более файлов на эту «площадку», с помощью функции createObjectURL для каждого из файлов будет создан URL-адрес и элемент <img>, чтобы отобразить миниатюры изображений, на которые ссылаются эти URL-адреса.