Модель ajax:

В этом случае между загруженной в браузер страницей и сервером появляется еще одна прослойка - уровень AJAX.

-Пользователь загружает на web-страницу.

-По действию пользователя генерируется событие.

-Скрипт определяет, какая информация необходима для обновления страницы и передает ее уровню AJAX.

-AJAX, используя браузер, отправляет соответствующий запрос на сервер.

-Сервер возвращает уровню AJAX только ту часть документа, на которую пришел запрос или только данные в формате XML.

-Уровень AJAX вызывает скрипт на языке JavaScript, который вносит изменения на страницу без полной перезагрузки страницы.

Сервер возвращает не готовый HTML-код, а только данные необходимые для обновления. HTML-элементы создаются исходя из этих данных, с использованием методов DOM. При этом в качестве формата передачи данных обычно используется XML. Данные будут храниться в XML файле, который формируется динамически.

Последовательность действий следующая:

//Создаем новый объект-запрос JavaScript:

var req = new ActiveXObject("Microsoft.XMLHTTP"); //(для IE)

var req = new XMLHttpRequest(); // (Для всего остального)

Часто выбор класса для объекта req оформляется в виде функции

//пишем функцию, использующую этот объект

var req;

function loadXMLDoc(url) {

// branch for native XMLHttpRequest object

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

req.onreadystatechange = processReqChange;

req.open("GET", url, true);

req.send(null); }

// branch for IE/Windows ActiveX version

else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

if (req) {

req.onreadystatechange = processReqChange;

req.open("GET", url, true); //открыть запрос

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

}

}

}

//В теле HTML файла пишем скрипт:

function checkName(input, response)

{

if (response != ''){

// Response mode

message = document.getElementById('nameCheckFailed');

if (response == '1'){

message.className = 'error';

}else{

message.className = 'hidden';

}

}else{

// Input mode

url = 'http://localhost/xml/checkUserName.php?q=' \\

+ input;

loadXMLDoc(url);

}

}

В файле localhost/xml/checkUserName.php мы обрабатываем данные, полученные из командной строки в данном случае в переменной q. А результат сохраняем в XML структуре, которую храним в этом же файле. Так мы можем получить и обработать данные, полученные из БД, или те данные, которые нам необходимо обновить.

Запрос к серверу. Класс xmlHttpRequest

Класс XMLHttpRequest впервые был реализован компанией Microsoft в браузере Internet Explorer 5.0 в виде объекта ActiveX, доступного через JScript. Программисты проекта Mozilla разработали совместимую версию класса XMLHttpRequest. В дальнейшем эта возможность также была реализована компаниями Apple, Opera и другими.

XMLHttpRequest входит в набор API (XMLHTTP), используемый в JavaScript, для пересылки данных по HTTP-протоколу между браузером и веб-сервером. Кроме пересылки XML, по XMLHTTP можно обмениваться данными формы или текстовыми строками. Объект-запрос XMLHttpRequest выполняет одну из функций браузера- формирование и передачу запроса Web-серверу.

Запрос надо создать, открыть методом open(), а затем передать его методом send().

// branch for native XMLHttpRequest object

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

req.onreadystatechange = processReqChange;

req.open("GET", url, true);

req.send(null); }

В методе open() третий параметр async – флаг асинхронного выполнения. Если его значение равно true, метод send() сразу же вернет управление сценарию. В этом случае пользователь сможет продолжить работу с документом, пока запрос будет путешествовать к серверу и обратно. При получении ответа от сервера, управление должно перейти к функции обратного вызова, задаваемую свойством onreadystatechange класса XMLHttpRequest. С помощью свойства readyState проверяется состояние процесса обработки запроса (readyState = 4 окончание), необходимые данные извлекаются из свойств responseText или responseXML.