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
особенно полезны в обработчиках событий, возникающих в ходе выполнения запроса:
Кроме событий, которые удобно использовать для мониторинга загрузки НТТР-ответа, спецификация «ХНН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) {
// Следит за ходом выполнения операции выгрузки и позволяет отвергнуть
// выгрузку файла. Можно было бы обрабатывать сразу несколько параллельных
// операций выгрузки, но это значительно усложнило бы