AJAX (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») - способ создания веб-приложений с интерактивным интерфейсом, за счет «фонового» обмена между сервером и клиентом. Обновление данных происходит без перезагрузки всей страницы, что позволяет экономить трафик.
Прим. AJAX произностися по-русски ая́кс, а по-английски эй-джэкс
Я встречал многих людей, которые считали, что AJAX это какая-то библиотека или новая технология. Это не так, AJAX – это концепция, совокупность технологий, если хотите. Он состоит из двух методов:
использование технологии фонового обращения к серверу, без перезагрузки всей страницы полностью
использование DHTML (dynamic HTML) для динамического изменения содержания страницы
Основой обмена данными является объект XMLHttpRequest. Он позволяет отправлять запросы серверу и получать ответ, но это возможно только с доменом с которого запущен скрипт.
Приведу пример. Предположим мы вводим в поле начало слова, а внизу появляются возможные предложения (совсем как в поисковиках).
Загрузка
Все начинается с загрузки объекта XMLHttpRequest. К сожалению в IE как всегда свой стандарт поэтому приходится измудрятся, лично я использую эту функцию:
function startXMLhttp() { try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); xmlHttp=false; } } } } |
В результате в переменной xmlHttp лежит XMLHttpRequest, через эту переменную мы и будем общаться с сервером.
GUI в действии
При нажатии на наше поле будет вызываться функция showHint, отправляющая запрос к серверу, после чего список предложений будет изменяться.
<form action=""> First name: <input type="text" id="userint" onkeyup="showHint(this.value)" /> </form> <p>Возможно вы хотели ввести: <span id="hints"></span></p> |
Обращение
Теперь самое интересное — отправка запроса серверу и реакция на них.
function showHint(text) { var url = "get_hint.php?count=5";//GET запрос, сколько подсказок выводить var params = "userint="+text;//POST данные, пользовательский код. xmlHttp.open("POST", url, true);
//Send the proper header information along with the request xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//у нас есть данные xmlHttp.setRequestHeader("Content-length", params.length);//сообщаем длину xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.onreadystatechange=function() { if (xmlHttp.readyState==4 && xmlHttp.status==200)//если ответ удачен { document.getElementById("hints").innerHTML=xmlhttp.responseText;//получаем ответ } } xmlHttp.send(params);//отправляем данные } |
Я объединил в этом запросе методы GET и POST, чтобы показать как передавать данные. GET как всегда просто передается в строку адреса, а вот с POST'ом дела чуть сложнее.
Надо передать header'ы о том, что мы используем данные POST и сообщить длину этих данных. Предаем данные мы строкой в качестве параметра функции xmlHttp.send().
У объекта типа XMLHttpRequest есть событие onreadystatechange, которое вызывается при изменении объектом своего состояния(данные отправились, сервер ответил и т.д). Если ответ пришел и его статус — 200(SUCCESS), то это значит, что сервер ответил. Ответ сервера можно получить в виде XML в свойстве responseXML или простым текстом в свойстве responseText.
Обработка
Я приведу простой пример обработки сервером запроса:
<?php $count=$_GET['count']; if(!is_numeric($count) || !is_set($count))$count=10;//обезопасить себя от injection $text=mysql_real_escape_string($_POST['userint']);//никаких злобных символов
$link = mysql_connect("localhost", "user", "password");
mysql_select_db ("main");
$result = mysql_query (SELECT * FROM `words`WHERE `word` LIKE '$text%');
while ($line = mysql_fetch_array($result)) { print($line['word']."<br>"); } mysql_close($link); mysql_close($link); ?> |
Берем из бд все слова начинающиеся с введенных символов и отсылаем их скрипту.
Заключение
Как видите AJAX это очень просто. Не верьте тем, кто говорит обратное. Сегодня существует множество библиотек позволяющих работать с асинхронными запросами и делать красивые интерфейсы. Наверное самая популярная это jQuery. Но все они базируются именно на том что вам только что показал я.