В настоящее время большинство ресурсов все решительнее и решительнее применяют новые технологии входящие в состав WEB 2.0. Теперь уже сложно представить работу наших любимых сайтов без применения этих новейших технологий. И порой натыкаясь в интернете на старые ресурсы, которые когда-то считались передовым словом в дизайне и стиле, сейчас мы лишь презрительно жмем "Закрыть страницу".

Среди новых технологий особенно выделяется AJAX. Само по себе, это дальнейшее развитие идеи JS+DHTML. Раньше, чтобы вывести на страницу новые данные, приходилось перезагружать страницу полностью. Те. со всей версткой и прочими "не нужными" деталями. Это, согласитесь, жрало лишний трафик. Потом появилась технология DHTML (Dynamic HTML).

DHTML позволяет при помощи Javascript динамически менять содержимое страницы. Те можно задав событие например по нажатию мышкой на какой-то элемент на странице, выполнить какую-то JS функцию которая, например удалит часть текста и выведет вместо него другой.

В качестве примера можно привести следующий код:

[code]

<table width="100%">
 <tr>
 <td id="sh"></td>
 </tr>
 <tr>
 <td><input type="button" value="Press Me" onClick="show();"></td>
 </tr>
 </table>
 <script>
 function show(){
 var td=document.getElementById('sh');
 td.innerHTML="Hellow World!";
 }
 </script>

[/code]

Те. в данном случае, мы определили для события onClick кнопки "Press Me" функцию show();. Эта функция получает элемент TD таблицы (по его id) и вставляет в него нужный нам код. Кроме изменения св-ва innerHTML мы можем напрямую добавлять или удалять TR и TD у таблицы (например tr.insertCell()) и многое другое.

Подробное описание всех возможностей DHTML выходит за рамки этой статьи, но заинтересовавшийся читатель может более подробно ознакомиться с этой темой посетив нижеприведенные ссылки:

http://ru.wikipedia.org/wiki/DHTML
http://www.dhtml.ru/ref/
http://www.citforum.ru/internet/common/dhtml_scriplet.shtml

Самым большим недостатком DHTML является то что весь код и все возможные варианты данных приходиться сразу встраивать в страницу. И даже если они пользователю не нужны в данный момент (не отображаются на странице), не значит что их там нет).

Этот недостаток и призван решить AJAX. AJAX - Asynchronous Javascript and XML. По сути, эта технология позволяет в "фоновом" режиме обмениваться данными с сервером. Т.е теперь мы можем не только динамически менять содержимое страницы по различным событиям, но и можем запросить у сервера недостающие данные и получив их отобразить на странице. Представляете какие широкие открываются возможности? )

Реализация же этой новомодной фишки до смешного проста. Нам достаточно создать на нашей странице (назовем ее клиентской частью, тк весь код будет выполнятся в браузере пользователя) объект AJAX и каллбэк функцию которая будет обрабатывать возвращенный результат. Серверная же часть состоит из обычного скрипта (например на том же php) ничем не отличающегося от всех прочих.

Вот как будет выглядеть клиентская часть:

<script>
 function newAJAX(){
 var request = false;
 try {
 request = new XMLHttpRequest();
 } catch (trymicrosoft) {
 try {
 request = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (othermicrosoft) {
 try {
 request = new ActiveXObject("Microsoft.XMLHTTP");
 } catch (failed) {
 request = false;
 }
 }
 }
 if (!request){
 alert("Error initializing XMLHttpRequest!");
 }
 return(request);
 }
 function getAJAX(ajax,ur){
 ajax.open("GET", ur, true);
 ajax.onreadystatechange = updatePage;
 ajax.send(null);
 }
 function updatePage(){
 if (httpAJAX.readyState == 4) {
 if (httpAJAX.status == 404) alert("AJAX: Request URL does not exist");
 if (httpAJAX.status != 200) alert("AJAX: status code is " + httpAJAX.status);
 var response = httpAJAX.responseText;
 // что-нибудь делаем с ответом
 }
 }
 var httpAJAX=newAJAX();
 </script>

Давайте разберем вышеприведенный пример поподробнее. Первой в нем описана функция newAjax. В принципе в подробности ее реализации вдаваться нет смысла ибо она просто напросто создает объект Ajax способом приемлемым для нашего браузера.

Гораздо больший интерес представляют две следущие функции. getAJAX - есть непосредственно вызов нашей функции. Поставим его например на событие onClick - у нас сработает Ajax. В качестве аргументов эта функция принимает сам объект Ajax созданный функцией newAJAX() и URL скрипта серверной части с параметрами.

На первый взгляд эта функция ничего не возвращает, отсюда может возникнуть вопрос а как же обработать данные которые вернет нам сервер?

Если мы посмотрим внимательно то увидим во второй строке этой функции следующий код: ajax.onreadystatechange = updatePage; Тем самым мы говорим объекту Ajax что по завершении вызова серверного скрипта необходимо выполнить функцию updatePage().

Именно эта функция и отвечает за обработку полученных от сервера данных. Как видно в ней в первых строках стоит проверка readyState. Дело в том, что на самом деле эта функция будет вызываться несколько раз. И только когда readyState будет равен 4 - мы будем уверены что серверный скрипт вернул какие-то данные.

Далее необходимо проверить код ответа сервера, ведь нашего скрипта там может и не быть). Как известно код успешного запроса - 200. Стало быть при всех прочих вариантах ответа сервера нам надо выдать пользователю ошибку. Ну и в конце концов, результат ответа можно получить в переменной responseText и обработать.

И наконец мы видим вызов var httpAJAX=newAJAX(); думаю этот кусок пояснять не надо?

Необходимо помнить что функция updatePage будет вызвана сама после выполнения серверной части и нет никакой необходимости вызывать ее отдельно.

Вышеприведенный код достаточно включить (удобнее в виде отдельного модуля) в начало страницы а потом достаточно будет вызывать лишь getAJAX в нужных местах.

За довольно продолжительное свое знакомство с Ajax я встретил лишь одну реализацию тянущую на какую-то универсальность. Идея заключается в том, что серверная часть возвращает не просто данные а JavaScript код который выполняется в клиентской части. Для этого достаточно изменить функцию updatePage() следующим образом:

[code]

 function updatePage(){
 if (httpAJAX.readyState == 4) {
 if (httpAJAX.status == 404) alert("AJAX: Request URL does not exist");
 if (httpAJAX.status != 200) alert("AJAX: status code is " + httpAJAX.status);
 var response = httpAJAX.responseText;
 eval(response);

[/code]

  print("alert('".$_GET['query']."');");
 ?>

getAJAX(httpAJAX,"/script.php?query=any");

Вот такие пироги. Из неоспоримых преимуществ использования технологии b]AJAX[/b] можно назвать следующие:

+ сильно сокращается расход трафика
+ страница становиться на порядок интер активнее
+ сайт на котором используется Ajax просто напросто "понтовей" =)

Во общем использовать или не использовать - дело конечно ваше. Целью же этой небольшой заметки, было просто познакомить вас с тем КАК это можно заюзать. К сожалению описать все варианты и способы применения в рамках этого материала просто не предоставляется возможным. Но я думаю, используя такие гениальные изобретения человечества как google.ru и yandex.ru, вам не составит труда самим отыскать более углубленный материал на эту тему)

Скопировано с http://www.gfs-team.ru/