Месяца два назад возникла необходимость писать AJAX приложения, причем много времени на освоение технологии тогда не было. Поэтому в качестве стартовой точки было выбрано готовое решение HMTL_AJAX, которым я и пользовался до недавнего времени. Пока не зашел на один своих сайтов через старый “добрый” DialUp. Вот тут я и понял, что надо срочно менять реализацию, так как текущая содержит в себе около 35 кБ кода, что достаточно сильно замедляет загрузку страницы на Dialup-соединениях.

Все готовые реализации были отброшены сразу, так как их универсальность сразу добавляла лишний код. И было принято решение соорудить собственный код с нуля с целью достижения двух эффктов - минимизации размера кода и укрепления знаний в JavaScript…

Итак, начнем с самого главного - отравки запроса удаленному серверу и получение ответа от него. Разбор XML оставим на следущую заметку, эта и так достаточно обьемная выйдет….

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

Вот кусочек кода:


if (window.XMLHttpRequest) { // Mozilla, Safari, etc.
request = new XMLHttpRequest();
if (request.overrideMimeType) {
request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {

}
}
}


Здесь мы пытемся создать экземпляр класса XMLHttpRequest
, если не выходит, то Msxml2.XMLHTTP(это уже ActiveXObject
IE), если же и этот товарищ не создается - то Microsoft.XMLHTTP…

Теперь необходимо отправить запрос к удаленному серверу, причем сделать это нужно в асинхронном режиме(грубо говоря. отдельным потоком обозревателя интернет) для того, чтобы в момент отправки/получения данных пользователь чуствовал себя комфортно… Следующие три строчки кода:


request.onreadystatechange = dataReceived;
request.open('GET', url, true);
request.send(null);


первая назначает обработчик события onreadystatechange, которое наступает при изменении состояния обьекта типа запрос(интерфейс всех трех типов классов одинаков, что значительно упрощает программирование). В функции dataReceived и нужно писать обработчик полученных данных…

Вторая формирует запрос к удаленному серверу(тип запроса GET, второй параметр - нужный URL).
Третья - отправляет запрос на сервер.

Теперь нам необходимо написать тело функции-обработчика, которая для начала просто выведет полученный результат с помощью функции alert


function dataReceived() {
if((request.readyState == 4) && (request.status == 200)) {
alert(request.responseText);
}
}


Здесь все пока достаточно просто - при наступлении события мы просто проверяем состояние запроса(request.readyState) - нам нужно состояние 4(запрос завершен). После завершения запроса нужно проверить HTTP код возвращенной страницы(200 - все хорошо, 404 - страница не найдена, и так далее… Расшифровку кодов можно легко найти в любом поисковике).

Если все условия выполнились, то просто выводим ответ сервера(обрабатывать мы его будем позже, как и договаривались). Единственный момент, о котром я упомяну сейчас - при написании скрипта, к котрому будет обращаться обьект класса request(тоесть AJAX-сервер скрипт) нужно возвращать в заголовке content-type значение text/xml, а не стандартное text/html, иначе Internet Explorer не сможет разобрать XML, хотя сподержимое страницы request.responseText покажет правильно(над этой проблемой пухнул часа 3, FireFox очень хорошо все разбирал, а Ослик это делать упртямо отказывался)….

P.S. Довольно обьемная заметка вышла, надеюсь, что хоть кому-то она будет полезна… Если у Вас возникнут какие-то вопросы по теме, не стесняйтесь их задавать - буду стараться давать на них ответы…