Ajax изнутри ajax – это акроним, раскрывающийся как Asynchronous JavaScript And xml

.

Start.js

var xmlHttp=createXmlHttpRequestObject();

function createXmlHttpRequestObject()

{

var xmlHttp;

if (window.ActiveXObject)

{

try { xmlHttp=new ActiveXObject("Microsoft XMLHTTP");

}

catch (e) {xmlHttp=false;}

if(!xmlHttp) xmlHttp= new ActiveXObject("Msxml2.XMLHTTP.5.0");

}

else

{

try {xmlHttp=new XMLHttpRequest();

}

catch (e) {xmlHttp=false; }

}
if(!xmlHttp) alert("Ошибка создания объекта XMLHttpRequest");

else { return xmlHttp;alert(xmlHttp);}

}

function process()

{

if (xmlHttp.readyState==4||xmlHttp.readyState==0)

{

name=encodeURIComponent(document.getElementById("name").value);

xmlHttp.open('GET',"start.php?name="+name,true);

xmlHttp.onreadystatechange=handleServerResponse;

xmlHttp.send(null);

}

else setTimeout('process()',1000);

}

function handleServerResponse()

{

if(xmlHttp.readyState==4)

{

if(xmlHttp.status==200)

{

helloMessage=xmlHttp.responseXML.documentElement.firstChild.data;//documentElement;

document.getElementById("divMessage").innerHTML=""+helloMessage+"";

setTimeout('process()',1000);

}

else alert("Проблема при обращении к серверу: "+xmlHttp.statusText);

}

return ;

}

Этот файл требует ряда комментариев, поясняющих его работу. Он содержит 3 функции: createXmlHttpRequestObject() – для создания объекта XmlHttpRequest, process() – для чтения содержимого текстового поля формы и отправки данных серверу, handleServerResponse() – для получения ответа сервера, его разбора и вывода в документ HTML. Первая функция создает объект XmlHttpRequest одним из трех методов, в зависимости от браузера, в котором открыт документ. Вторая функция анализирует готовность этого объекта, в случае готовности читает содержимое текстового поля формы, формирует строку запроса к серверному сценарию с передачей ему содержимого текстового поля, определяет метод, который будет обрабатывать ответ сервера (функция handleServerResponse()), и отправляет асинхронный запрос серверу методом xmlHttp.send(null). Если соединение с сервером занято, функция вызывает саму себя через 1000 миллисекунд. Третья функция определяет наличие ответа сервера, его статус (код ошибки, 200 означает ОК), извлекает из ответа в формате XML содержимое первого вложенного тега, и изменяет содержимое (innerHTML) целевого тега документа, обращаясь к нему по идентификатору (ID), а затем снова, с задержкой в 1000 миллисекунд, вызывает функцию process().

Start.php

header("Content-type: text/xml; charset=utf-8");

echo "";

echo "";

$name=$_GET['name'];

$usernames=array('ANDREW','NICOLAS','DARJA','GUN');

if(in_array(strtoupper($name),$usernames))

echo "Hello, ".htmlentities($name)."!";

else if(trim($name)=='') echo "So, what is your name?";

else echo htmlentities($name). ", I don't know you!-(";

echo "";

?>

Здесь формируется XML-документ в кодировке UTF-8 (рекомендуемая кодировка XML-документов, документы в других кодировках могут обрабатываться некорректно), извлекается параметр запроса, и в зависимости от его значения формируется один из трех вариантов ответа. Заметим, что данный сценарий отработает при любом обращении к нему, как из приложения AJAX, так и из браузера. Для того, чтобы серверный сценарий отрабатывал только запрос AJAX, рекомендуется добавить проверку клиента через переменную CHI: if($_SERVER["HTTP_X_REQUESTED_WITH"] == "XMLHttpRequest") {

Проверить работу этого примера можно по адресу http://217.71.139.66/ajax/1/

2. 
   Фреймворк JQuery
   

Непосредственное применение методов и свойств объекта XMLHttpRequest, равно как и его создание в зависимости от текущего браузера, заметно увеличивает объем кода и затрудняет его разработку. Инструмент (Фреймворк) QJuery существенно упрощает жизнь разработчику приложений AJAX. Рассмотрим основные методы, реализованные в библиотеке jquery-1.2.6.js. Часто для вызова jQuery методов используется сокращенный вариант, функция $ (знак доллара).

jQuery(..).load

Начнем с самого простого - загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры:

url запрашиваемой страницы

передаваемые данные (необязательный параметр)

функция, которой будет скормлен результат (необязательный параметр)

Приведем пример JavaScript кода:

$(document).ready(function(){ // по окончанию загрузки страницы

$('#example-1').click(function(){

// вешаем на клик по элементу с id = example-1

$(this).load('ajax/example.html');

// загрузку HTML кода из файла example.html

})

});

Пример подгружаемых данных (содержимое файла example.html):

Example

Data Loaded By AJAX

Bye-Bye

jQuery.ajax

Это самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax. У данного метода лишь один входной параметр – объект, включающий в себя все настройки (выделены параметры, которые стоит запомнить):

async - асинхронность запроса, по умолчанию true

cache - вкл/выкл кэширование данных браузером, по умолчанию true

contentType - по умолчанию “application/x-www-form-urlencoded”

data - передаваемые данные - строка иль объект

dataFilter - фильтр для входных данных

dataType - тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

global - тригер - отвечает за использование глобальных AJAX Event’ов, по умолчанию true

ifModified – триггер, проверяет были ли изменения в ответе сервера, дабы не слать еще запрос, по умолчанию false

jsonp - переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету)

processData - по умолчанию отправляемые данный заворачиваются в объект, и отправляются как “application/x-www-form-urlencoded”, если надо иначе – отключаем.

scriptCharset - кодировка ( актуально для JSONP и подгрузки JavaScript).

timeout - время таймаут в миллисекундах

type - GET либо POST

url - url запрашиваемой страницы

Локальные события AJAX:

beforeSend - срабатывает перед отправкой запроса

error - если произошла ошибка

success - если ошибок не возникло

complete - срабатывает по окончанию запроса

Для организации HTTP авторизации:

username - логин

password - пароль

Пример javaScript:

$.ajax({

url: '/ajax/example.html', // указываем URL и

dataType : "json", // тип загружаемых данных

success: function (data, textStatus) {

// вешаем свой обработчик на функцию success

$.each(data, function(i, val) { // обрабатываем полученные данные

/* ... */

});

}

});

jQuery.get

Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:

url запрашиваемой страницы

передаваемые данные (необязательный параметр)

callback функция, которой будет скормлен результат (необязательный параметр)

тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

Применение этого метода для решения задачи из первого примера показано ниже.

Файл index.html почти не изменился, лишь кроме своего файла сценария подключаем и библиотеку jquery-1.2.6.js. Файл серверного сценария на PHP не изменяется вовсе. Файл Start.js стал существенно меньше:

function process()

{

name=encodeURIComponent(document.getElementById("name").value);

$.get("start.php?name="+name,function(data)

{

helloMessage=data.documentElement.firstChild.data;

document.getElementById("divMessage").innerHTML=""+helloMessage+"";

setTimeout('process()',1000);

});

return;

}

Как видим, создание объекта XMLHttpRequest и контроль его состояния реализован в библиотеке JQuery. Проверить работу этого примера можно по адресу http://217.71.139.66/ajax/2/

jQuery.post

Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер методом POST. Может принимать следующие параметры:

url запрашиваемой страницы

передаваемые данные (необязательный параметр)

callback функция, которой будет скормлен результат (необязательный параметр)

тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

JavaScript:

$(document).ready(function(){ // по завершению загрузки страницы

$('#example-3').click(function(){

// вешаем на клик по элементу с id = example-3

$.post('ajax/example.xml', {}, function(xml){

// загрузку XML из файла example.xml

$('#example-3').html('');

$(xml).find('note').each(function(){

// заполняем DOM элемент данными из XML

$('#example-3').append('To:'+$(this).find('to').text() + '

')

.append('From: ' + $(this).find('from').text() + '

')

.append('' + $(this).find('heading').text() + '

')

.append( $(this).find('body').text() + '

');

});

}, 'xml'); // указываем явно тип данных

})

});

Файл example.xml:





Tove

Jani

Reminder

Don't forget me this weekend!