AJAX своими руками

Месяца два назад возникла необходимость писать 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. Довольно обьемная заметка вышла, надеюсь, что хоть кому-то она будет полезна… Если у Вас возникнут какие-то вопросы по теме, не стесняйтесь их задавать – буду стараться давать на них ответы…



Digital Ocean
Провайдер облачного хостинга - заведи свой виртуальный сервер всего за $5 в месяц !

3 Comments

  1. Snowcore

    Возвращать с сервера XML не очень удобно, лучше использовать формат JSON

  2. sicksick

    Да JSON удивительно простой, с ним легче работать

Leave a Reply