Занятие 3. Загрузка данных из внешних источников

Опубликовано пользователем Бессонов Л.В. 25.03.2010г.

Для получения данных из внешних источников возможно использовать объект XMLHttpRequest. Данный объект был создан в дополнение к технологии DHTML компанией Microsoft и в дальнейшем был реализован на браузерах других фирм. XMLHttpRequest позволяет получать данные в различных форматах (несмотря на то, что в названии имеется XML).

Создание объекта XMLHttpRequest

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

  1. function getXmlHttp(){
  2. var xmlhttp;
  3. try {
  4. xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  5. } catch (e) {
  6. try {
  7. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  8. } catch (E) {
  9. xmlhttp = false;
  10. }
  11. }
  12. if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  13. xmlhttp = new XMLHttpRequest();
  14. }
  15. return xmlhttp;
  16. }

Синхронный режим получения данных

В синхронном режиме происходит ожидание получения данных от сервера (или другого источника) и браузер (страничка) перестаёт отвечать на запросы на это время. Пример:

  1. var xmlhttp = getXmlHttp()
  2. xmlhttp.open('GET', '/xhr/test.html', false);
  3. xmlhttp.send(null);
  4. if(xmlhttp.status == 200) {
  5. alert(xmlhttp.responseText);
  6. }

В первой строке вызывается функция создания объекта. Во второй строке задаются параметры запроса в т.ч. имя запрашиваемого файла. В третьей строке запрос отправляется. Далее происходит ожидание и обработка результата запроса. В данном случае проверяется свойствоstatus — код ответа сервера, при получении файлов не по http протоколу (например из локального файла) проверять данный код не нужно. Содержимое файла возвращается в responseText. Более подробно об отдельных методах данного объекта — далее.

Асинхронный режим получения данных

Пример:

  1. var xmlhttp = getXmlHttp();
  2. xmlhttp.open('GET', '/xhr/test.html', true);
  3. xmlhttp.onreadystatechange = function() {
  4. if (xmlhttp.readyState == 4) {
  5. if(xmlhttp.status == 200) {
  6. alert(xmlhttp.responseText);
  7. }
  8. }
  9. };
  10. xmlhttp.send(null);

В данном случае происходит задание обработчика onreadystatechange для отслеживания последующих событий. При вызове обработчика проверяются свойства readyState и status. Их описание ниже.

Класс XMLHttpRequest

Методы

Метод

Описание

abort()

Отменяет текущий запрос, удаляет все заголовки, ставит текст ответа сервера в null.

getAllResponseHeaders()

Возвращает полный список HTTP-заголовков в виде строки. Заголовки разделяются знаками переноса (CR+LF).
Если флаг ошибки равен true, возвращает пустую строку.
Если статус 0 или 1, вызывает ошибку INVALID_STATE_ERR.

getResponseHeader(headerName)

Возвращает значение указанного заголовка.
Если флаг ошибки равен true, возвращает null.
Если заголовок не найден, возвращает null.
Если статус 0 или 1, вызывает ошибку INVALID_STATE_ERR.

open(method, URL, async, userName, password)

Определяет метод, URL и другие опциональные параметры запроса;
параметр async определяет, происходит ли работа в асинхронном режиме.
Последние три параметра необязательны.

send(content)

Отправляет запрос на сервер.

setRequestHeader(label, value)

Добавляет HTTP-заголовок к запросу.

overrideMimeType(mimeType)

Позволяет указать mime-type документа, если сервер его не передал или передал неправильно.
Внимание: метод отсутствует в Internet Explorer!

 

Свойства

Свойство

Тип

Описание

onreadystatechange

EventListener

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

readyState

unsigned short

Текущее состояние объекта (0 — не инициализирован, 1 — открыт, 2 — отправка данных, 3 — получение данных и 4 — данные загружены)

responseText

DOMString

Текст ответа на запрос.
Если статус не 3 или 4, возвращает пустую строку.

responseXML

Document

Текст ответа на запрос в виде XML, который затем может быть обработан посредством DOM.
Если статус не 4, возвращает null.

status

unsigned short

HTTP-статус в виде числа (404 — «Not Found», 200 — «OK» и т. д.)

statusText

DOMString

Статус в виде строки («Not Found», «OK» и т. д.).
Если статус не распознан, браузер пользователя должен вызвать ошибку INVALID_STATE_ERR.

Задание

  1. Модифицировать пример с закладками из предыдущего занятия для загрузки в каждую из закладок файла с помощью XMLHttpRequest в синхронном режиме.
  2. Модифицировать пример с закладками из предыдущего занятия для загрузки в каждую из закладок файла с помощью XMLHttpRequest в асинхронном режиме.
  3. (*) Выделить код для получения данных в асинхронном режиме в отдельную функцию, принимающую имя файла и функцию-обработчик (функция вызывается только при полностью загруженном файле или ошибке его загрузки с параметром – объектом XMLHttpRequest). И вторую функцию – принимающую название файла и идентификатор div’а в который необходимо загрузить содержимое файла и использующую первую для получения данных.

Баннер SGU.RU