Здравствуйте, уважаемые читатели блога LifeExample, наконец-то меня посетило вдохновение и я готов порадовать вас новым, большим и полезным материалом для начинающих web-мастеров. В этой статье речь пойдет о золотой технологии AJAX и примерах скриптов, написанных на её основе.
Сегодня я сделаю упор на работу с XML данными, т.к. пытаясь разобраться с технологией AJAX, мне попадались лишь примеры работы с JSON форматом. О работе с ним читайте в продолжении к данному материалу, которое скоро будет подготовлено и опубликовано.
Предупреждаю! Эта публикация будет очень объемной, поэтому запаситесь терпением и приготовьтесь внимать смыслу рассматриваемых в ней примеров:
Технология AJAX пример №1 — наипростейший пример, для ознакомления с азами AJAX.
Технология AJAX пример №2 — отправка данных на сервер средствами AJAX.
Технология AJAX пример №3 — отправка структуры данных с сервера в виде XML и работа с ними на стороне клиента.
Совместив все эти AJAX примеры воедино, мы получим реализацию обмена данными по AJAX технологии с форматом XML.
Давайте приступим к большой и трудоемкой работе. Но сначала ознакомьтесь с небольшим введением.
За интерактивностью будущее!
Все больше появляется пользователей, приходящих на наши веб-ресурсы, не желающих наблюдать перезагрузку страницы, при каждом их действии. Сегодня мы можем встретить много примеров работы сервисов, вышедших из каменного века перезагрузки страниц. К ним можно отнести наши разнообразные социальные сети, или всевозможные сервисы для веб-мастеров.
AJAX технология — интерактивный пользователь
Дать пользователю свободу действий — и не перезагружать страницу, стало возможным с развитием и внедрением AJAX технологии.
Концепция технологии AJAX
Как вы уже поняли, эта "золотая" технология позволяет нам обмениваться данными меду браузером и сервером в фоновом режиме, не обновляя страницу. Говоря по-умному, сей обмен является асинхронным.
Под асинхронностью в программировании я понимаю процесс выполнения второстепенного действия, не прекращая основное.
Под асинхронность относительно AJAX можно представить, что первостепенным действием является процесс отображения страницы браузером. А второстепенным — обработка запросов пользователя сервером. В момент выполнения операций на стороне сервера, благодаря аяксу, браузер ждет ответа, не ограничивая работу пользователя со страницей.
Итак, концепция такова: между браузером и сервером не переставая происходит обмен данными, которые:
Вводятся в браузер средствами пользовательского интерфейса;
Отправляются на сервер;
Обрабатываются на сервере, возможно, заносятся в БД;
В это время браузер ожидает возвращение ответа;
Пока браузер ждет, он не прекращает работу пользователя;
Дождавшись данных от сервера в определенном формате, обрабатывает их и выводит в контент HTML страницы.
Вы можете пронаблюдать представленный процесс на схематической иллюстрации работы описываемой технологии.
Схема — технология AJAX
Осталось упомянуть важный момент: данные циркулирующие между сервером и браузером, должны отвечать определённым правилам форматирования. Такие правила обычно описывают два формата:
XML (eXtensible Markup Language) — расширяемый язык разметки;
JSON (JavaScript Object Notation) —текстовый формат основанный на JavaScript.
В редких случаях можно обойтись свободным текстовым форматом передачи данных, но это скорее исключение.
Технология AJAX расшифровывается как (Asynchronous JavaScript and XML), из этого можно сделать вывод, что разработчики в первую очередь предполагают использование формата XML. Но на деле, как показывает практика все чаще используется формат JSON, в силу своего минимализма. Другими словами — работать с обоими форматами можно одинаково хорошо, но один и тот же набор данных, представленный в JSON и XML, в первом будет иметь меньший размер. Следовательно, если JSON имеет меньший размер, то и передаваться он будет быстрее, чем XML.
XML для AJAX
Чуть позже мы рассмотрим работу AJAX, с использованием данных в формате XML. А пока давайте разберемся, что же такое XML формат.
Во-первых, надо четко понимать, что данный формат является текстовым и его можно запросто создать собственноручно, с помощью notepad++ любого другого текстового редактора.
Во-вторых, синтаксис XML очень похож на всем нам известный HTML.
Вот пример HTML разметки:
<body>
<h1 >Пример HTML разметки</h1>
<p>Обычный текст, <font color=”#ffd700”>золотой текст.</font> </p>
</body>
Мы видим, что любой открытый тег имеет свой закрывающий эквивалент. Также некоторые из тегов имеют атрибуты. Тут я никому Америку не открыл, и все понимают, что этот HTML документ будет интерпретирован браузером, который вместо тегов применит соответствующие им стили для текста.
Отличием XML будет то, что тэги, используемые, этим форматом нигде не зафиксированы, и могут принимать любые пользовательские названия и атрибуты. Но для обработки этих тэгов нужно будет написать соответствующий алгоритм, чтобы правильно распознать данные и их атрибуты.
Пример структуры в формате XML
<user login="root" pass="">
<name>Mark</name>
<famaly>Avdeev</famaly>
<status>Администратор блога lifeexample.ru</status>
</user>
Такими произвольными тегами и атрибутами как в этом примере можно запросто описать карточку пользователя, системы.
Запомните! Вся работа приложения на основе технологии AJAX сводится к обмену сложными структурами данных между клиентом (браузер), и сервером (web сервер).
Замечание 1: Можно, но совершенно не обязательно писать парсер самостоятельно ведь разработчики PHP создали все необходимые универсальные функции ("XML Parser Functions") для работы с XML форматом. Чтобы разобраться с ними нужно начать копать в сторону xml_parser_create().
Замечание 2: Технологией AJAX, тоже предусмотрен механизм отправки пользовательских данных.
Исходя из этих двух замечаний, можно прийти к выводу, о том, что для реализации полноценного веб приложения на AJAX, обменивающегося с сервером XML данными, нам требуется только связать вместе уже готовые инструменты.
Отлично, теперь мы представляем, что такое XML формат, и понимаем, что назначением его является передача сложных структур данных между сервером и клиентом. Следовательно, можем двигаться дальше.
AJAX пример №1 (Начало работы)
Приведенный ниже пример, позволит вам понять суть рассматриваемой нами технологии, и двигаться дальше к изучению более сложных примеров.
Исходный код HTML документа:
<script type="text/javascript">
function startAjax(url){
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
} else if(window.ActiveXObject){
request = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
request.onreadystatechange = function(){
switch (request.readyState) {
case 1: print_console("<br/><em>1: Подготовка к отправке…</em>"); break
case 2: print_console("<br/><em>2: Отправлен…</em>"); break
case 3: print_console("<br/><em>3: Идет обмен..</em>"); break
case 4:{
if(request.status==200){
print_console("<br/><em>4: Обмен завершен.</em>");
document.getElementById("printResult").innerHTML = "<b>"+request.responseText+"</b>";
}else if(request.status==404){
alert("Ошибка: запрашиваемый скрипт не найден!");
}
else alert("Ошибка: сервер вернул статус: "+ request.status);
break
}
}
}
request.open ('GET', url, true);
request.send ('');
}
function print_console(text){
document.getElementById("console").innerHTML += text;
}
</script>
<a href="#" onclick="startAjax('handler_script.php');">Запустить php скрипт</a>
<div id="console" style="border: 1px solid gray; width:250px; height: 110px; padding: 10px; background:lightgray;">
Консоль выполнения запроса:
</div>
<br/>
<div id="printResult">
После нажатия на ссылку, тут будет сообщение с сервера!
</div>
В коде HTML страницы мы создаем функцию startAjax() на языке JavaScript, позволяющую реализовать задуманные действия с AJAX’ом. Кстати, о действиях, во-первых мы хотим увидеть, как отрабатывает php скрипт, находящийся на сервере. Во-вторых, как возвращенная им информация появляется на страничке, без перезагрузки. Для этого в коде мы предусмотрели ссылку, по нажатию на которую запустится процесс всей демонстрации, консоль вывода действий JavaScript скрипта, а также блок для вывода результата.
Примеры AJAX, демонстрация
Так вот, вернемся к создаваемой нами функции startAjax(), по строчкам я все описывать не стану, выделю лишь основные моменты, требуемые для представления происходящего.
Создаем объект XMLHttpRequest позволяющий получать данные с сервера в фоновом режиме.
Если используется IE (Браузер — Internet Explorer) тогда вместо вышеупомянутого объекта XMLHttpRequest, создаем объект ActiveXObject, смысл у них единый, отличие только в индивидуальности для IE.
Обрабатываем все 4-ре статуса состояния запроса. Созданный запрос он же объект request, в процессе отправкиполучения данных может принимать четыре состояния (1 — подготовка к отправке, 2 — отправлен, 3 — идет обмен, 4 — получен ответ.)
В случае 4-го статуса, при получении ответа от сервера, происходит проверка на тип ответа 200 — "OK" или 404 — "Not Found".
Событие request.open() — открывает соединение с сервером с указанием метода передачи данных, адресом запроса, и флагом асинхронности. Указав флаг как false, мы получим в результате обычную перезагрузку страницы.
Кликнув на ссылку, мы пронаблюдаем успешное выполнение простого AJAX запроса.
Пример работы AJAX скрипта
Разумеется, такое сообщение мы получим только после того как разместим на сервере, в той же папке, что и саму html страничку, скрипт handler_script.php:
1
<?echo "Это текстовое сообщение пришло с сервера!"; ?>
Скрипт не мудрый, тем не менее, его содержимого достаточно для демонстрации.
Ну вот, с азами разобрались, перейдем от простого к сложному. Рассмотрим пример использования технологии AJAX по прямому её назначению, а именно с пересылкой данных в виде XML.
Скачать пример №1 ( Скачали: 234 чел. )
AJAX пример №2 — отправка POST запроса на сервер
Переходя ко второму примеру, давайте уясним тот факт, что любой из запросов, отправляющийся на сервер, может иметь один из таких типов данных:
GET — передаёт пользовательских данные заданному ресурсу по URI.
POST — передаёт пользовательских данные заданному ресурсу по протоколу.
HEAD — аналогичен методу GET, за исключением того, что сервер ничего не посылает в информационной части ответа.
TRACE — возвращает всё, что было введено при запросе, включая HTTP-заголовки.
DELETE — Удаляет указанный ресурс.
PUT — загружает содержимого запроса на указанный в запросе URI.
Причем это относится не только к технологии AJAX, а в принципе ко всему протоколу HTTP. Самыми распространенными являются два типа GET и POST, как правило, они широко используемы в отправке данных на сервер посредствам HTML элемента form. Именно с этими типами запроса я и приведу примеры работы веб приложения на АЯКСЕ.
Для того чтобы с помощью АЯКС технологии отправить POST запрос, нужно использовать три метода объекта request:
open — открывает соединение с сервером с указанием метода передачи данных.
setRequestHeader — устанавливает заголовок запроса.
send — отправляет запрос.
Откройте код примера №1 и замените в нем строки:
request.open ('GET', url, true);
request.send ('');
На следующие:
request.open("POST",url, true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("param1=1¶m2=2");
Исполняемый на сервере php скрипт handler_script.php должен принять вид:
<?
echo "Метод передачи данных: ".$_SERVER['REQUEST_METHOD'];
echo "<br/>Получили по средствам AJAX технологии следующие данные:";
echo "<pre>";
print_r($_REQUEST);
echo "</pre>";
?>
Вот, что получим в результате:
AJAX примеры POST запрос
Как видите заданные в методе send() параметры, оказались доступными в php скрипте, а это значит, что с ними мы смогли бы сделать все что угодно, в том числе и записать данные в базу данных.
Для того чтобы использовать тип передачи GET , нужно в методе open() указать такую информацию:
1
request.open("GET",url+"?a1=1&a2=2",true);
Вот что выйдет если мы передадим GET запрос:
AJAX примеры GET запрос
Возможно, описание примера получилось немного сумбурным, но в принципе я считаю вполне достаточным для того, чтобы определиться с тем, как передать данные из браузера на сервер методом GET и POST.
Если у вас уважаемые читатели не все получилось сделать самостоятельно, то вы можете скачать готовый исходный код примера, и поэкспериментировать над ним:
Скачать AJAX пример №2 ( Скачали: 164 чел. )
Технология AJAX, пример №3
Мы уже умеем отправлять данные с клиентской стороны, но пока не умеем обработать ответ сервера. В предыдущих примерах ответом являлось тестовое/html сообщение, генерируемое php скриптом. Но что делать, когда нужно передать более сложный формат данных, такой как XML?
Рассмотрим ситуацию когда, сервер возвращает ответ в XML виде:
<user login="root" pass="">
<name>Mark</name>
<famaly>Avdeev</famaly>
<status>Администратор блога lifeexample.ru</status>
</user>
Для этого нам надо создать на сервере файл data.xml и поместить в него вышеприведенный текст.
В файл handler_script.php поместите такой код:
1
2
header('Content-Type: text/xml; charset=windows-1251');
echo file_get_contents('data.xml');
Данные будут сначала считаны из фала data.xml, а затем возвращены в ajax запрос в формате XML.
Чтобы обработать полученный XML формат, в технологии AJAX предусмотрены два метода работы с данными:
Метод 1:
Извлекает данные, используя имя узла.
1
request.responseXML.getElementsByTagName("name")[0].childNodes[0].nodeValue;
Метод 2 :
Возвращает данные используя дочерний узел.
1
proddet .getElementsByTagName("ProductName")[0].firstChild.data;
Второй метод проще, т.к. не вызывает путаницы с индексами узлов.
В качестве примера измените ту часть кода, что отвечает за вывод результата вот этим содержимым:
if(request.status==200){
print_console("<br/><em>4: Обмен завершен.</em>");
var name = request.responseXML.getElementsByTagName("name")[0].firstChild.data;
var famaly = request.responseXML.getElementsByTagName("famaly")[0].firstChild.data;
var status = request.responseXML.getElementsByTagName("status")[0].firstChild.data;
document.getElementById("printResult").innerHTML = "<b>Имя: </b>"+name+"<br/><b>Фамилия: </b>"+famaly+"<br/><b>Статус: </b>"+status;
}
Вот какой результат мы увидим в процессе демонстрации:
технология AJAX передача XML
Скачать AJAX пример №3 ( Скачали: 166 чел. )
Как вы понимаете с полученными данными можно делать все, что заблагорассудится и выводить их в любом месте HTML документа посредствам изменения DOM структуры. Что является очень важным в использовании интерактивных интерфейсов управления web-приложением.
Заключение
Скажу, что статья могла быть значительно большей, но это бы явилось эпическим перебором, и взрывом вашего уважаемые читатели мозга. Поэтому продолжение статьи еще появится на страницах моего блога, в ближайшем будущем.
В продолжении данной статьи будет рассмотрен очень важный и удобный механизм обмена данными между сервером и AJAX приложением, по средствам использования формата JSON.
Благодарю всех, кто осилил мои AJAX примеры до конца! Надеюсь, я частично раскрыл тему "Золотая технология AJAX и примеры скриптов". Жду вашей критики, уважаемые читатели.
Спонсор поста — сервис SeoPult для полной автоматизации продвижения и рекламы сайтов.
