AJAX. 1 – Что это такое?
Эта статья открывает целый цикл статей, посвященных загадочной и очень увлекательной теме 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 базовые вещи:
- JavaScript. Если вы профессионал в веб-разработке, то без него здесь никуда. Именно на нем реализована функциональность на стороне клиента. И даже если вы используете готовые AJAX-решения, вам не избежать того, что придется еще кое-что писать ручками.
- Объектная модель документа(DOM). Знание этой модели нужно, чтобы отобразить на странице в браузере ту информацию, что пришла в ответ на асинхронный запрос серверу от браузера.
- Объект XMLHttpRequest. Именно он позволяет из JavaScript организовать асинхронный доступ к серверу. Без этого объекта AJAX – мертв!
- Ну и, наконец, любая из серверных технологий, будь то PHP, ASP, ASP.NET, JSP, Ruby on Rails и т.д. и т.п. Вы можете использовать здесь то, что вам больше по душе.
Как это работает?
- Страница (конечно же, посредством JavaScript) в браузере пользователя, по какому-либо событию (нажатие клавиши, таймер) с помощью объекта XMLHttpRequest подает запрос серверу, обращаясь к некоему серверному обработчику, передавая ему некоторые параметры, например, значения, введенные пользователем в поле «Имя пользователя» на форме регистрации.
- Обработчик принимает этот запрос и обрабатывает его. Чаще всего, это некий поиск базе данных, и формирование результатов в виде структуры данных, а может и в виде готовой HTML-разметки. Собственно, в результате выполнения запроса на выходе получается некая строка, в которой упакованы данные. По завершению обработки данных, обработчик выдает эти данные обратно браузеру пользователя. Упаковка чаще всего производится либо с использованием JSON, либо XML.
- Браузер принимает эту строку, распаковывает ее, и использует для отображения на загруженной странице. В нашем случае, рядом с полем «Имя пользователя» появится надпись «имя свободно» или «имя занято». Кстати, в качестве первого примера использования AJAX мы напишем собственное веб-приложение, которое будет отвечать на вопрос, занято или свободно выбранное имя пользователя.
Ну что ж, а теперь попробуем создать свое первое веб-приложение, использующее технологию AJAX. Для этого вам понадобится локальный веб-сервер с поддержкой PHP, и если вы не знаете, откуда его взять, то зайдите сюда , и уже спустя несколько минут у вас будет свой собственный локальный веб-сервер.
А теперь создадим наше первое AJAX-приложение.
- Создайте страницу регистрации пользователя 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> - Создайте файл 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;
}
} - Создайте файл 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>');
?>
- А теперь введите в браузере http://localhost/index.html и протестируйте ваше приложение.
Здесь расположен архив со всеми необходимыми файлами. Просто распакуйте его в корневую директорию вашего веб-сервера и выполните в браузере http://localhost/index.html.
В тему:
Веб-дизайнер и веб-программист срывают
покровы,освещают темные места и заполняют
пробелы.
Ура!! Ура!! поднимается солнце
и освещает путь к финансовой свободе,
для простого инженера.
Мое почтение автору, спасибо.
Отличная статья! Одна лишь проблема, мне нужен подобный пример только для asp.net, заранее спасибо!
Денис, October 27, 2010 11:26 pmВот Вам пример на 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Простой пример 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
Таки не буду пропускать рекламу, потому что не хочу подводить своих читателей. Автор написал, что у него используется метод $_POST, не зная даже, что метод называется “POST” без префиксов, а вот когда с префиксом $_ то это уже и не метод вовсе, а массив, содержащий в себе значения полей формы, переданной методом POST. Согласимся – это терминология, путаться в которой позволительно только непрофессионалу. 🙂
admin, November 10, 2010 6:20 pmА на тему громоздких библиотек – зря вы так. jQuery, например, совсем не громоздкая библиотека, а используя ее можно сделать AJAX-приложение зная еще меньше теории, чем предлагаете вы. Как раз для новичков. Согласитесь, если создавать AJAX-приложения массово, то уж совсем не хочется писать скрипты заново – проще использовать готовые библиотеки. Тем более, что они абсолютно бесплатны.
admin, November 10, 2010 6:23 pm