Что такое Ajax - полезная статья для начинающих

[sslavanet]

Привычная модель взаимодействия пользователя с веб-приложением подразумевает несколько неприятных моментов. Любой, кто заполнял формы на сайтах, сталкивался с тем, что после нажатия кнопки "Submit" приходится ждать ответа от сервера. Связано это с тем, что браузер работает по простой схеме запрос-ответ. Причем между запросом и ответом должно пройти время. К этому добавляется тот факт, что страница должна быть перезагружена.

Ajax позволяет избежать перезагрузок страницы. Объясняется это тем, что запросы к серверу производятся на заднем плане с помощью объекта языка Java Script, который называется XMLHTTPRequest. Таким образом, достигается асинхронность ("А" в акрониме) взаимодействия клиента и сервера. Остальные буквы акронима означают "Java Script And XML".

На самом деле этот объект был встроен в браузеры давно, но не использовался широко. После того как разработчики Google Mail применили его для реализации своего проекта, он стал использоваться достаточно широко.

Термин "Ajax" вошел в словарь разработчиков после публикации статьи Джеси Джеймса Гаррета "Ajax: Новый подход к веб-приложениям" (перевод|оригинал). В статье сформулированы не только новые принципы построения веб-интерфейсов, но и дан подробный список технологий, являющихся составными частями архитектуры. Список следующий:

XHTML и CSS
DOM
XML и XSLT
XMLHttpRequest
JavaScript
Рассмотрение основных методов и свойств объекта XMLHTTPRequest можно провести на примере. Рассмотрим следующий код (для удобства разбора строки примера пронумерованы):

index.html
1
2
3
4
26
27
28

Пример Ajax

29

30 onclick = getAjax('http://www.test.ru/test.txt','target')>
31

32
33
Amat victoria curam.


34


35
36


Помимо веб-страницы нам понадобится дополнительный текстовый файл, содержимое которого мы будем асинхронно догружать на тестовую страницу. Содержимое файла (назовем его test.txt) может быть следующим:

Ibi victoria, ubi concordia

Поставленная перед нами задача выглядит следующим образом. На загруженной странице будет находиться кнопка. После нажатия кнопки первоначальное содержимое слоя с именем target меняется на содержимое текстового файла. Читателю, знакомому с веб-технологиями, этот трюк (замена текста в слове) может показаться не очень-то оригинальным. Такое, в конце концов, можно проделать разными способами. Но суть нашего примера состоит в использовании объекта XMLHTTPRequest, что позволяет нам получить информацию с сервера без перезагрузки страницы.

Прежде чем подробно разобрать этот пример, следует обсудить некоторые технические подробности. Дело в том, что, будучи загруженным в браузер с локального диска, этот пример работать не будет. Для того чтобы правильно обработать этот пример, браузер должен получить документ с помощью веб-сервера. Неважно, установлен сервер у вас локально или же вы проверяете данный пример на удаленном сервере, но факт остается фактом, объект XMLHTTPRequest обращается к серверу по протоколу HTTP и привычный способ отладки веб-страниц путем запуска их напрямую (с жесткого диска) работать не будет.

Далее, как уже давно обещано, следует разбор исходного файла. Детально рассмотрены только те строки, которые имеют отношение к рассматриваемой теме.

Строка 5. Инициализация переменной XMLHTTPRequestObject.
В этой переменной будет храниться объект XMLHTTPRequest, который будет полностью инициализирован в следующих строках. Значение false присваивается этой переменной, на случай если браузер не поддерживает этот объект.

Строки 6-10. Создание объекта XMLHTTPRequest.
В этих строках происходит привычная любому веб-разработчику "война браузеров". В случае с браузерами семейства Internet Explorer необходимо создать объект ActiveX. В случае с остальными браузерами можно просто создать соответствующий объект.

Как видно из исходного кода страницы (строка 30), на кнопку формы "повешен" обработчик, который вызывает определенную пользователем функцию getAjax с двумя параметрами. Назначение функции и смысл параметров становятся ясными после разбора исходного текста функции.

Строки 11-24. Основная функция.
После того как объект XMLHTTPRequest создан, разработчик получает доступ к его методам и свойствам. За полным их перечнем, а также за различиями в реализациях для разных браузеров обращайтесь к специальной литературе (ссылки в конце статьи). Наш пример использует минимальный рабочий набор методов и свойств объекта XMLHTTPRequest.

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

В строке 13 вызывается метод open, который формирует запрос к серверу. На самом деле число параметров этого метода гораздо больше, но мы используем минимальный набор. А именно метод протокола HTTP и URL необходимого нам документа.

В строке 14 используется свойство onreadystatechange, позволяющее следить за изменением статуса объекта, в то время когда он выполняет свою работу. Здесь создается анонимная функция, которая выполняет работу по проверке двух важных свойств объекта (стоки 17 и 18). Первое (readyState) может по результатам работы объекта содержать значения от 0 до 4 (4 означает, что запрос закончен). Второе(status) содержит код ответа сервера (200 означает, что документ существует). Подробности о возможных значениях этих свойств можно узнать в документации.

Если оба условия выполнены (строка 19), то значение свойства innerHTML, ранее определенного объекта obj, заменяется на значение, полученное с сервера (свойство responseText).

В строке 22 происходит собственно запрос. Значение передаваемого параметра null определено методом GET (строка 13). В случае использования метода, отличного от GET, вместо null следует использовать что-нибудь другое.

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



Карасев Сергей
Источник - http://www.datasvyazi.ru/stuff/articles/?rid=4&p=2

[Botanig]

Хорошая статья. Будем учиться ))

[mr_john]

Подскажите что-нибдуь для чайников полезное на ajax, с примерами

[GhostAnton]

Вот часть кода работающая без перегрузки страницы с реального сайта.

<html>
<head>
<script>
//Функции для смены картинки пункта меню
Скрытый текст

function mm(t,m){t.style.backgroundImage=m==1?"url(images/main-buttonOver.gif)":"url(images/main-button.gif)";}
function mms(t,m){t.style.backgroundImage=m==1?"url(images/sub-buttonOver-tile.gif)":"url(images/sub-button-tile.gif)";}
function sm(n,xm,ym){clearTimeout(mt);var m=document.getElementById("m"+n).style;m.visibilit y="visible";m.top=xm;m.left=ym;}
function hm(n){var m=document.getElementById("m"+n).style;m.visibilit y="hidden";m.top=-999;m.left=-999;}
// Функция получения контента выбранного меню из другого файла без перегрузки страницы
function f(i){document.getElementById('content').innerHTML= i;}

</script>
// Далее идет почти стандартный html код
</head>

<body>

//Далее идет код описывающий в слоях мое меню для изменения внешнего вида менюшки (смена картинки и текста)

Скрытый текст

<div id=m1 class=m onMouseOver=clearTimeout(mt) onmouseout=mt=setTimeout("hm(1)",200)>
<table cellspacing=0 cellpadding=0 border=0>
<tr>
<th height="28" width="13" style="background-image:url(images/sub-button-left.gif)" onMouseOver=clearTimeout(mt)></th>
<th height="28" width="125" background="images/sub-button-tile.gif" onmouseover=mms(this,1);clearTimeout(mt) onmouseout=mms(this,0) onClick="hm(1);document.getElementById('z').src='d oma.php?id=10';"><font color="#Cff000"><i>Дома</font></th>
<th height="28" width="13" background="images/sub-button-right.gif" onMouseOver=clearTimeout(mt)></th>
</tr>
<tr>
<th height="28" width="13" background="images/sub-button-left.gif" onMouseOver=clearTimeout(mt)></th>
<th height="28" width="125" background="images/sub-button-tile.gif" onmouseover=mms(this,1);clearTimeout(mt) onmouseout=mms(this,0) onClick="hm(1);document.getElementById('z').src='c otedji.php?id=11';"><font color="#Cff000"><i>Коттеджи</font></th>
<th height="28" width="13" background="images/sub-button-right.gif" onMouseOver=clearTimeout(mt)></th>
</tr>
<tr>
<th height="28" width="13" background="images/sub-button-left.gif" onMouseOver=clearTimeout(mt)></th>
<th height="28" width="125" background="images/sub-button-tile.gif" onmouseover=mms(this,1);clearTimeout(mt) onmouseout=mms(this,0) onClick="hm(1);document.getElementById('z').src='b ani.php?id=12';"><font color="#Cff000"><i>Бани и сауны</font></th>
<th height="28" width="13" background="images/sub-button-right.gif" onMouseOver=clearTimeout(mt)></th>
</tr>
<tr>
<th height="28" width="13" background="images/sub-button-left.gif" onMouseOver=clearTimeout(mt)></th>
<th height="28" width="125" background="images/sub-button-tile.gif" onmouseover=mms(this,1);clearTimeout(mt) onmouseout=mms(this,0) onClick="hm(1);document.getElementById('z').src='z abory.php?id=16';"><font color="#Cff000"><i>Заборы</font></th>
<th height="28" width="13" background="images/sub-button-right.gif" onMouseOver=clearTimeout(mt)></th>
</tr>
<tr>
<th height="28" width="13" background="images/sub-button-left.gif" onMouseOver=clearTimeout(mt)></th>
<th height="28" width="125" background="images/sub-button-tile.gif" onmouseover=mms(this,1);clearTimeout(mt) onmouseout=mms(this,0) onClick="hm(1);document.getElementById('z').src='r emont.php?id=13';"><font color="#Cff000"><i>Ремонт, отделка</font></th>
<th height="28" width="13" background="images/sub-button-right.gif" onMouseOver=clearTimeout(mt)></th>
</tr>
<tr>
<th height="28" width="13" background="images/sub-button-left.gif" onMouseOver=clearTimeout(mt)></th>
<th height="28" width="125" background="images/sub-button-tile.gif" onmouseover=mms(this,1);clearTimeout(mt) onmouseout=mms(this,0) onClick="hm(1);document.getElementById('z').src='f undamenty.php?id=15';"><font color="#Cff000"><i>Фундаменты</font></th>
<th height="28" width="13" background="images/sub-button-right.gif" onMouseOver=clearTimeout(mt)></th>
</tr>
<tr>
<th height="28" width="13" background="images/sub-button-left.gif" onMouseOver=clearTimeout(mt)></th>
<th height="28" width="125" background="images/sub-button-tile.gif" onmouseover=mms(this,1);clearTimeout(mt) onmouseout=mms(this,0) onClick="hm(1);document.getElementById('z').src='p ristroiki.php?id=16';"><font color="#Cff000"><i>Пристройки</font></th>
<th height="28" width="13" background="images/sub-button-right.gif" onMouseOver=clearTimeout(mt)></th>
</tr>
</table>
</div>

<div id=m2 class=m onMouseOver=clearTimeout(mt) onmouseout=mt=setTimeout("hm(2)",200)>
<table cellspacing=0 cellpadding=0 border=0>
<tr>
<th height="28" width="13" background="images/sub-button-left.gif" onMouseOver=clearTimeout(mt)></th>
<th height="28" width="125" background="images/sub-button-tile.gif" onmouseover=mms(this,1);clearTimeout(mt) onmouseout=mms(this,0) onClick="hm(2);document.getElementById('z').src='p rice.php?id=1';"><font color="#Cff000"><i>Скачать</font></th>
<th height="28" width="13" background="images/sub-button-right.gif" onMouseOver=clearTimeout(mt)></th>
</tr>
<tr>
<th height="28" width="13" background="images/sub-button-left.gif" onMouseOver=clearTimeout(mt)></th>
<th height="28" width="125" background="images/sub-button-tile.gif" onmouseover=mms(this,1);clearTimeout(mt) onmouseout=mms(this,0) onClick="hm(2);document.getElementById('z').src='p rice.php?id=2';"><font color="#Cff000"><i>Просмотреть</font></th>
<th height="28" width="13" background="images/sub-button-right.gif" onMouseOver=clearTimeout(mt)></th>
</tr>
</table>
</div>

<div id=m3 class=m onMouseOver=clearTimeout(mt) onmouseout=mt=setTimeout("hm(3)",200)>
<table cellspacing=0 cellpadding=0 border=0>
<?
include('inc/div_tech.inc.php');
?>
</table>
</div>

<div id=m4 class=m onMouseOver=clearTimeout(mt) onmouseout=mt=setTimeout("hm(4)",200)>
<table cellspacing=0 cellpadding=0 border=0>
<tr>
<th height="28" width="13" background="images/sub-button-left.gif" onMouseOver=clearTimeout(mt)></th>
<th height="28" width="125" background="images/sub-button-tile.gif" onmouseover=mms(this,1);clearTimeout(mt) onmouseout=mms(this,0) onClick="hm(4);document.getElementById('z').src='p roekty.php?id=1';"><font color="#Cff000"><i>До 200 кв.м.</font></th>
<th height="28" width="13" background="images/sub-button-right.gif" onMouseOver=clearTimeout(mt)></th>
</tr>
<tr>
<th height="28" width="13" background="images/sub-button-left.gif" onMouseOver=clearTimeout(mt)></th>
<th height="28" width="125" background="images/sub-button-tile.gif" onmouseover=mms(this,1);clearTimeout(mt) onmouseout=mms(this,0) onClick="hm(4);document.getElementById('z').src='p roekty.php?id=2';"><font color="#Cff000"><i>До 300 кв.м.</font></th>
<th height="28" width="13" background="images/sub-button-right.gif" onMouseOver=clearTimeout(mt)></th>
</tr>
<tr>
<th height="28" width="13" background="images/sub-button-left.gif" onMouseOver=clearTimeout(mt)></th>
<th height="28" width="125" background="images/sub-button-tile.gif" onmouseover=mms(this,1);clearTimeout(mt) onmouseout=mms(this,0) onClick="hm(4);document.getElementById('z').src='p roekty.php?id=3';"><font color="#Cff000"><i>До 500 кв.м.</font></th>
<th height="28" width="13" background="images/sub-button-right.gif" onMouseOver=clearTimeout(mt)></th>
</tr>
<tr>
<th height="28" width="13" background="images/sub-button-left.gif" onMouseOver=clearTimeout(mt)></th>
<th height="28" width="125" background="images/sub-button-tile.gif" onmouseover=mms(this,1);clearTimeout(mt) onmouseout=mms(this,0) onClick="hm(4);document.getElementById('z').src='p roekty.php?id=4';"><font color="#Cff000"><i>Более 500 кв.м.</font></th>
<th height="28" width="13" background="images/sub-button-right.gif" onMouseOver=clearTimeout(mt)></th>
</tr>
</table>
</div>

// Далее собственно меню

Скрытый текст

<table cellspacing=0 cellpadding=0 border=0 style="cursor:default;">
<tr>
<td height="42" width="159" background="images/main-header.gif"></td>
</tr>
<tr>
<th height="28" width="159" style="background-image:url(images/main-button.gif)" onmouseover=mm(this,1); onmouseout=mm(this,0) onClick="document.getElementById('z').src='action. php?id=1';"><font color="#Cff000"><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;О компании</font></th>
</tr>
<tr>
<th height="28" width="159" background="images/main-button.gif" onmouseover=mm(this,1);hm(2);hm(3);hm(1);sm(4,209, 169) onmouseout=mm(this,0);mt=setTimeout("hm(4)",200)>< font color="#Cff000"><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Проекты</font></th>
</tr>
<tr>
<th height="28" width="159" background="images/main-button.gif" onmouseover=mm(this,1);hm(2);hm(3);hm(4);sm(1,237, 169) onmouseout=mm(this,0);mt=setTimeout("hm(1)",200)>< font color="#Cff000"><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Наши работы</font></th>
</tr>
<tr>
<th height="28" width="159" background="images/main-button.gif" onmouseover=mm(this,1) onmouseout=mm(this,0) onClick="document.getElementById('z').src='fotoses sii.php?id=50';"><font color="#Cff000"><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Фотосессии</font></th>
</tr>
<tr>
<th height="28" width="159" background="images/main-button.gif" onmouseover=mm(this,1);hm(2);hm(1);hm(4);sm(3,293, 169) onmouseout=mm(this,0);mt=setTimeout("hm(3)",200)>< font color="#Cff000"><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Технологии</font></th>
</tr>
<tr>
<th height="28" width="159" background="images/main-button.gif" onMouseOver=mm(this,1);hm(1);hm(3);hm(4);sm(2,321, 169) onmouseout=mm(this,0);mt=setTimeout("hm(2)",200)>< font color="#Cff000"><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Прайс-листы</font></th>
</tr>
<tr>
<th height="28" width="159" background="images/main-button.gif" onMouseOver=mm(this,1) onMouseOut=mm(this,0) onClick="window.open('guestbook/index.php');"><font color="#Cff000"><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Гостевая</font></th>
</tr>
<tr>
<th height="28" width="159" background="images/main-button.gif" onMouseOver=mm(this,1) onMouseOut=mm(this,0) onClick="document.getElementById('z').src='action. php?id=2';"><font color="#Cff000"><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Контакты</font></th>
</tr>
<!--<tr>
<th height="28" width="159" background="images/main-button.gif" onMouseOver=mm(this,1) onMouseOut=mm(this,0) onClick="document.getElementById('z').src='news.ph p?id=1';"><font color="#Cff000"><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Новости</font></th>
</tr>-->
<tr>
<td height="14" width="159" background="images/main-footer.gif"></td>
</tr>

// Вот эта часть кода должна присутствовать обязательно, это собственно iframe в который все и подгружается

<iframe name=z id=z width=0 height=0 frameborder=0 src=action.php?id=1></iframe>

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

// Вот эта часть кода отвечает за подгрузку в ифрэйм без перегрузки страницы нужный нам контент

onClick="document.getElementById('z').src='news.ph p?id=1';"

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

Приведу часть файла из которого выбирается информация:

<?
if($id==50)
{
echo '<script>parent.f("<i><font style=font-family:georgia,verdana,arial,sans-serif;font-size:16;color:#222bbb;text-align:center;><center>';
$d=opendir("images/fotosessii/");
$files=array();
while($f=readdir($d))if($f!='.'&&$f!='..')$files[]=$f;
$c=count($files);
echo '<center><b>Выберите проект для детального просмотра...</b></center><br>';
for($i=0;$i<$c;$i++)
{
echo '<a href=show.php?id=show&dir='.$files[$i].' target=z><img src=images/fotosessii/'.$files[$i].'/pr/001.jpg></a><br>';
}
echo '</center>");</script>';
}
?>

Наличие

if($id==50) echo '<script>parent.f(" Ваш текст с хтмл кодом вставками картинок ссылок и т.д. ");</script>';

if($id==51) echo '<script>parent.f(" Ваш второй текст");</script>';

Есть одно ограничение, переносов строк не должно быть (перевод строки по энтеру) для переноса строки принудительного нужно использовать хтмл код (форматирование текста)

Это можно обойти, если сделать с инклудить с помошью рнр другую страницу, даже если в ней будет перевод строки то это не вызовет сбоя в работе скриптов

Добавлено через 11 минут 17 секунд
Приемущества такого подхода есть, во первых не приходится каждый раз грузить меню вместе со всеми грузовыми картинками, опятьже если у вас на сайте играет музыка пусть даже потоковая, при выборе любого пункта меню музыка продолжить играть как играла но загрузится необходимая страница. С музыкой у меня реализовано было на этом сайте.
Второй плюс, сайт грузится (по крайней мере в нашей республике намного быстрее и работает быстрее) на медленном интернете, и опятьже экономится трафик.
Как описывал создатель темы, это дает много возможностей программисту, которые при желании можно реализовать.

[GhostAnton]

Забыл упомянуть об одном нюансе при построении меню сайта такого типа как я привел части исходного кода:
1) Все поисковые системы не распознают ссылки на страницы сайта, они проиндексируют только первую страницу сайта.
2) Для того чтоб все поисковые системы смогли проиндексировать ваши страницы необходимо на каждой странице сделать невидимый слой, в котором содержатся все ссылки на ваши страницы (скрытое меню, невидимое для пользователей)
3) На каждой странице вашего сайта будет необходимо сделать либо проверку, с какой страницы перешли на нее, если с главной страницы сайта, то просто открываем, иначе вывести предупрждение и ссылку на главную страницу.