Свойства ответа

Свойства ответа.

Есть три типа свойств ответа, с помощью которых мы обрабатываем возвращенную запросом информацию:

- response. Это свойство общего назначения. Оно возвращает ответ на запрос согласно значению атрибута responseType;

- responseText. Возвращает ответ на запрос в текстовом формате;

- responseXML. Возвращает ответ на запрос в форме XML-документа.

События

Помимо load в спецификации описаны еще несколько событий для объекта XMLhttpRequest:

- loadstart. Срабатывает в начале запроса;

- progress. Срабатывает периодически во время отправки и загрузки данных;

- abort. Срабатывает в случае прерывания запроса;

- error. Срабатывает, если во время запроса происходит ошибка;

- load. Срабатывает по завершении запроса;

- timeout. Если указано значение timeout, то срабатывает в случае, если запрос не удалось завершить в течение указанного времени;

- loadend. Срабатывает по завершении запроса (как в случае успеха, так и в случае ошибки).

Вероятно, самое интересное событие из перечисленных — это progress.

Оно срабатывает приблизительно каждые 50 мс, информируя о состоянии запроса. Проверяя событие progress, мы можем сообщать пользователю о каждом шаге процесса и создавать профессиональные коммуникационные приложения.

Листинг 13.4. Информирование о ходе выполнения запроса

Function initiate(){

Databox=document. getElementById(‘databox’);

Var button=document. getElementById(‘button’); button. addEventListener(‘click’, read, false);

}

Function read(){

Var url="trailer. ogg";

Var request=new XMLhttpRequest();

Request. addEventListener(‘loadstart’,start, false);

Request. addEventListener(‘progress’,status, false);

Request. addEventListener(‘load’,show, false);

Request. open("GET", url, true);

Request. send(null);

}

Function start(){

Databox. innerHTML=’<progress value="0" max="100">0%</progress>’;

}

Function status(e){

If(e. lengthComputable){

Var per=parseInt(e. loaded/e. total*100);

Var progressbar=databox. querySelector("progress");

Progressbar. value=per;

Progressbar. innerHTML=per+’%';

}

}

Function show(e){

Databox. innerHTML=’Готово’;

}

Window. addEventListener(‘load’, initiate, false);

В коде из листинга 13.4 для мониторинга запроса мы используем три события: loadstart, progress и load. Событие loadstart вызывает функцию start(), для того чтобы впервые показать на экране индикатор прогресса. Пока выполняется загрузка файла, событие progress успевает несколько раз сработать и вызвать функцию status(). Эта функция сообщает о прогрессе запроса посредством элемента <progress> и значений свойств из интерфейса ProgressEvent.

Наконец, когда загрузка файла завершается, срабатывает событие load и функция show() выводит на экран строку «Готово».

Для добавления нового элемента <progress> в документ мы использовали innerHTML. Хотя это удобно для нашего конкретного примера, в реальных приложениях так делать не рекомендуется. Элементы обычно добавляются в DOM с использованием JavaScript-метода createElement() и appendChild().

Событие progress объявляется в спецификации как часть интерфейса ProgressEvent. Это общий интерфейс для всех API, включающий в себя три ценных свойства. Они возвращают информацию о процессе, наблюдение за которым осуществляется с помощью данного события:

- lengthComputable. Это всего лишь булево значение, возвращающее true в случае, когда показатели прогресса поддаются вычислению, и false — в противном случае. В наших примерах мы используем его для проверки того, что остальные свойства имеют допустимые значения;

- loaded. Возвращает размер части данных (в байтах), уже загруженной с сервера или на сервер;

- total. Возвращает общий размер данных (в байтах), которые должны быть загружены с сервера или на сервер.

В зависимости от того, какое подключение к Интернету вы используете, чтобы увидеть работающий индикатор прогресса, вам может потребоваться запросить загрузку очень большого файла. В коде из листинга 13.4 мы использовали URL-адрес видеофайла, с которым работали в главе 5 во время знакомства с API мультимедиа. Вы можете выбрать какой-либо другой файл или загрузить этот по адресу http://www.minkbooks.com/content/trailer.ogg.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *