Чтение онлайн

на главную - закладки

Жанры

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

18.1.4. События, возникающие в ходе выполнения НТТР-запроса

В примерах выше для определения момента завершения HTTP-запроса использовалось событие «readystatechange». Проект спецификации «ХНН2» определяет более удобный набор событий, уже реализованный в Firefox, Chrome и Safari. В этой новой модели событий объект

XMLHttpRequest
генерирует различные типы событий на разных этапах выполнения запроса, благодаря чему отпадает необходимость проверять значение свойства
readyState
.

Далее описывается, как генерируются эти новые события в броузерах, поддерживающих их. Когда вызывается метод

send,
один раз возбуждается событие «load-start».
В ходе загрузки ответа сервера объект
XMLHttpRequest
возбуждает серию событий «progress», обычно каждые 50 миллисекунд или около того, которые можно использовать для обратной связи с пользователем, чтобы информировать его о ходе выполнения запроса. Если запрос завершается очень быстро, событие «progress» может и не возбуждаться. По завершении запроса возбуждается событие «load».

Завершение запроса не всегда означает успешное его выполнение, поэтому обработчик события «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. Метатель
Фантастика:
боевая фантастика
попаданцы
рпг
фэнтези
фантастика: прочее
постапокалипсис
4.80
рейтинг книги
Метатель

Доктор. Заново

Афанасьев Семён
1. Доктор
Фантастика:
фэнтези
альтернативная история
5.86
рейтинг книги
Доктор. Заново

Имперец. Том 4

Романов Михаил Яковлевич
3. Имперец
Фантастика:
попаданцы
альтернативная история
аниме
5.00
рейтинг книги
Имперец. Том 4

Смерч войны

Робертс Эндрю
1. Историческая библиотека
Проза:
военная проза
5.00
рейтинг книги
Смерч войны

Справочник по лечению зависимостей

коллектив авторов 1
Справочная литература:
путеводители
5.00
рейтинг книги
Справочник по лечению зависимостей

Потомок бога 3

Решетов Евгений Валерьевич
3. Локки
Фантастика:
аниме
фэнтези
5.00
рейтинг книги
Потомок бога 3

Универсальный энциклопедический справочник

Исаева Елена Львовна
Справочная литература:
справочники
энциклопедии
5.00
рейтинг книги
Универсальный энциклопедический справочник

Неизвестные страницы истории российского флота

Виленов Влад
Научно-образовательная:
история
военное дело: прочее
военная история
5.00
рейтинг книги
Неизвестные страницы истории российского флота

Избрание сочинения в трех томах. Том второй

Кочетов Всеволод Анисимович
Проза:
советская классическая проза
5.00
рейтинг книги
Избрание сочинения в трех томах. Том второй

Полная история государства Российского в одном томе

Карамзин Николай Михайлович
Научно-образовательная:
история
5.00
рейтинг книги
Полная история государства Российского в одном томе

Место под солнцем

Марклунд Лиза
Анника Бенгтзон
Детективы:
криминальные детективы
6.00
рейтинг книги
Место под солнцем

Очерки времен и событий из истории российских евреев. 1945 – 1970 гг. Книга 6

Кандель Феликс Соломонович
Научно-образовательная:
история
5.00
рейтинг книги
Очерки времен и событий из истории российских евреев. 1945 – 1970 гг. Книга 6

Гвардия. (Дилогия)

Мусаниф Сергей Сергеевич
65. В одном томе
Фантастика:
научная фантастика
8.57
рейтинг книги
Гвардия. (Дилогия)

Глаза ночи

Бейн Диана
Любовные романы:
любовно-фантастические романы
эро литература
5.88
рейтинг книги
Глаза ночи