- JavaScript. Увы, без него здесь никуда. Именно на нем реализована функциональность на стороне клиента. И даже если вы используете готовые AJAX-решения, вам не избежать того, что придется еще кое-что писать ручками.
- Объектная модель документа(DOM). Знание этой модели нужно, чтобы отобразить на странице в браузере ту информацию, что пришла в ответ на асинхронный запрос серверу от браузера.
- Объект XMLHttpRequest. Именно он позволяет из JavaScript организовать асинхронный доступ к серверу. Без этого объекта AJAX – мертв!
- Ну и, наконец, любая из серверных технологий, будь то PHP, ASP, ASP.NET, JSP, Ruby on Rails и т.д. и т.п. Вы можете использовать здесь то, что вам больше по душе.
- Страница (конечно же, посредством JavaScript) в браузере пользователя, по какому-либо событию (нажатие клавиши, таймер) с помощью объекта XMLHttpRequest подает запрос серверу, обращаясь к некоему серверному обработчику, передавая ему некоторые параметры, например, значения, введенные пользователем в поле «Имя пользователя» на форме регистрации.
- Обработчик принимает этот запрос и обрабатывает его. Чаще всего, это некий поиск базе данных, и формирование результатов в виде структуры данных, а может и в виде готовой HTML-разметки. Собственно, в результате выполнения запроса на выходе получается некая строка, в которой упакованы данные. По завершению обработки данных, обработчик выдает эти данные обратно браузеру пользователя. Упаковка чаще всего производится либо с использованием JSON, либо XML.
- Браузер принимает эту строку, распаковывает ее, и использует для отображения на загруженной странице. В нашем случае, рядом с полем «Имя пользователя» появится надпись «имя свободно» или «имя занято». Кстати, в качестве первого примера использования 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 и протестируйте ваше приложение.
