Что такое ajax ? Пример реализации.

AJAX, или, более длинно, Asynchronous Javascript And Xml - технология для взаимодействия с сервером без перезагрузки страниц.

За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.

Например, при нажатии кнопки голосовать - из браузера на сервер будет отправлено сообщение, а сервер ответит браузеру, что голос принят.

Здесь будет ответ сервера

Технология AJAX, как указывает первая буква A в ее названии - асинхронна, т.е браузер, отослав запрос, может делать что угодно, например, показать сообщение об ожидании ответа, прокручивать страницу, и т.п.

Вот код кнопки в примере выше:

<input value="Голосовать!" onclick="vote()" type="button" />

При нажатии она вызывает функцию vote, которая отправляет запрос на сервер, ждет ответа, а затем показывает сообщение об этом в div'е под кнопкой:

<div id="vote_status">Здесь будет ответ сервера</div>

Далее мы разберем, как она работает, более подробно.

Для обмена данными с сервером используется специальный объект XmlHttpRequest, который умеет отправлять запрос и получать ответ с сервера. Кроссбраузерно создать такой объект можно, например, так:

01	function getXmlHttp(){
02	var xmlhttp;

03	try {
04	xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

05	} catch (e) {
06	try {

07	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
08	} catch (E) {

09	xmlhttp = false;
10	}

11	}
12	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {

13	xmlhttp = new XMLHttpRequest();
14	}

15	return xmlhttp;
16	}

Более подробно о деталях реализации AJAX с использованием XmlHttpRequest и других транспортов можно почитать в разделе про общение с сервером.

Здесь мы не будем на этом останавливаться и перейдем сразу к функции vote:

01	// javascript-код голосования из примера
02	function vote() {

03	// (1) создать объект для запроса к серверу
04	var req = getXmlHttp()

05
06	// (2)

07	// span рядом с кнопкой
08	// в нем будем отображать ход выполнения

09	var statusElem = document.getElementById('vote_status')
10

11	req.onreadystatechange = function() {
12	// onreadystatechange активируется при получении ответа сервера

13
14	if (req.readyState == 4) {

15	// если запрос закончил выполняться
16

17	statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..)
18

19	if(req.status == 200) {
20	// если статус 200 (ОК) - выдать ответ пользователю

21	alert("Ответ сервера: "+req.responseText);
22	}

23	// тут можно добавить else с обработкой ошибок запроса
24	}

25
26	}

27
28	// (3) задать адрес подключения

29	req.open('GET', '/ajax_intro/vote.php', true);
30

31	// объект запроса подготовлен: указан адрес и создана функция onreadystatechange
32	// для обработки ответа сервера

33
34	// (4)

35	req.send(null);  // отослать запрос
36

37	// (5)
38	statusElem.innerHTML = 'Ожидаю ответа сервера...'

39

}

Поток выполнения, использованный vote, довольно типичен и выглядит так:

Функция создает объект XmlHttpRequest

назначает обработчик ответа сервера onreadystatechange

открывает соединение open

отправляет запрос вызовом send (ответ сервера принимается срабатывающей в асинхронном режиме функцией onreadystatechange)

показыает посетителю индикатор состояния процесса

Серверный обработчик, к которому обращен AJAX-запрос (в примере это vote.php) по сути ничем не отличается от обычной страницы. AJAX-запрос, отправляемыйXmlHttpRequest, ничем не отличается от обычного запроса.

Просто текст, который возвращает сервер, не показывается как HTML, а читается и обрабатывается функцией onreadystatechange.

Пример: vote.php для примера с голосованием

<?php

sleep(3);

echo 'Ваш голос принят!';