Вход/Регистрация
JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид

Шрифт:

Завершение запроса не всегда означает успешное его выполнение, поэтому обработчик события «load» должен проверять код состояния в объекте

XMLHttpRequest
, чтобы убедиться, что был принят НТТР-код «200 ОК», а не «404 Not Found», например.

Существуют три разные ситуации, когда HTTP-запрос оканчивается неудачей, которым соответствуют три события. Если предельное время ожидания ответа истекло, генерируется событие «timeout». Если выполнение запроса было прервано, генерируется событие «abort». (О предельном времени ожидания и о методе

abort
подробнее рассказывается в 18.1.5.) Наконец, выполнению запроса могут препятствовРть другие ошибки в сети, такие как слишком большое количество переадресаций, и в этих случаях генерируется событие «error».

Для каждого запроса броузер может возбуждать только по одному событию «load», «abort», «timeout» и «error». Проект спецификации «ХНН2» требует, чтобы броузеры возбуждали событие «loadend» после одного из этих событий. Однако на момент написания этих строк событие «loadend» не было реализовано ни в одном из броузеров.

Для регистрации обработчиков всех этих событий, возникающих в ходе выполнения запроса, можно использовать метод

addEventListener
объекта
XMLHttpRequest
. Если каждое из этих событий обрабатывается единственным обработчиком, эти обработчики обычно проще установить, присвоив их соответствующим свойствам объекта, таким как
onprogress
и
onload
. Определяя наличие этих свойств, можно даже проверить поддержку соответствующих событий в броузере:

if ("onprogress" in (new XMLHttpRequest)) {

// События, возникающие в ходе выполнения запроса, поддерживаются

}

Объект события, связанный с этими событиями, возникающими в ходе выполнения запроса, в дополнение к свойствам обычного объекта

Event
, таким как
type
и
timestamp
, добавляет три полезных свойства. Свойство
loaded
определяет количество байтов, переданных к моменту возбуждения события. Свойство
total
содержит общий объем (в байтах) загружаемых данных, определяемый из заголовка «Content-Length», или 0, если объем содержимого не известен. Наконец, свойство
lengthComputable
содержит значение true, если общий объем содержимого известен, и false - в противном случае. Очевидно, что свойства
total
и
loaded
особенно полезны в обработчиках событий, возникающих в ходе выполнения запроса:

request.onprogress = function(e) {

if (e.lengthComputable)

progress.innerHTML = Math.round(100*e.loaded/e.total) + ”% Выполнено";

}

18.1.4.1. События, возникающие в ходе выгрузки

Кроме событий, которые удобно использовать для мониторинга загрузки НТТР-ответа, спецификация «ХНН2» также определяет события для мониторинга выгрузки HTTP-запроса. В броузерах, реализующих эту возможность, объект

XMLHttpRequest
имеет свойство
upload
. Значением свойства
upload
является объект, определяющий метод
addEventListener
и полный набор свойств-событий хода выполнения операции выгрузки, таких как
onprogress
и
onload
. (Однако этот объект не определяет свойство
onreadystatechange
: в процессе выгрузки генерируются только эти новые события.)

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

XMLHttpRequest
обработчик
х.onprogress
позволяет вести мониторинг хода выполнения загрузки ответа. А свойство
х.upload.onprogress
– мониторинг хода выполнения выгрузки запроса.

Пример 18.11 демонстрирует, как использовать событие «progress», генерируемое в ходе выгрузки запроса, для организации обратной связи с пользователем. Этот пример также демонстрирует, как получать объекты

File
с применением механизма буксировки (drag-and-drop) и как с помощью объекта
FormData
выгружать сразу несколько файлов в одном запросе
XMLHttpRequest
. На момент написания этих строк спецификации, определяющие эти особенности, находились в состоянии проектирования и этот пример работал не во всех броузерах.

Пример 18.11. Мониторинг хода выполнения операции выгрузки

// Отыскивает все элементы с классом "fileDropTarget" и регистрирует

// обработчики событий механизма DnD, чтобы они могли откликаться

// на операции буксировки файлов. При сбросе файлов на эти элементы

// они выгружают их на URL-адрес, указанный в атрибуте data-uploadto.

whenReady(function {

var elts = document.getElementsByClassName("fileDropTarget");

for(var і = 0; і < elts.length; i++) {

var target = elts[i];

var url = target.getAttribute("data-uploadto");

if (!url) continue;

createFileUploadDropTarget(target, url);

}

function createFileUploadDropTarget(target, url) {

// Следит за ходом выполнения операции выгрузки и позволяет отвергнуть

// выгрузку файла. Можно было бы обрабатывать сразу несколько параллельных

// операций выгрузки, но это значительно усложнило бы

// отображение хода их выполнения,

  • Читать дальше
  • 1
  • ...
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: