AJAX. 1 – Что это такое?

Вячеслав Гринин, January 23, 2009

Эта статья открывает целый цикл статей, посвященных загадочной и очень увлекательной теме AJAX. Я постараюсь донести до вас, дорогие читатели, что же это за зверь такой, и как это можно использовать в веб-разработке для создания веб-приложений, написанных на ASP.NET, PHP, а может и каких других языках и платформах.
Когда некий узкий круг лиц узнал про AJAX и начал его использовать в своих приложениях, вокруг него поднялась такая шумиха, что казалось, будто об этом говорят все вокруг, не исключая бабушек на лавочке у подъезда. Я сам впервые услышал этот термин, когда ехал на трамвае в универ. Рядом со мной стояла парочка, и молодой, но уже бородатый парнишка с всклокоченными волосами рассказывал своей подружке об аяксе. Использовал он при этом такие высокопарные выражения, что я бы не удивился, если б узнал, что он втихомолку по вечерам строчит нервною рукою в тетрадь с пожелтевшими страницами оды или, как минимум, сонеты. В общем, «погиб поэт, невольник чести… стал программистом он, увы».
Но лирическое вступление слишком затянулось.
Так что же такое AJAX? Расшифровывается это слово, как Asynchronous JavaScript and XML, то есть «Асинхронный JavaScript и XML». Отсюда можно понять, что для успешного использования этой технологии, никуда не деться, нужно хоть немного знать JavaScript и уметь на нем писать. А вот XML позволительно и не знать, ибо можно обойтись и без него.
Так вот AJAX – это технология, позволяющая веб-страницам на клиентской стороне, то есть прямиком из браузера пользователя, в фоновом режиме обращаться к серверу и получать от него некоторые необходимые данные. А это значит, что для обновления части страницы браузеру не нужно перезагружать всю страницу целиком. И обращение это может происходить незаметно для пользователя, не заставляя его дожидаться перезагрузки страницы. При грамотном применении эта технология позволит вам, как программисту, сэкономить время пользователя и его трафик. А мы знаем, что пользователи – жутко нервные и обидчивые создания. Не дай бог заставить юзера ждать обновления страницы слишком долго, и он тут же переметнется к вашим конкурентам. Причем это совсем не шутки.
Чтобы увидеть один из аспектов применения технологии AJAX, зайдите на http://www.yandex.ru/ или на http://www.google.ru/ , введите в строке поиска что-нибудь, например букву «п», и тут же под полем ввода откроется список наиболее популярных поисковых запросов, начинающихся с буквы «п». Откуда взялся этот список? В тот момент, когда вы отпустили клавишу «п», ваш веб-браузер в фоновом режиме отправил запрос серверу вот такого вида: http://suggest.yandex.ru/suggest-ya.cgi?ct=text/html&part=%D0%BF , а в ответ очень быстро получил вот такую строку:
suggest.apply([“п”, [“погода”, “переводчик”, “поздравления с днем рождения”, “почта”, “переводчик онлайн”, “приколы”, “прогноз погоды”, “погода в москве”, “поздравления с новым годом”, “поздравления”], []], []) , где в квадратных скобочках можно увидеть все эти наиболее популярные поисковые запросы. JavaScript в браузере быстренько добавил к этому списочку HTML-разметку и отобразил ее на вашей странице в абсолютно позиционированном DIV-е.
Сайт http://maps.google.com/ вообще весь целиком и полностью построен на AJAX. Именно поэтому, когда вы двигаете мышью карту, ваша страница не перезагружается.
Посмотрим теперь из чего состоит AJAX. В его основе лежат 4 базовые вещи:

  1. JavaScript. Если вы профессионал в веб-разработке, то без него здесь никуда. Именно на нем реализована функциональность на стороне клиента. И даже если вы используете готовые AJAX-решения, вам не избежать того, что придется еще кое-что писать ручками.
  2. Объектная модель документа(DOM). Знание этой модели нужно, чтобы отобразить на странице в браузере ту информацию, что пришла в ответ на асинхронный запрос серверу от браузера.
  3. Объект XMLHttpRequest. Именно он позволяет из JavaScript организовать асинхронный доступ к серверу. Без этого объекта AJAX – мертв!
  4. Ну и, наконец, любая из серверных технологий, будь то PHP, ASP, ASP.NET, JSP, Ruby on Rails и т.д. и т.п. Вы можете использовать здесь то, что вам больше по душе.

Как это работает?

  1. Страница (конечно же, посредством JavaScript) в браузере пользователя, по какому-либо событию (нажатие клавиши, таймер) с помощью объекта XMLHttpRequest подает запрос серверу, обращаясь к некоему серверному обработчику, передавая ему некоторые параметры, например, значения, введенные пользователем в поле «Имя пользователя» на форме регистрации.
  2. Обработчик принимает этот запрос и обрабатывает его. Чаще всего, это некий поиск базе данных, и формирование результатов в виде структуры данных, а может и в виде готовой HTML-разметки. Собственно, в результате выполнения запроса на выходе получается некая строка, в которой упакованы данные. По завершению обработки данных, обработчик выдает эти данные обратно браузеру пользователя. Упаковка чаще всего производится либо с использованием JSON, либо XML.
  3. Браузер принимает эту строку, распаковывает ее, и использует для отображения на загруженной странице. В нашем случае, рядом с полем «Имя пользователя» появится надпись «имя свободно» или «имя занято». Кстати, в качестве первого примера использования AJAX мы напишем собственное веб-приложение, которое будет отвечать на вопрос, занято или свободно выбранное имя пользователя.

Ну что ж, а теперь попробуем создать свое первое веб-приложение, использующее технологию AJAX. Для этого вам понадобится локальный веб-сервер с поддержкой PHP, и если вы не знаете, откуда его взять, то зайдите сюда , и уже спустя несколько минут у вас будет свой собственный локальный веб-сервер.
А теперь создадим наше первое AJAX-приложение.

  1. Создайте страницу регистрации пользователя index.html. На ней расположены поле ввода имени пользователя, кнопка «Проверить имя» и DIV, в котором будут выводиться результаты проверки.
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
    <html xmlns=”http://www.w3.org/1999/xhtml“>
    <head>
    <title> Простой пример на AJAX</title>
    <script type=”text/javascript” src=”ajax.js”></script>
    </head>
    <body>
    Имя пользователя: <input type=”text” id=”username”><input type=”button” onclick=”checkName()” value=”проверить имя”>
    <div id=”umess”>…</div>
    </body>
    </html>
  2. Создайте файл ajax.js, содержащий в себе клиентский скрипт на JavaScript. Его функциональность подробно прокомментирована в самом тексте.
    // Это и есть объект XmlHttpRequest
    var xmlHttp=createXmlHttpRequest();
    // синоним для getElementById
    function gebi(id) {
    return document.getElementById(id);
    }
    // функция кроссбраузерно создает объект XmlHttpRequest
    function createXmlHttpRequest() {
    var xmlHttp;
    try {
    if(window.ActiveXObject) // для IE
    xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
    else // для остальных браузеров
    xmlHttp=new XMLHttpRequest();
    }
    catch(e) {
    xmlHttp=false;
    alert(“Объект XMLHttpRequest не создан!”);
    }
    return xmlHttp;
    }
    // вызывается по клику на кнопке “Проверить имя”
    function checkName() {
    // проверяем, завершил ли объект XMLHttpRequest прошлый вызов
    if(xmlHttp.readyState==4 || xmlHttp.readyState==0) {
    // получаем строку, введенную пользователем
    usname=encodeURIComponent(gebi(“username”).value);
    // говорим объекту XMLHttpRequest куда и как он должен обратиться
    xmlHttp.open(“GET”, “handler.php?username=”+usname, true);
    // говорим объекту XMLHttpRequest какую функцию он должен вызывать при изменении своего статуса
    xmlHttp.onreadystatechange=handleResponse;
    // посылаем асинхронный запрос серверу
    xmlHttp.send(null);
    }
    }
    // вызывается при изменении статуса объекта XMLHttpRequest
    function handleResponse() {
    // проверяем по readyState завершена ли транзакция
    if(xmlHttp.readyState==4) {
    // проверяем по status успешность транзакции
    if(xmlHttp.status==200) {
    // если все порядке, читаем возвращенный XML документ
    xmlResponse=xmlHttp.responseXML;
    xmlElement=xmlResponse.documentElement;
    res=xmlElement.firstChild.data;
    var umess=gebi(“umess”);
    // в соответствии с возвращенным результатом, выводим на страницу нужное сообщение
    if(res==’true’)
    umess.innerHTML=”Имя свободно”;
    else
    umess.innerHTML=”Имя занято”;
    }
    else
    alert(“Ошибка при обращении к серверу. “)+xmlHttp.statusText;
    }
    }
  3. Создайте файл handler.php. Именно с этим серверным скриптом будет взаимодействовать страница в браузере пользователя. По хорошему, здесь должная быть настоящая проверка на существование в базе MySQL пользователя с введенным именем. В демонстрационных целях здесь реализована фиктивная проверка по первой букве имени.
    <?php
    // возвращать будем XML
    header("Content-Type: text/xml");
    // создаем заголовок XML и элемент response
    echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
    echo ('<response>');
    // из GET-строки получаем имя пользователя
    $username=$_GET['username'];
    // Фиктивная проверка на существование такого пользователя БД
    if(substr($username,0,1)=='a')
    echo('true');
    else
    echo('false');
    // закрываем элемент response
    echo('</response>');
    ?>
  4. А теперь введите в браузере http://localhost/index.html и протестируйте ваше приложение.

Здесь расположен архив со всеми необходимыми файлами. Просто распакуйте его в корневую директорию вашего веб-сервера и выполните в браузере http://localhost/index.html.

В тему:

6комментариев

Веб-дизайнер и веб-программист срывают
покровы,освещают темные места и заполняют
пробелы.
Ура!! Ура!! поднимается солнце
и освещает путь к финансовой свободе,
для простого инженера.
Мое почтение автору, спасибо.

Валерий, September 24, 2009 8:33 pm Reply

Отличная статья! Одна лишь проблема, мне нужен подобный пример только для asp.net, заранее спасибо!

Денис, October 27, 2010 11:26 pm Reply

Вот Вам пример на ASP.NET http://easy4web.ru/?p=568

Вообще в ASP.NET есть уже совсем готовые решения, встроенные в платформу, такие как: JSON-контроллеры в MVC ASP.NET; UpdatePanel; ScriptManager+asmx-ScriptService но я их не люблю из-за громоздкости генерируемых скриптов (хотя может что-то с тех пор поменялось и они стали меньше весить). Ищите и найдете. Но http://easy4web.ru/?p=568 – это вполне готовый пример использования AJAX в ASP.NET.

А вот еще пример http://easy4web.ru/?p=912

admin, October 28, 2010 1:58 pm Reply

Простой пример Ajax для чайников, по нажатию на кнопку-картинку данные из html-страницы записываются в базу и сразу же выводятся на экран без перезагрузки страницы в виде таблицы. Маленький понятный код, в PHP используется метод $_POST, SQL запросы, функция createXMLHttp(), и немного стилей, все только нужное для понимания ajax, исчерпывающие комментарии в строках. Научитесь создавать динамические web-страницы без лишних громоздких библиотек своими руками. Работа со связкой PHP,MySQL,Apache, Javasсript становится легка и понятна каждому. Поняв суть данного примера вы в дальнейшем сможете создавать Ajax-страницы любой сложности. По этой программе можно научиться PHP MySQL и AJAX одновременно.

качать тут:
http://www.plati.ru/asp/pay.asp?idd=xxxxxxx

unsleepy999, November 10, 2010 3:31 pm Reply

Таки не буду пропускать рекламу, потому что не хочу подводить своих читателей. Автор написал, что у него используется метод $_POST, не зная даже, что метод называется “POST” без префиксов, а вот когда с префиксом $_ то это уже и не метод вовсе, а массив, содержащий в себе значения полей формы, переданной методом POST. Согласимся – это терминология, путаться в которой позволительно только непрофессионалу. 🙂

admin, November 10, 2010 6:20 pm Reply

А на тему громоздких библиотек – зря вы так. jQuery, например, совсем не громоздкая библиотека, а используя ее можно сделать AJAX-приложение зная еще меньше теории, чем предлагаете вы. Как раз для новичков. Согласитесь, если создавать AJAX-приложения массово, то уж совсем не хочется писать скрипты заново – проще использовать готовые библиотеки. Тем более, что они абсолютно бесплатны.

admin, November 10, 2010 6:23 pm Reply
Ваше имя
Ваш email*
Ваш сайт
Текст вашего комментария:

Поиск по блогу:
Подписаться:
Популярные:
Облако тегов:
Разное:
Счетчик: