7ion blog «AJAX, начало запроса»

Реклама

Оборудование для сварки. Предлагаем поворотные сварочные столы в Санкт-Петербурге и Москве.
конструктор меню отзывы

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

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);

Берем из бд все слова начинающиеся с введенных символов и отсылаем их скрипту.

Заключение

Как видите AJAX это очень просто. Не верьте тем, кто говорит обратное. Сегодня существует множество библиотек позволяющих работать с асинхронными запросами и делать красивые интерфейсы. Наверное самая популярная это jQuery. Но все они базируются именно на том что вам только что показал я.

_{Создан Administrator(2010-06-01 12:00:51)}

Вход

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

Оставьте комментарий