Многие рунетовские сайты сообщают о новом "загадочном" AJAX'e, в то время как за границей уже кое-кто
перешел на эту технику. За примером далеко ходить не надо, небезызвестный Google уже давно использует
AJAX. Что ж, мы тоже отставать не будем. В этой статье мы пока не будем писать ничего сверхъестественного,
я лишь объясню основы использования AJAX'a, чем он является на самом деле, зачем он нужен и зачем он не
нужен. Поехали...
Известная поговорка гласит: "Новое - это хорошо забытое старое". AJAX (Asynchronous Javascript And XML) -
Асинхронные Javascript И XML, это использование js и xml, скажем так "под другим углом". То есть Ajax
приложения - это те, которые асинхронно получают XML данные посредством JavaScript. И конечно же нельзя
не упомянуть о самом сердце AJAX'a - это объект XMLHttpRequest и его аналог от Microsoft - ActiveX.
В их суть мы вникать не будем, лучше давайте разберемся с определением "асинхронно". "Асинхронность"
- антоним слова "синхронность", и я приведу простой пример работы с веб-страницей, чтобы понять
различие этих двух определений.
Допустим, у нас есть страница, на которой расположены несколько элементов, включая скриптовые (script)
и стилевые (style) теги. При синхронной пересылке данных скриптовый тег должен быть интерпретирован раньше,
чем следующий за ним элемент. Получается, что этот элемент зависит от скрипта, точнее от его выполнения.
Стилевые теги и ссылочные элементы в заглавной части документа создают тот же самый эффект. Их нужно
интерпретировать один за другим, в то время как остальные элементы ждут своей очереди. После завершения
обработки этих элементов, теги в body-секторе могут использовать параллельные подключения для того, чтобы
помочь системе ускорить процесс загрузки. Обычно сервера управляют 2-4 параллельными подключениями. То
есть от 2 до 4 изображений или других элементов могут загружаться параллельно. Но проблема остается - до
этого процесса система должна интерпретировать все в области head, что иногда очень замедляет загрузку страницы.
Асинхронная загрузка отличается тем, что процессы загружаются независимо друг от друга, поэтому главные
элементы веб-страницы уже не ждут своей очереди. Получается это потому, что мы стараемся не использовать
JavaScript в начале, а потом просто впихиваем все теги из области head, в том числе JavaScript и CSS, в
объект XMLHttpRequest. Следовательно, используются параллельные подключения и загрузка страницы ускоряется.
Все просто.
А вот теперь пора вникнуть в суть объекта XMLHttpRequest. Он был впервые был реализован компанией Microsoft
в виде объекта ActiveX, который мы так старательно отключаем в своих браузерах. Сейчас он уже доступен во
всех браузерах Mozilla и Safari. Этот объект представляет собой набор API функций, используемый в JavaScript,
VBScipt и т.п. для передачи данных XML по протоколу HTTP. Главная "фишка" этого объекта - осуществление HTTP
запросов к серверу без необходимости перезагружать страницу, что и является основой AJAX'а. Но. Объект может
работать только с теми файлами, которые находятся в том же домене, что и использующая XMLHttpRequest страница.
Ладно, хватит с нас теории, перейдем к кодингу. Сейчас я покажу и объясню как для обновления страницы
получить XML файл с помощью AJAX'a. Но хочу предупредить, что для лучшего понимания вам потребуются хотя
бы элементарные знания HTML и JavaScript. Для начала надо создать сам XML файл с нашими данными. Назовем
его data.xml.
Теперь принимаемся за JavaScript. Мы напишем скрипт, который и будет получать данные из файла XML. Его
надо будет вставить в нашу веб-страницу в области head.
Далее идет обязательная часть скрипта - проверка доступности методов. Все браузеры описывают объект
XMLHttpRequest по-своему, теперь, когда мы описали объект "xmlObj" как объект XMLHttpRequest, мы можем
описать его в зависимости от доступных методов браузера. Если этод метод не доступен, мы проверяем наличие
ActiveX, а если и его нет, заканчиваем функцию и возвращаемся.
При каждом изменении состояния объекта XMLHttpRequest вызывается событие “onreadystatechange”. Если
состояние изменяется мы используем конструкцию xmlObj.onreadystatechange = function(){ … }. Всего
может быть 5 состояний объекта (от 0 до 4). 0 – не инициализирован (перед началом работы объекта
XMLHttpRequest);
1 - загрузка (при инициализации объекта);
2 - загружен (когда получен ответ от сервера);
3 - доступен (пока объект соединен с сервером);
4 – завершен (после того как объект выполнил все задачи).
Вернемся к коду. С помощью if мы убеждаемся, что данные доступны, затем мы запускаем функцию обновления.
Она имеет два параметра: ID элемента в веб-странице (обновляемый элемент в текущей веб-странице) и данные
для заполнения этого элемента. Думаю вы заметили в нашей веб-странице тег, имеющий атрибут id="xmlObj".
Эта область и будет обновляться. С помощью свойства "responseXML" мы объявляем, что это XML файл, а с помощью
"getElementsByTagName" - ищем данные с помощью тегов, но это свойство выделяет только узел, поэтому используется
"firstChild.data", чтобы выделить текст данного узла.
Метод “open” открывает соединение на сервер, полученный файл и и JavaScript должен обработать этот запрос
синхронно (false) или асинхронно (true, по умолчанию). Так как мы используем AJAX, будем использовать асинхронный
метод. В последней строке мы просто отсылаем пустую строку на сервер. Без этой строчки состояние объекта xmlObj
никогда не достигнет «завершено», то есть не будет равным = 4, и вы больше не сможете обновить вашу страничку.
Вот и все, наше первое AJAX приложение готово. Конечно, кому-то это показалось слишком легким, но мы только пробуем,
к тому же для серьезных приложений требуются недюжие знания JavaScript.
Интересно, спросите вы, что делать тем, кто привык к php и perl? Может конечно это удивительно, но решение уже
существует. Для перла это модули HTML::AJAX и CGI::AJAX, но меня больше привлекло решение для php - библиотека xajax.
Так называемый "легкий" AJAX. Официальный ресурс - xajaxproject.org. Сегодня подробно описывать эту библиотеку
я не буду, но сделаю по поводу нее пару замечаний. Приложения, разработанные при помощи библиотеки xajax могут
асинхронно вызывать расположенные на сервере PHP функции и обновлять содержание без перезагрузки страницы. Как это
происходит? Библиотека xajax создает функции JavaScript, которые являются оболочкой для функций PHP, которые, в свою
очередь, вызываются на сервере с нашего веб-приложения. Так как оболочка - это JavaScript, то используется объект
XMLHttpRequest для асинхронного соединения. После этого возвращается XML ответ в зависимости от вызванной нами PHP
функции. Возвращенный XML содержит данные, которые будут использованы для обновления приложения. И имейте в виду,
что при использовании xajax не потребуется почти никаких знаний JavaScript. Эта библиотека значительно облегчает
написание AJAX приложений различной сложности.
Из всего вышенаписанного пора делать выводы. Для чего все-таки нужен AJAX? Где его стоит использовать, а где нет?
Я прочел выводы своих зарубежных коллег, сравнил их со своими, и получились вот такие "за" и "против":
Где стоит использовать AJAX:
1)Формы. Они очень медленны. Если асинхронно передавать данные, страница не перезагружается.
2)Навигация в виде "дерева". Вообще, такая навигация - ужас. Простая топология намного удобнее, но если уж до этого
дошло, лучше использовать AJAX.
3)Голосования. Пользователю будет приятней оставить свой голос за несколько секунд, чем за 30-40.
4)Система комментариев. Пример: на сайте есть статьи, к которым можно приписывать комментарии. Пользователю приходится
все время перезагружать страницу, чтобы увидеть новые посты. Это крайне неудобно.
5)Фильтры. Часто на сайтах делают сортировку по дате, по имени, и т.д. С AJAX это будет значительно удобнее.
6)Автозаполнение. То есть если пользователь пишет похожие слова, ему достаточно кликнуть мышкой.
Где совсем не стоит использовать AJAX:
1)Поиск. Можете даже не пробовать. Это осталось приоритетом таких языков как php и perl.
2)Обычная навигация. Для навигации между документами AJAX не поможет.
3)Обновление большого количества текста. Если текст занимает почти всю страницу, не легче ли перезагрузить ее?
4)Бесполезные украшения. Всякие подсвечивающиеся ячейки и появляющиеся подсказки будут только отвлекать пользователя.
Однако, несмотря на то, что все так прекрасно, AJAX не обошелся без большой и назойливой проблемы. Закладки и кнопки
"вперед-назад" стали для нас незаменимы из-за традиционных веб-приложений. С посещением разных сайтов у пользователя
скапливается большая коллекция закладок, да и кнопки ""вперед-назад" работают прекрасно, всегда можно вернуться к
интересующей информации. Но AJAX приложения довольно необычны и обычно огромное количество данных находится формально
на одной и той же странице. Наши браузеры тоже считают такое приложение одной страницей, поэтому при обновлении кнопки
"вперед-назад" не работают, поэтому нельзя вернутся, если что-то пропустил, а закладки в этом случае просто бесполезны.
Итак, мы рассмотрели все "за" и "против", плюсы и минусы, посмотрели что же такое этот уже далеко не "загадочный" AJAX.
Я думаю, что нужно подводить окончательный итог. AJAX - это не технология, это все-таки новый взгляд на старые вещи.
И думаю вы согласитесь со мной, что это не панацея от всех проблем. И он не перевернет Веб. Но не надо расстраиваться,
кое для чего нам эта вещь очень пригодится. Так что не стоит отбрасывать AJAX на задний план, стоит за него взяться.
Copyright (c)
patri0t [Offbit Security Team] & [Security Bunker Team]
перешел на эту технику. За примером далеко ходить не надо, небезызвестный Google уже давно использует
AJAX. Что ж, мы тоже отставать не будем. В этой статье мы пока не будем писать ничего сверхъестественного,
я лишь объясню основы использования AJAX'a, чем он является на самом деле, зачем он нужен и зачем он не
нужен. Поехали...
Известная поговорка гласит: "Новое - это хорошо забытое старое". AJAX (Asynchronous Javascript And XML) -
Асинхронные Javascript И XML, это использование js и xml, скажем так "под другим углом". То есть Ajax
приложения - это те, которые асинхронно получают XML данные посредством JavaScript. И конечно же нельзя
не упомянуть о самом сердце AJAX'a - это объект XMLHttpRequest и его аналог от Microsoft - ActiveX.
В их суть мы вникать не будем, лучше давайте разберемся с определением "асинхронно". "Асинхронность"
- антоним слова "синхронность", и я приведу простой пример работы с веб-страницей, чтобы понять
различие этих двух определений.
Допустим, у нас есть страница, на которой расположены несколько элементов, включая скриптовые (script)
и стилевые (style) теги. При синхронной пересылке данных скриптовый тег должен быть интерпретирован раньше,
чем следующий за ним элемент. Получается, что этот элемент зависит от скрипта, точнее от его выполнения.
Стилевые теги и ссылочные элементы в заглавной части документа создают тот же самый эффект. Их нужно
интерпретировать один за другим, в то время как остальные элементы ждут своей очереди. После завершения
обработки этих элементов, теги в body-секторе могут использовать параллельные подключения для того, чтобы
помочь системе ускорить процесс загрузки. Обычно сервера управляют 2-4 параллельными подключениями. То
есть от 2 до 4 изображений или других элементов могут загружаться параллельно. Но проблема остается - до
этого процесса система должна интерпретировать все в области head, что иногда очень замедляет загрузку страницы.
Асинхронная загрузка отличается тем, что процессы загружаются независимо друг от друга, поэтому главные
элементы веб-страницы уже не ждут своей очереди. Получается это потому, что мы стараемся не использовать
JavaScript в начале, а потом просто впихиваем все теги из области head, в том числе JavaScript и CSS, в
объект XMLHttpRequest. Следовательно, используются параллельные подключения и загрузка страницы ускоряется.
Все просто.
А вот теперь пора вникнуть в суть объекта XMLHttpRequest. Он был впервые был реализован компанией Microsoft
в виде объекта ActiveX, который мы так старательно отключаем в своих браузерах. Сейчас он уже доступен во
всех браузерах Mozilla и Safari. Этот объект представляет собой набор API функций, используемый в JavaScript,
VBScipt и т.п. для передачи данных XML по протоколу HTTP. Главная "фишка" этого объекта - осуществление HTTP
запросов к серверу без необходимости перезагружать страницу, что и является основой AJAX'а. Но. Объект может
работать только с теми файлами, которые находятся в том же домене, что и использующая XMLHttpRequest страница.
Ладно, хватит с нас теории, перейдем к кодингу. Сейчас я покажу и объясню как для обновления страницы
получить XML файл с помощью AJAX'a. Но хочу предупредить, что для лучшего понимания вам потребуются хотя
бы элементарные знания HTML и JavaScript. Для начала надо создать сам XML файл с нашими данными. Назовем
его data.xml.
HTML:
<?xml version="1.0" encoding="windows-1251"?>
<root>
<data>
Поздравляю! Вы научились технике AJAX.
</data>
</root>
Сейчас мы создадим простенькую веб-страничку, содержащую данные для примера. Назовем этот файл ajax.html.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<h1>Разработка веб приложений с помощью AJAX'a</h1>
<p>Эта страница демонстрирует использование AJAX'a для обновления содержания страницы.</p>
<p id="xmlObj">
Это данные по умолчанию. <a href="data.xml" title="Обзор данных XML файла." onclick="ajaxRead('data.xml');
this.style.display='none'; return false">Обзор XML данных.</a>
</p>
</body>
</html>Теперь принимаемся за JavaScript. Мы напишем скрипт, который и будет получать данные из файла XML. Его
надо будет вставить в нашу веб-страницу в области head.
HTML:
<script type="text/javascript"><!--
function ajaxRead(file){
var xmlObj = null;Далее идет обязательная часть скрипта - проверка доступности методов. Все браузеры описывают объект
XMLHttpRequest по-своему, теперь, когда мы описали объект "xmlObj" как объект XMLHttpRequest, мы можем
описать его в зависимости от доступных методов браузера. Если этод метод не доступен, мы проверяем наличие
ActiveX, а если и его нет, заканчиваем функцию и возвращаемся.
HTML:
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}При каждом изменении состояния объекта XMLHttpRequest вызывается событие “onreadystatechange”. Если
состояние изменяется мы используем конструкцию xmlObj.onreadystatechange = function(){ … }. Всего
может быть 5 состояний объекта (от 0 до 4). 0 – не инициализирован (перед началом работы объекта
XMLHttpRequest);
1 - загрузка (при инициализации объекта);
2 - загружен (когда получен ответ от сервера);
3 - доступен (пока объект соединен с сервером);
4 – завершен (после того как объект выполнил все задачи).
Вернемся к коду. С помощью if мы убеждаемся, что данные доступны, затем мы запускаем функцию обновления.
Она имеет два параметра: ID элемента в веб-странице (обновляемый элемент в текущей веб-странице) и данные
для заполнения этого элемента. Думаю вы заметили в нашей веб-странице тег, имеющий атрибут id="xmlObj".
Эта область и будет обновляться. С помощью свойства "responseXML" мы объявляем, что это XML файл, а с помощью
"getElementsByTagName" - ищем данные с помощью тегов, но это свойство выделяет только узел, поэтому используется
"firstChild.data", чтобы выделить текст данного узла.
HTML:
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}Метод “open” открывает соединение на сервер, полученный файл и и JavaScript должен обработать этот запрос
синхронно (false) или асинхронно (true, по умолчанию). Так как мы используем AJAX, будем использовать асинхронный
метод. В последней строке мы просто отсылаем пустую строку на сервер. Без этой строчки состояние объекта xmlObj
никогда не достигнет «завершено», то есть не будет равным = 4, и вы больше не сможете обновить вашу страничку.
HTML:
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
А это та самая функция обновления.
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
//--></script>Вот и все, наше первое AJAX приложение готово. Конечно, кому-то это показалось слишком легким, но мы только пробуем,
к тому же для серьезных приложений требуются недюжие знания JavaScript.
Интересно, спросите вы, что делать тем, кто привык к php и perl? Может конечно это удивительно, но решение уже
существует. Для перла это модули HTML::AJAX и CGI::AJAX, но меня больше привлекло решение для php - библиотека xajax.
Так называемый "легкий" AJAX. Официальный ресурс - xajaxproject.org. Сегодня подробно описывать эту библиотеку
я не буду, но сделаю по поводу нее пару замечаний. Приложения, разработанные при помощи библиотеки xajax могут
асинхронно вызывать расположенные на сервере PHP функции и обновлять содержание без перезагрузки страницы. Как это
происходит? Библиотека xajax создает функции JavaScript, которые являются оболочкой для функций PHP, которые, в свою
очередь, вызываются на сервере с нашего веб-приложения. Так как оболочка - это JavaScript, то используется объект
XMLHttpRequest для асинхронного соединения. После этого возвращается XML ответ в зависимости от вызванной нами PHP
функции. Возвращенный XML содержит данные, которые будут использованы для обновления приложения. И имейте в виду,
что при использовании xajax не потребуется почти никаких знаний JavaScript. Эта библиотека значительно облегчает
написание AJAX приложений различной сложности.
Из всего вышенаписанного пора делать выводы. Для чего все-таки нужен AJAX? Где его стоит использовать, а где нет?
Я прочел выводы своих зарубежных коллег, сравнил их со своими, и получились вот такие "за" и "против":
Где стоит использовать AJAX:
1)Формы. Они очень медленны. Если асинхронно передавать данные, страница не перезагружается.
2)Навигация в виде "дерева". Вообще, такая навигация - ужас. Простая топология намного удобнее, но если уж до этого
дошло, лучше использовать AJAX.
3)Голосования. Пользователю будет приятней оставить свой голос за несколько секунд, чем за 30-40.
4)Система комментариев. Пример: на сайте есть статьи, к которым можно приписывать комментарии. Пользователю приходится
все время перезагружать страницу, чтобы увидеть новые посты. Это крайне неудобно.
5)Фильтры. Часто на сайтах делают сортировку по дате, по имени, и т.д. С AJAX это будет значительно удобнее.
6)Автозаполнение. То есть если пользователь пишет похожие слова, ему достаточно кликнуть мышкой.
Где совсем не стоит использовать AJAX:
1)Поиск. Можете даже не пробовать. Это осталось приоритетом таких языков как php и perl.
2)Обычная навигация. Для навигации между документами AJAX не поможет.
3)Обновление большого количества текста. Если текст занимает почти всю страницу, не легче ли перезагрузить ее?
4)Бесполезные украшения. Всякие подсвечивающиеся ячейки и появляющиеся подсказки будут только отвлекать пользователя.
Однако, несмотря на то, что все так прекрасно, AJAX не обошелся без большой и назойливой проблемы. Закладки и кнопки
"вперед-назад" стали для нас незаменимы из-за традиционных веб-приложений. С посещением разных сайтов у пользователя
скапливается большая коллекция закладок, да и кнопки ""вперед-назад" работают прекрасно, всегда можно вернуться к
интересующей информации. Но AJAX приложения довольно необычны и обычно огромное количество данных находится формально
на одной и той же странице. Наши браузеры тоже считают такое приложение одной страницей, поэтому при обновлении кнопки
"вперед-назад" не работают, поэтому нельзя вернутся, если что-то пропустил, а закладки в этом случае просто бесполезны.
Итак, мы рассмотрели все "за" и "против", плюсы и минусы, посмотрели что же такое этот уже далеко не "загадочный" AJAX.
Я думаю, что нужно подводить окончательный итог. AJAX - это не технология, это все-таки новый взгляд на старые вещи.
И думаю вы согласитесь со мной, что это не панацея от всех проблем. И он не перевернет Веб. Но не надо расстраиваться,
кое для чего нам эта вещь очень пригодится. Так что не стоит отбрасывать AJAX на задний план, стоит за него взяться.
Copyright (c)
patri0t [Offbit Security Team] & [Security Bunker Team]