22.07.2008

AJAX. Первые шаги

Рубрики: Веб-разработка | Оставить комментарий

Для начала немного теории…
AJAX (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — это подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся более быстрыми и удобными.
… и истории
Впервые термин AJAX был публично использован 18 февраля 2005 в статье Джесси Джеймса Гарретта (Jesse James Garrett) «Новый подход к веб-приложениям». Гарретт придумал термин, когда ему пришлось как-то назвать новый набор технологий, предлагаемый им клиенту.

Однако в той или иной форме многие технологии были доступны и использовались гораздо раньше, например в подходе «Remote Scripting», предложенным компанией Microsoft в 1998, или с использованием HTML элемента IFRAME, появившегося в Internet Explorer 3 в 1996 году.
AJAX стал особенно популярен после использования его компанией Google в сервисах Gmail, Google Maps и Google Suggest.

Как и каждая технология (будь-то новая или давно привычная) AJAX имеет преимущества и недостатки, о которых мы скажем кратко. Из преимуществ можно назвать экономию трафика (ведь изменяется только часть страницы), снижается нагрузка на сервер (отправляются и получаются только те данные, которые нужны в данный момент), ну самое главное на мой взгляд преимущество – это ускорение реакции интерфейса веб-сайта на действия пользователя. Но недостатков тоже хватает: браузер не регистрирует историю посещения динамически создаваемых страниц, динамически загружаемое содержимое недоступно поисковикам.

Описывать здесь работу технологии изнутри с помощью больших пояснений и рисунков я не буду, кому это интересно, то Google ему в помощь. Я займусь практикой, и так…

Объект XMLHttpRequest
Основой AJAX является набор API, называемый XMLHTTP, доступом к которому мы и получим с помощью объекта XMLHttpRequest.

Методы
abort() – отменяет текущий запрос
getAllResponseHeaders() – возвращает полный список HTTP-заголовков в виде строки
getResponseHeader(headerName) – возвращает значение указанного заголовка
open(method, URL, async, userName, password) – определяет метод, URL и другие опциональные параметры запроса; параметр async определяет, происходит ли работа в асинхронном режиме
send(content) – отправляет запрос на сервер
setRequestHeader(label, value) – добавляет HTTP-заголовок к запросу
overrideMimeType(mimeType) – позволяет указать mime-type документа, если сервер его не передал или передал неправильно (метод отсутствует в Internet Explorer).

Свойства
onreadystatechange – обработчик события, которое происходит при каждой смене состояния объекта
readyState – возвращает текущее состояние объекта (0 — неинициализирован, 1 — открыт, 2 — отправка данных, 3 — получение данных и 4 — данные загружены)
responseText – текст ответа на запрос
responseXML – текст ответа на запрос в виде XML, который затем может быть распарсен посредством DOM
status – возвращает HTTP-статус в виде числа (404 — «Not Found», 200 — «OK» и т. д.)
statusText – возвращает статус в виде строки («Not Found», «OK» и т. д.)

Создание экземпляра объекта XMLHttpRequest
Для разных браузеров реализация различается. В IE 5.x и IE 6 она реализована через ActiveX, у всех остальных (IE 7, Firefox, Safari, Opera) – как встроенный объект XMLHttpRequest.

//Реализация для ранних версий Internet Explorer
var http_request = new ActiveXObject(“Microsoft. XMLHTTP”)

//Реализация для Internet Explorer 5.x – 6.0
var http_request = new ActiveXObject(“Msxml2.XMLHTTP”)

//Для остальных браузеров, включая Internet Explorer 7
var http_request = new XMLHttpRequest()

Чтобы обеспечить кросс-браузерность будем использовать такую функцию (в интернете вы найдете кучу примеров инициализации
, я же взяв за основу один из них, немножко изменил код):

var http_request;

function request(url)
{
if (window.XMLHttpRequest) //проверяем существование объекта window.XMLHttpRequest
{
try
{
http_request=new XMLHttpRequest;
}
catch(e)
{
alert(e);
}
}
else if (window.ActiveXObject) //проверяем существование объекта window.ActiveXObject
{
try
{
http_request=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch(e)
{
try
{
http_request=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch(e)
{
alert(e);
}
}
}
if (http_request)
{
//выполняем все действия
}
else
{
alert(“AJAX not initialized”);
}
}

Создав экземпляр объекта XMLHttpRequest, мы должны отправить данные серверу и соответственно принять их. Для отправки мы будем использовать методы open и send, для приема ответа свойство onreadystatechange (этот код вставьте вместо комментария «выполняем все действия»):

http_request.onreadystatechange=server_response; //назначаем обработчик события, который и будет производить все действия связанные с обработкой ответа сервера
http_request.open(“GET”,url,true); //определяем метод отправки (в нашем случае GET), передаем URL
http_request.send(null); //отправляем данные

Собственно код обработчика события:

function server_response()
{
switch(http_request.readyState) //проверяем состояние объекта
{
case 0:
document.getElementById(’servresponse’).value= “Not initialized”;
break;
case 1:
document.getElementById(’servresponse’).value= “Opened”;
break;
case 2:
document.getElementById(’servresponse’).value=“Sending”;
break;
case 3:
document.getElementById(’servresponse’).value=“Loading”;
break;
case 4: //если ответ получен выполняем дальнейшие действия
if (http_request.status==200) //если сервер ответил “200
{
document.getElementById(’servresponse’).value=http_request.responseText;
}
else //в остальных случаях получаем код ответа и ответ сервера
{
document.getElementById(’servresponse’).value=http_request.status+” “+http_request.statusText+“\r\n”+document.write(http_request.responseText);
}
break;
default:
document.getElementById(’servresponse’).value= “Unknown state”;
break;
}

И для проверки создаем HTML-документ, в котором при нажатии на кнопку «GO» будет вызываться функция request, которой будет передан URL:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>AJAX (Part 1)</title>
<script type=”text/javascript” language=”javascript”>
<!–Вставьте сюда весь наш код на JavaScript–>
</script>
</head>
<body>
<input type=”button” value=”GO” onclick=”request(’server_script.php?var=Hello!’)” />
<br/>
<textarea rows=”4″ cols=”10″ id=”servresponse” disabled=”disabled”>
</textarea>
</body>
</html>

А также серверный сценарий (я использовал простенький PHP-сценарий):

<?php
Header(“Content-type: text/html; charset=UTF-8″);
Header(“Expires: Mon, 26 Jul 1997 05:00:00 GMT”);
Header(“Cache-Control: no-cache, must-revalidate”);
Header(“Pragma: no-cache”);
Header(“Last-Modified: “.gmdate(“D, d M Y H:i:s”).“GMT”);

$var=$_GET['var'];
print ($var);
?>

Как видите создать веб-приложение (конечно оно простенькое, но все же) с использованием AJAX не так уж и сложно. Хотя, как вы увидите в следующих статьях, есть еще куча «подводных камней», но о них позже…

Автор: Сытник Сергей (ZeroX)