 |
1.2 Чтение текста из локального сервера
|
|
|
|
В примере №1 показано чтение текстового файла из локального сервера с помощью технологии AJAX. Особенностью этого примера является то, что в нем, помимо решения основной задачи – получения текстовых данных из сервера и вывода их на текущей странице, решаются также задачи получения и вывода дополнительной информации учебного и отладочного характера:
Оглавление
Пример 1
<! DOCTYPE html>
< html>
< head>
< title> Чтение текста из локального сервера с помощью технологии AJAX< /title>
< /head>
< body>
< div id=" myDiv" />
< script>
var myDiv=document. getElementById(" myDiv" );
var xhr;
if(window. XMLHttpRequest) {
xhr=new XMLHttpRequest();
} else { // IE5, IE6
xhr=new ActiveXObject(" Microsoft. XMLHTTP" );
}
myDiv. innerHTML=" Состояние 0 (UNSENT): Объект xhr создан; < br> ";
xhr. open(" GET", " http: //zykov/data. txt? r=" +Math. random(), true);
xhr. onreadystatechange=handleStateChange;
xhr. send();
myDiv. innerHTML+=" Скрипт продолжает работать< br> ";
function handleStateChange() {
switch(this. readyState) {
case 1: myDiv. innerHTML+=
" Состояние 1 (OPEND): Метод open() успешно вызван; < br> "; break;
case 2: myDiv. innerHTML+=
" Состояние 2 (HEADERS RECEIVED): получены HTTP-заголовки ответа: < br> " +
" Content-Type: < span > " + this. getResponseHeader(" Content-Type" )+
" < /span< br> " +
" Date: < span > " + this. getResponseHeader(" Date" )+ " < /span> " +
this. statusText+ " < br> "; break;
case 3: myDiv. innerHTML+=
" Состояние 3 (LOADING): тело ответа получено; " +this. statusText+" < br> "; break;
case 4: { myDiv. innerHTML+=
" Состояние 4 (DONE) передача данных завершена " + this. statusText+" < br> ";
if(this. status==200) {
try {
resp=this. responseText;
myDiv. innerHTML+=" Сервер передал:
< span > " +resp+" < /span> < br> ";
}
catch(e) {
myDiv. innerHTML+=" Ошибка чтения ответа: " +e. name. toString()+" " +
e. message;
}
} else myDiv. innerHTML+=" Ошибка получения данных: статус: " +this. status;
}
}
}
< /script>
< /body>
< /html>
|
|
|
При запуске примера №1 выполняются следующие действия:
· создается объект xhr – экземпляр объекта XMLHttpRequest;
· создается ссылка myDiv на элемент < div />, который используется для вывода данных в окно браузера;
· в объект myDiv заносятся данные о начальном состоянии запроса к серверу;
· с помощью метода open() объекта xhr задаются следующие значения параметров соединения с сервером:
§ метод – GET;
§ адрес файла на сервере – " http: //zykov/data. txt";
§ значение флага асинхронного режима – true;
· в качестве обработчика события onreadystatechange указывается функция handleStateChange;
· с помощью метода send() объекта xhr посылается запрос на сервер.
Отметим, что использование в методе open() аргумента URL, имеющего значениее " http: //zykov/data. txt? r=" +Math. random(), позволяет передать на сервер не только url-адрес текстового файла, но и случайное число, генерируемое методом random() объекта Math. Поскольку при этом каждый вызов будет отличаться от предыдущего, браузер будет передавать клиенту данные не из своего кэша, а непостредственно из сервера. Этот режим можно использовать, например, при отладке скрипта для разных значений данных на сервере.
При каждом изменении состояния запроса (свойство readyState), начиная с состояния 1, происходит вызов функции handleStateChange(), которая осуществляет такие действия:
· вывод данных о текущем состоянии запроса (для состояний 1, 2, 3 и 4 – для пояснения и отладки):
§ номер и наименование состояния;
§ краткую характеристику состояния;
§ значение статуса ответа сервера (свойство statusText) – для тех состояний для которых браузер передает этот статус;
· в состоянии 2 (HEADERS RECEIVED) получает и выведит в окно браузера значения следующих HTTP-заголовков ответа:
§ Content-Type;
§ Date;
· в состоянии 4 (DONE), в котором завершается обмен данными с сервером, проверяет статус ответа сервера. Если он равен 200, т. е. обмен завершен успешно:
§ проверяет с помощью оператора try/catch правильность прочитанных их сервера с помощью свойства responseText данных;
|
|
|
§ Если данные прочитаны правильно – заносит их в элемент myDiv для вывода в окно браузера;
§ в противном случае – выводит сообщение " Ошибка чтения ответа" и свойства объекта Error;
· если же в состоянии 4 статус ответа сервера не равен 200 – выводит сообщение " Ошибка получения данных" и статус ответа.
При выполнении примера №1 в окно браузера были выведены следующие результаты его работы:
Состояние 0 (UNSENT): Объект xhr создан;
Состояние 1 (OPEND): Метод open() успешно вызван;
Скрипт продолжает работать
Состояние 2 (HEADERS RECEIVED): получены HTTP-заголовки ответа:
Content-Type: text/plain
Date: Fri, 11 Dec 2015 15: 33: 34 GMT OK
Состояние 3 (LOADING): тело ответа получено; OK
Состояние 4 (DONE) передача данных завершена OK
Сервер передал: Привет, клиент!
В случае выполнения примера №1 в синхронном режиме (async=false) были получены следующие результаты его работы:
Состояние 0 (UNSENT): Объект xhr создан;
Состояние 4 (DONE) передача данных завершена OK
Сервер передал: Привет, клиент!
Скрипт продолжает работать
Эти результаты работы в синхронном режиме показывают следующее:
· событие readystatechange не вызывается при изменении состояния запроса;
· скрипт после отправления запроса на сервер ожидает получения данных из сервера и только после этого продолжает свою работу.
Поэтому синхронный режим в дальнейшем использоваться не будет.
В примере №1a решается та же задача, что и в примере №1 – получение данных из текстового файла сервера. Но в нем, в отличие от примера №1 не задействованы средства пояснения и отладки – это пример уже отлаженного скрипта, поэтому объем его кода значительно меньше:
Оглавление
Пример 1a
<! DOCTYPE html>
< html>
< head>
< title> Чтение текста из локального сервера< /title>
< /head>
< body>
< div id=" myDiv" />
< script>
var myDiv=document. getElementById(" myDiv" );
var xhr=new XMLHttpRequest();
xhr. open(" get", " http: //zykov/data. txt? r=" +Math. random());
xhr. onreadystatechange=handleReadyState;
xhr. send();
function handleReadyState() {
if(this. readyState==this. DONE& & this. status==200) {
myDiv. innerHTML+=" < span > " + this. responseText+
" < /span> ";
}
}
< /script>
< /body>
< /html>
Результат работы примера №1a:
Привет, клиент!
Пример №1b отличается от примера №1a тем, что в нем использованы возможности, указанные в новой спецификации объекта XMLHttpRequest (см. подраздел 1. 1), а именно:
|
|
|
· события продвижения (вместо события readystatechange):
§ load – возникает, когда передача данных сервером успешно завершена;
§ error – возникает в случает возникновения ошибки при передачи данных из сервера;
· свойство response (вместо свойства responseText), которое возвращает данные, полученные от сервера, в виде строки, если значение свойства responseType не задано (его значение по умолчанию – строка).
Оглавление
Пример 1b
<! DOCTYPE html>
< html>
< head>
< title> Чтение текста из локального сервера< /title>
< /head>
< body>
< div id=" myDiv" />
< script>
var myDiv=document. getElementById(" myDiv" );
var xhr=new XMLHttpRequest();
xhr. open(" get", " http: //zykov/data. txt? r=" +Math. random());
xhr. onerror=function(e) {
myDiv. innerHTML+=" Error";
}
xhr. onload=function() {
myDiv. innerHTML+=" < span > " + this. response+
" < /span> ";
}
xhr. send();
< /script>
< /body>
< /html>
Результат работы примера №1b такой же, как результат работы примера №1a:
Привет, клиент!
Отметим, что в примере №1b вместо события load можно использовать событие progress и получать данные по частям (пакетам). Но в данном случае данные из сервера имеют небольшой размер и результат работы будет такой же, как и при использовании события load:
Привет, клиент!
Необходимо сказать, что приведенные результаты работы примеров №1, №1a и №1b были получены только при использовании браузера Internet Explorer. На остальных ведущих браузерах примеры №1 и №1a не дадут никакого разультата, а пример №1b даст сообщение " Error". Это связано с несколько различной трактовкой браузерами политики " одинакового произхождения" (" the same origin" ), которая была введена для междоменных передач данных с целью повышения их безопастности, и которую поддерживает технология AJAX (см. подраздел 1. 3).
Оглавление
|
|
|
