AJAX, начало запроса

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. Но все они базируются именно на том что вам только что показал я.


© Alexander Semion