Есть три типа свойств ответа, с помощью которых мы обрабатываем возвращенную запросом информацию:
— 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.
Добавить комментарий