Марк Кан - Основы программирования на JavaScript

AJAX означает " Asynchronous JavaScript and XML ", т.е. Асинхронный JavaScript и XML . В действительности AJAX состоит из JavaScript , как и любое другое приложение, и соединения XMLHTTP с Web-сервером . Вот и все! Общая идея заключается в том, что можно извлекать с сервера данные просто по мере необходимости, не обновляя всю страницу.

Прежде всего AJAX почти всегда опирается на серверный язык, такой, как PHP или ASP . Когда пользователю необходимо получить новые данные, JavaScript запрашивает их, а сервер, вероятно, запросит базу данных и затем вернет данные. Эти данные можно вернуть в различной форме. Если они структурированы, то это будут обычно данные XML или JSON . Если это очень простые данные (такие, как получение описания какого-то объекта), то можно часто увидеть людей, которые просто записывают эти данные непосредственно в ответ AJAX .

При создании запроса AJAX прежде всего необходимо создать объект XMLHTTP . Netscape/Firefox , Opera и другие браузеры имеют этот объект встроенным. Internet Explorer использует ActiveXObject . Поэтому мы создадим одну функцию для работы со всеми этими браузерами:

if(typeof(XMLHttpRequest)!='undefined'){

var getXMLHttpObj = function(){ return new XMLHttpRequest(); }

} else {

var getXMLHttpObj = function(){

var activeXObjects = ['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0',

'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'];

for(var i=0; i

try{

return new ActiveXObject(activeXObjects[i]);

}catch(err){}

}

}

}

Любой браузер, который поддерживает объект XMLHttpRequest , будет использовать этот встроенный объект. Internet Explorer 6 и более ранние версии будут использовать объект ActiveX XMLHttp компании Microsoft . Существует много различных версий этого объекта, поэтому мы попробуем их все, начиная с самого нового.

Теперь, когда мы имеем объект XMLHttp , можно разместить запрос на сервере:

var oXml = getXMLHttpObj();

oXml.open('GET', 'getData.php', true);

oXml.onreadystatechange = processingFunction;

oXml.send();

function processingFunction(){

if(oXml.readyState!=4) return; // запрос не выполнен

// Результаты обрабатываются здесь. Подробнее дальше!

}

После создания объекта XMLHttp остается еще 4 дополнительных шага. Сначала определяются параметры соединения с помощью функции .open . Функция .open получает 3 аргумента: тип запроса, URL и флаг, который сообщает объекту, выполняться или нет асинхронно.

Первый аргумент, тип запроса, почти всегда будет GET или POST . Если извлекаются данные, то это будет обычно GET , а если отправляется форма с AJAX , то это часто будет POST .

Флаг асинхронности немного отличается почти от всего остального в JavaScript . Если этот флаг задан как false , то код продолжает выполняться, как и любой другой фрагмент кода, то есть он ожидает, пока объект XMLHttp завершит свою работу, прежде чем двигаться дальше. Однако, если этот флаг задан как true , то код продолжает делать то, что следует в коде после запроса. Когда состояние запроса изменяется, вызывается функция, которая определена в onreadystatechange .

В чем различие? Если флаг асинхронности задан как false , то браузер будет полностью заблокирован, пока обрабатывается запрос. Если запрошенные данные нужны в обязательном порядке для продолжения работы, то используйте это значение флага. Если флаг задан как true , то пользователь может продолжать использовать Web-страницу, но ничего не известно о том, когда вернется ответ на запрос. Может потребоваться 1/2 секунды или 1 минута. Все зависит от нагрузки на сервер и соединения конечного пользователя.

Когда все готово, посылается запрос. Затем мы ожидаем. Если запрос выполняется синхронно с функцией обработки, определенной с помощью onreadystatechange , то она будет вызываться несколько раз. На самом деле она вызывается всякий раз при изменении состояния запроса. Существуют различные состояния, такие, как отправка и загрузка данных, но нас интересует только завершение загрузки данных. Если readyState == 4 , то запрос выполнен, поэтому в любом другом случае мы просто выходим из функции.

Теперь мы получили данные, но что это за данные?

Существует три возможных варианта получения данных: XML , JSON или обычный текст. При извлечении данных из базы данных, скорее всего, будет использоваться XML или JSON . Ни один из этих вариантов не имеет явных преимуществ. XML - широко распространенный стандарт, и поэтому существует много приложений, которые работают с файлами XML . JSON является более новой идеей, но быстро становится популярным. Его обычно легче прочитать (для человека), и он требует немного меньшую полосу пропускания для пересылки.