ОГЛАВЛЕНИЕ
1Технология AJAX
1.1 Особенности технологии AJAX
1.2 Использование объекта XMLHttpRequest
1.2.1 Создание объекта xmlHttp
1.2.2 Формирование запроса к серверу
1.2.3 Получение данных из сервера
Пример 2
Пример 3
1Технология AJAX
1.1 Особенности технологии AJAX
AJAX (Asynchronous JavaScript And XML - асинхронный JavaScript и XML)
представляет собой технологию, позволяющую при необходимости в фоновом режиме
(не прерывая работы пользователя и незаметно для него) выполнять запросы к
серверу и получать дополнительные данные для обновления отдельных частей
Web-страницы, тем самым исключая необходимость повторной загрузки страницы.
Например, выполнять на стороне сервера проверку правильности заполнения данных
пользоваетелем по мере их ввода.
Без использования технологии AJAX для решения этой
задачи имеются такие возможности:
- выполнять проверку на стороне сервера, но в этом случае необходимо
формировать новую Web-страниц, что увеличивает загрузку сети и увеличивает
время ожидания клиента;
- выполнять проверку на стороне клиенте, но при этом зачастую необходимо
хранить большой объем информации на компьютере клиента.
Для применения AJAX необходимы следующие компоненты:
- JavaScript (основной компонент);
- объект XMLHttpRequest;
- серверные технологии (например, PHP).
Первоначально технологию AJAX разработала фирма Microsoft как объект ActiveX
для браузера Internet Explorer. Затем фирма Mozilla создала объект
XMLHttpRequest с (почти) идентичными API, который в настоящее время
поддерживается всеми современными браузерами.
Рекомендации организации W3C аналогичной
функциональности пока не применены ни в одном браузере.
1.2 Использование объекта XMLHttpRequest
Объект XMLHttpRequest дает возможность отправлять
асинхронные HTTP-запросы из кода JavaScript серверу, принимать от него ответы и
обновлять отдельные части Web-страницы, не прерывая работу пользователя. Имеет
следующие методы и свойства:
- abort() - останавливает выполнение текущего запроса;
- getAllResponseHeaders() - возвращает все HTTP-заголовки ответа в виде
строки;
- getResponseHeader(header) - возвращает указанный HTTP-заголовок ответа в
виде строки;
- open(method, URL [, async_flag [, userName [. password ]]]) -
инициализирует параметры запроса, где:
- method - один из методов обмена данными с сервером: наиболее часто
используются GET и POST, но разрешены также методы HEAD, PUT или DELETE;
- URL - абсолютный или относительный URL-адрес сервера;
- async_flag (необязательнлый параметр) - значение true означает асинхронный режим работы с сервером:
скрипт, послав запрос серверу, продолжает свою работу (значение по умолчанию),
значение false означает синхронный режим работы с сервером: скрипт, послав
запрос серверу, приостанавливает свою работу, ожидая ответа от сервера;
- userName (необязательнлый параметр) - имя пользователя для аутентификации,
если параметр равен Null или "" и сайт требует аутентификации, то появляется
окно login;
- password (необязательнлый параметр) - пароль пользователя для
аутентификации, если равен Null или "", то игнорируется;
- send(data) - выполняет запрос, данные указываются только для методов POST
или PUT;
- setRequestHeader(level, value) - указывает имя и значение HTTP-заголовка в
запросе;
- onreadystatechange - используется для установки функции обратного вызова,
которая будет обслуживать изменения состояния запроса;
- readyState - возвращает состояние запроса:
- 0 - не инициализирован;
- 1 - выполняется подготовка запроса;
- 2 - запрос отправлен;
- 3 - выполняется обмен;
- 4 - обмен завершен.
- responseText - возвращает ответ сервера в виде строки;
- responseXML - возвращает ответ сервера в формате XML;
- responseStream - возвращает ответ сервера в виде двоичных данных;
- status - возвращает HTTP-код состояния запроса;
- statusText - возвращает сообщение о состоянии запроса.
Использование методов и свойств объекта XMLHttpRequest
приведено в примере № 2, в котором
выполняется получение текстовых данных из локального сервера, и в примере
№ 3, в котором выполняется
получение случайных чисел из удаленного сервера. В этих примерах осуществляется:
- создание объекта xmlHttp;
- формирование запроса к серверу;
- получение данных из сервера.
1.2.1 Создание объекта xmlHttp
Создание объекта xmlHttp осуществляется с помощью
функции createxmlHttp().
Поскольку объект xmlHttp создается в обоих примерах
(№ 1 и
№ 2), оператор присвоения,
вызывающий функцию createxmlHttp() и сама функция
описаны во внешнем файле ajax.js:
xmlHttp=createxmlHttp();
function createxmlHttp()
{
try
{
var xmlHttp=new XMLHttpRequest(); //var делает переменную локальльной
}
catch(e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
}
if(!xmlHttp) alert("Объект xmlHttp не создан");
else return xmlHttp;
}
Функция createxmlHttp() содержит конструкцию
try/catch, которая используется для проверки того,
выполняется ли некоторый код JavaScpipt без ошибок:
try
{
// Проверяемый код
}
catch(e)
{
// Обработка ошибки
}
Проверяемый код помещается в блок try{}. Если при
выполнении кода произошла ошибка (возникла исключительная ситуация), то
управление передается блоку catch(e){}, который
перехватывает возникшее исключение и обрабатывает ошибку. При этом исключение
не доходит до интерпретатора JavaScpipt и поэтому не сообщается пользователю.
Если в блоке try{} код выполняется без ошибок, то
блок catch(e){} управление не получает вовсе.
Как отмечалось выше, современные браузеры
поддерживают работу с XMLHttpRequest. Однако это не
относится к браузерам IE версии 6 и ниже. Поэтому функция
createxnlHttp() сначала пытается создать объект
xmlHttp с помощью класса
XMLHttpRequest (блок try{}).
Если при этом возникает исключительлная ситуация, управление передается в блок
catch(e){}, где делается попытка создать объект
xmlHttp уже с помощью объекта
ActiveXObject.
Если объект и при этом создать не удается, то
выводится сообщение о том, что объект xmlHttp не
создан.
1.2.2 Формирование запроса к серверу
После создания объекта xmlHttp можно использовать
его методы и свойства для организации запроса к серверу. Это делается с помощью
функции process(), которая как и функция
createxnlHttp() используется в примерах
№ 2 и
№ 3 и хранится в файле
ajax.js:
function process()
{
if(xmlHttp)
{
try
{
xmlHttp.open("GET",serverAddr+serverPar,true);
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.send(null);
}
catch(e)
{
alert("Невозможно соединится с сервером:\n"+e.toString()+
"\n"+e.description);
}
}
}
Функция process() сначала проверяет, создан ли
объект xmlHttp. Если создан, то выполняются следующие
действия:
- С помощью метода open() задаются значения
параметров соединения с сервером:
- метод - GET;
- адрес сервера и передаваемые параметры указываются с помощью переменных
serverAddr и serverPar;
- режим обмена - асинхронный.
- С помощью свойства onreadystatechange указывается
обработчик изменений состояния запроса - функция handleStateChange;
- С помощью метода send() посылается запрос на сервер;
- С помощью конструкции try{}/catch(e){} проверяется, не возникла ли ошибка
при выполнении вышеописанных действий по созданию и отправлению запроса на
сервер.
При возникновении исключительной ситуации на экран выводится сообщение
о невозможности соединения с сервером, к которому добавляется перехваченное
сообщение e, преобразованное в строку.
Имеется две возможности преобразования
e:
- с помощью метода toString();
- с помощью свойства description.
Функция process() использует обе эти возможности.
При этом в случае, например, неправильного задания URL-адреса сервера на экране появляются
следующие сообщения:
Невозможно соединится с сервером
[object Error]
Отказано в доступе
1.2.3 Получение данных из сервера
Ajax скрипты получение данных из сервера выполняется по разному в примере
№2 и в примере
№3, поэтому будет рассмотрено
отдельно.
Пример 2
<HTML>
<HEAD>
<TITLE>Чтение текста из сервера с помощью AJAX</TITLE>
<SCRIPT SRC="ajax.js"></SCRIPT>
<SCRIPT>
serverAddr="http://zykov/data.txt";
serverPar="";
function handleStateChange()
{
myDiv=document.getElementById("div");
if(xmlHttp.readyState==1)
{
myDiv.innerHTML+="Состояние запроса:1 (подготовка к отправлению)";
try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"<BR/>"; }
catch(e) { myDiv.innerHTML+="<BR/>"; }
}
else
{
if(xmlHttp.readyState==2)
{
myDiv.innerHTML+="Состояние запроса:2 (отправлен)";
try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"<BR/>"; }
catch(e) { myDiv.innerHTML+="<BR/>"; }
}
else
{
if(xmlHttp.readyState==3)
{
myDiv.innerHTML+="Состояние запроса:3 (идет обмен)";
try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"<BR/>"; }
catch(e) { myDiv.innerHTML+="<BR/>"; }
}
else
{
if(xmlHttp.readyState==4)
{
myDiv.innerHTML+="Состояние запроса:4 (обмен завершен)";
try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"<BR/>"; }
catch(e) { myDiv.innerHTML+="<BR/>"; }
if(xmlHttp.status==200)
{
try
{
resp=xmlHttp.responseText;
myDiv.innerHTML+="<P>Сервер передал:"+resp;
}
catch(e) { alert("Ошибка чтения ответа: "+e.description); }
}
else { alert("Ошибка получения данных\n статус: "+xmlHttp.statusText);}
}
}
}
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="process()">
<DIV ID="div" />
</BODY>
</HTML>
Поскольку технология AJAX требует использования Web-сервера, он должен быть запущен до выполнения примера.
Необходимо также отметить, что текстовые данные, если
они являются кириллицей, должны быть сохранены на сервере в кодировке UTF-8.
Фукция handleStateChange()
с помощью свойства readyState проверяет
текущее состояние запроса и при его изменении выводит на экран в тэг <DIV>
с помощью свойства innerHTML такие данные: номер
состояния, его текстовое значение и статус. Текстовое значение статуса
определяется с помощью свойства statusText объекта
xmlHttp. Поскольку не для всех состояний запроса оно
доступно, применяется конструкция try/catch(e).
Вывод всех состояний запроса сделан с учебной
целью. Для получения данных достаточно проанализировать состояние 4 ("обемен
данными завершен"), что и сделано в Ajax примере
№ 2.
Затем в состоянии 4 с помощью свойства
status определяется, нормально ли закончился обмен
данными с сервером. Если статус равен 200 (текстовое значение "OK"), что
означает, что операции с сервером закончились успешно, делается попытка чтение
данных, возвращенных сервером. Если ошибки нет - данные выводятся на экран, в
виде свойства innerText тэга <DIV>.
В случае возникновения ошибки на экран выводится
сообщение "Ошибка чтения ответа" с указанием дополнительных данных с помощью
свойства e.description.
Если сервер передает другое значение статуса, что
означает, что обмен произошел с ошибками, на экран выводится соответствующее
сообщение с указанием статуса ошибки в текстовом виде.
При выполнении всех операций в примере без
ошибок на экран будут выведены следующие данные:
cостояние запроса:1 (подготовка к отправлению)
Состояние запроса:2 (отправлен), статус: OK
Состояние запроса:3 (идет обмен), статус: OK
Состояние запроса:4 (обмен завершен), статус: OK
Сервер передал: Привет, клиент!
Если необходимо осуществить чтение данных, находящихся на сервере в
формате XML, например, из файла data.xml содержащего такие данные:
<?xml version="1.0" ?>
<name>Robert Sheckly</name>,
необходимо, помимо указания нового адреса файла -
serverAddr="http://zykov/data.xml", заменить в
функции
handleStateChange()
строку
resp=xmlHttp.responseText;
строкой
resp=xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
Тогда вместо сообщения
Сервер передал: Привет, клиент!
появится сообщение
Сервер передал: Robert Sheckly
Пример 3 имеет ajax форму на javascript чтения случайного числа из удаленного сервера. В коде происходит Ajax запрос на получение случайного числа.
<HTML>
<HEAD>
<TITLE>Чтение случайных чисел из удаленного сервера с помощью AJAX/TITLE>
<SCRIPT>
serverAddr="http://www.random.org/integers/";
serverPar="?num=1&min=1&max=25&col=1&base=10&format=plain";
function handleStateChange()
{
myDiv=document.getElementById("div");
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
try { myDiv.innerHTML+=xmlHttp.responseText; }
catch(e) { alert("Ошибка чтения ответа: "+e.toStrintg()); }
}
else { alert("Ошибка получения данных\n статус: "+xmlHttp.statusText);}
}
}
</SCRIPT>
<SCRIPT SRC="ajax.js"></SCRIPT>
</HEAD>
<BODY onLoad="process()">
<DIV ID="div" />
</BODY>
</HTML>
В примере 3 осуществляется получение случайных чисел с удаленного сервера с
помощью технологии AJAX: в переменную
serverAddr заносится URL-адрес удаленного сервера
("http://www.random.org/integers/"), который снабжает клиентов настоящими
случайными числами, а в переменную serverPar - строку
"?num=1&min=1&max=20&col=1&base=10&format=plain", задающую значения следующих
параметров запроса на получение случайных чисел:
- num - количество получаемых чисел;
- min - минимальное число диапазона;
- max - максимальное число диапазона;
- col - количество столбцов для вывода случайных чисел на экран;
- base - основание системы счисления случайных чисел;
- format - формат представления случайных чисел:
- plain - в виде простого текста;
- html - в виде HTML-документа.
Функция handleStateChange() не содержит кода,
осуществляющего вывод на экран названия и статус различных состояний запроса.
В результате работы скрипта при каждом запросе на
экран выводится одно случайное число в диапазоне от 1 до 25.
