Сайт о телевидении

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 приведено в примере , в котором выполняется получение текстовых данных из локального сервера, и в примере , в котором выполняется получение случайных чисел из удаленного сервера. В этих примерах осуществляется:

• создание объекта xmlHttp;
• формирование запроса к серверу;
• получение данных из сервера.

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

Создание объекта xmlHttp осуществляется с помощью функции createxmlHttp() . Поскольку объект xmlHttp создается в обоих примерах ( и ), оператор присвоения, вызывающий функцию 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() используется в примерах

и и хранится в файле 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-адреса сервера на экране появляются следующие сообщения:

Невозможно соединится с сервером
Отказано в доступе

1.2.3 Получение данных из сервера

Ajax скрипты получение данных из сервера выполняется по разному в примере и в примере , поэтому будет рассмотрено отдельно.

Чтение текста из сервера с помощью AJAX


serverAddr="http://zykov/data.txt";
serverPar="";
function handleStateChange()
{
myDiv=document.getElementById("div");
if(xmlHttp.readyState==1)
{
myDiv.innerHTML+="Состояние запроса:1 (подготовка к отправлению)";

"; }
catch(e) { myDiv.innerHTML+="
"; }
}
else
{
if(xmlHttp.readyState==2)
{
myDiv.innerHTML+="Состояние запроса:2 (отправлен)";
try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"
"; }
catch(e) { myDiv.innerHTML+="
"; }
}
else
{
if(xmlHttp.readyState==3)
{
myDiv.innerHTML+="Состояние запроса:3 (идет обмен)";
try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"
"; }
catch(e) { myDiv.innerHTML+="
"; }
}
else
{
if(xmlHttp.readyState==4)
{
myDiv.innerHTML+="Состояние запроса:4 (обмен завершен)";
try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"
"; }
catch(e) { myDiv.innerHTML+="
"; }
if(xmlHttp.status==200)
{
try
{
resp=xmlHttp.responseText;
myDiv.innerHTML+="

Сервер передал:"+resp;
}
catch(e) { alert("Ошибка чтения ответа: "+e.description); }
}
else { alert("Ошибка получения данных\n статус: "+xmlHttp.statusText);}
}
}
}
}
}

Поскольку технология AJAX требует использования Web-сервера, он должен быть запущен до выполнения примера.

Необходимо также отметить, что текстовые данные, если они являются кириллицей, должны быть сохранены на сервере в кодировке UTF-8.
Фукция handleStateChange() с помощью свойства readyState проверяет текущее состояние запроса и при его изменении выводит на экран в тэг с помощью свойства innerHTML такие данные: номер состояния, его текстовое значение и статус. Текстовое значение статуса определяется с помощью свойства statusText объекта xmlHttp . Поскольку не для всех состояний запроса оно доступно, применяется конструкция try/catch(e) .
Вывод всех состояний запроса сделан с учебной целью. Для получения данных достаточно проанализировать состояние 4 ("обемен данными завершен"), что и сделано в Ajax примере .

Затем в состоянии 4 с помощью свойства status определяется, нормально ли закончился обмен данными с сервером. Если статус равен 200 (текстовое значение "OK"), что означает, что операции с сервером закончились успешно, делается попытка чтение данных, возвращенных сервером. Если ошибки нет - данные выводятся на экран, в виде свойства innerText тэга .

В случае возникновения ошибки на экран выводится сообщение "Ошибка чтения ответа" с указанием дополнительных данных с помощью свойства e.description .
Если сервер передает другое значение статуса, что означает, что обмен произошел с ошибками, на экран выводится соответствующее сообщение с указанием статуса ошибки в текстовом виде.

При выполнении всех операций в примере без ошибок на экран будут выведены следующие данные:

cостояние запроса:1 (подготовка к отправлению)
Состояние запроса:2 (отправлен), статус: OK
Состояние запроса:3 (идет обмен), статус: OK
Состояние запроса:4 (обмен завершен), статус: OK

Если необходимо осуществить чтение данных, находящихся на сервере в формате XML, например, из файла data.xml содержащего такие данные:

Robert Sheckly,

необходимо, помимо указания нового адреса файла - serverAddr ="http://zykov/data.xml", заменить в функции

handleStateChange()

resp=xmlHttp.responseText;

resp=xmlHttp.responseXML.getElementsByTagName("name").firstChild.data;

Тогда вместо сообщения

Сервер передал: Привет, клиент!

появится сообщение

Сервер передал: Robert Sheckly

Урок, в котором на примерах рассмотрим создание простых асинхронных AJAX запросов к серверу. В качестве метода передачи запросов будем использовать как метод GET, так и метод POST. На сервере обработку запросов выполним с помощью скриптов PHP.

Что такое асинхронный запрос AJAX?

Технология AJAX в основном используется для создания асинхронных запросов к серверу. Асинхронный запрос - это такой запрос, который выполняется в фоновом режиме и не мешает пользователю взаимодействовать со страницей.

При отправке асинхронного запроса, браузер (страница) не "замораживается", т.е. с ней, как и прежде, можно работать. Но тогда как узнать, когда придёт ответ с сервера. Чтобы это определить, необходимо отслеживать свойство браузера readyState (состояние готовности). Данное свойство содержит число, по значению которого можно судить о том, в какой стадии находится запрос. В следующей таблице приведены основные значения свойства readyState и соответствующие им состояния.

Т.е. получается, что нам необходимо отследить, когда значение у свойства readyState будет равно 4. Это будет означать то, что на отправленный запрос, пришёл ответ с сервера. Остальные значения на практике используются довольно редко, и некоторые браузеры могут их не поддерживать.

Для того чтобы определить на какой стадии находится запрос, необходимо использовать событие объекта XMLHttpRequest onreadystatechange . Данное событие происходит каждый раз, когда изменяется значение свойства readyState . Следовательно, в обработчике этого события (неименованной или именованной функции) можно прописать действия, которые будут проверять равно ли данное свойство 4 и если равно, то например, вывести ответ сервера на страницу.

Создание асинхронного AJAX запроса (метод GET)

Рассмотрим создание асинхронного AJAX запроса на примере, который будет после загрузки страницы приветствовать пользователя и отображать его IP-адрес.

Для этого необходимо создать на сервере 2 файла в одном каталоге:

welcome.html – HTML-страница, которая будет отображаться пользователю. В этой же страницы поместим скрипт, который будет осуществлять все необходимые действия для работы AJAX на стороне клиента.

processing.php – PHP-файл, который будет обрабатывать запрос на стороне сервера, и формировать ответ. Начнём разработку с создания основной структуры файла welcome.html

Пример работы AJAX Пример работы AJAX // Здесь поместим код JavaScript, который будет отправлять запрос на сервер, получать его и обновлять содержимое страницы. Всё это будет работать без перезагрузки страницы

Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):

Подготовим данные, необходимые для выполнения запроса на сервере. Если для выполнения запроса на сервере данные никакие не нужны, то данный этап можно пропустить.

Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).

Настроим запрос с помощью метода open() .

Указываются следующие параметры:

• Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
• URL-адрес, который будет обрабатывать запрос на сервере.
• Тип запроса: синхронный (false) или асинхронный (true).
• Имя и пароль при необходимости.

Подпишемся на событие onreadystatechange объекта XHR и укажем обработчик в виде анонимной или именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве responseText .

Дополнительно с проверкой значения свойства readyState числу 4, можно проверять и значение свойства status . Данное свойство определяет статус запроса. Если оно равно 200, то всё OK . А иначе произошла ошибка (например, 404 – URL не найден).

Отправим запрос на сервер с помощью метода send() .

Если используем для отправки запроса метод GET, то передавать данные в параметр данного метода не надо. Они передаются в составе URL.

Если используем для отправки запроса метод POST, то данные необходимо передать в качестве параметра методу send() . Кроме этого, перед вызовом данного метода необходимо установить заголовок Content-Type, чтобы сервер знал в какой кодировке пришёл к нему запрос и смог его расшифровать.

Содержимое элемента script:

// 2. Создание переменной request var request = new XMLHttpRequest(); // 3. Настройка запроса request.open("GET","processing.php",true); // 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции request.addEventListener("readystatechange", function() { // если состояния запроса 4 и статус запроса 200 (OK) if ((request.readyState==4) && (request.status==200)) { // например, выведем объект XHR в консоль браузера console.log(request); // и ответ (текст), пришедший с сервера в окне alert console.log(request.responseText); // получить элемент c id = welcome var welcome = document.getElementById("welcome"); // заменить содержимое элемента ответом, пришедшим с сервера welcome.innerHTML = request.responseText; } }); // 5. Отправка запроса на сервер request.send();

В итоге файл welcome.html будет иметь следующий код:

Пример работы AJAX Пример работы AJAX window.addEventListener("load",function() { var request = new XMLHttpRequest(); request.open("GET","processing.php",true); request.addEventListener("readystatechange", function() { if ((request.readyState==4) && (request.status==200)) { var welcome = document.getElementById("welcome"); welcome.innerHTML = request.responseText; } }); request.send(); });

На сервере (с помощью php):

Получим данные. Если данные посланы через метод GET , то из глобального массива $_GET["имя"] . А если данные переданы с помощью метода POST , то из глобального массива $_POST["имя"] .

Используя эти данные, выполним некоторые действия на сервере. В результате которых получим некоторый ответ. Выведем его с помощью echo .