Сегодня очень популярными становятся интерактивные веб-страницы. То есть такие страницы, которые при клике на ссылку или нажатии на кнопку не перезагружаются полностью, а заменяется только часть страницы.

   До появления технологии AJAX единственным решением проблемы было скрытие не используемых элементов страницы и отображение их по мере надобности. Такой подход делал веб-страницы очень громоздкими. Это становилось абсолютно не приемлемым, так как посетитель мог не использовать и половины скрытых элементов.

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

   Итак, давайте разберемся что из себя представляет AJAX-технология.

   Важно понимать, что AJAX - это не совсем самостоятельная технология, AJAX - это элемент JavaScript. В браузерах Opera, Mozilla Firefox и Internet Explorer 7 AJAX представлен в виде объекта XMLHttpRequest. В браузере Internet Explorer 6 технология представлена ActiveX-объектом.

---

Что может AJAX?


• AJAX может отправлять GET и POST HTTP запросы, но только на тот веб-сервер с которого была получена страница


• AJAX позволяет отправлять собственные HTTP-заголовки и принимать заголовки отправленные сервером


• AJAX может принимать результат не только в виде текста, но и в виде xml-документа


• AJAX получает статус-ответ сервера, как в виде номера статуса (200, 404) так и в виде строки статуса ("Ok", "File not found")

---

   Давайте построим простую оболочку для AJAX, которая соединит возможности AJAX воедино, будет производить скрытые GET и POST запросы на наш сервер и получать ответ.

   Создадим файл ajax.js

//Создадим переменную AJAX которая будет основным интерфейсом AJAX технологии

AJAX = new Object();



//Создадим два события, для загрузки и для ошибки

AJAX.onload  = null;

AJAX.onerror = null;



//Так же нам понадобятся два масива для хранения GET и POST параметров

AJAX.GET  = new Array();

AJAX.POST = new Array();



//Создадим две переменные, которые будут хранить результат

AJAX.text = null;

AJAX.xml  = null;



//Эта переменная при ошибке будет хранить описание ошибки

AJAX.errtext = null;



//Переменная для хранения таймера соеденения

AJAX.TIMEOUT = null;



//Инициализируем технологию AJAX

if(window.XMLHttpRequest) {

  AJAX.HTTP = new XMLHttpRequest();

} else if(window.ActiveXObject) {

  AJAX.HTTP = new ActiveXObject("Microsoft.XMLHTTP");

}



//Создадим функцию для обработки состояния соеденения

AJAX.HTTP.onreadystatechange = function() {

  if(AJAX.HTTP.readyState == 4) {

    clearTimeout(AJAX.TIMEOUT);

    AJAX.TIMEOUT = null;

    if(AJAX.HTTP.status == 200) {

      AJAX.text = AJAX.HTTP.responseText;

      AJAX.xml = AJAX.HTTP.responseXML;

      //Если событие onload отслеживается, то сгенерируем его

      if(AJAX.onload !== null) AJAX.onload();

    } else {

      //Ошибка!!! Если событие onerror отслеживается, то сгенерируем его

      AJAX.errtext = AJAX.HTTP.statusText;

      if(AJAX.onerror !== null) AJAX.onerror();

    }

  }

}



//Две функции для добавления GET, POST параметров

AJAX.setGET = function(vname, value) {

  AJAX.GET[vname] = value;

}

AJAX.setPOST = function(vname, value) {

  AJAX.POST[vname] = value;

}



//Функция для отправки запроса серверу, в параметре передается путь и имя файла

AJAX.request = function(file) {

  var v;

  var post;

  AJAX.HTTP.abort(); //Закрываем предыдущие соеденение

  var url = file;

  if(AJAX.GET.length !== 0) {

    url += "?";

    for(v in AJAX.GET) {

      url += v + "=" + encodeURIComponent(AJAX.GET[v]) + "&";

    }

  }

  if(AJAX.POST.length === 0) {

    AJAX.HTTP.open("GET", url, true);

    post = null;

  } else {

    AJAX.HTTP.open("POST", url, true);

    post = "";

    for(v in AJAX.POST) {

      post += v + "=" + encodeURIComponent(AJAX.POST[v]) + "&";

    }

    AJAX.HTTP.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    AJAX.HTTP.setRequestHeader("Content-Length", post.length);

  }

  AJAX.HTTP.send(post);

  AJAX.GET  = new Array();

  AJAX.POST = new Array();

  AJAX.TIMEOUT = setTimeout("AJAX.etimeout();", 300000);

}



//Создадим функцию для обработки таймаута

AJAX.etimeout = function() {

  AJAX.HTTP.abort();

  AJAX.errtext = "Timeout";

  if(AJAX.onerror !== null) AJAX.onerror();

}

   Вся оболочка представлена в виде объекта AJAX
   Наш объект имеет два события onload, происходящие при полной удачной загрузке, и onerror, происходящие в случае ошибки. Чтобы использовать эти события достаточно присвоить им функции

AJAX.onload = function() {

  //Здесь обрабатываем удачную загрузку

}

AJAX.onerror = function() {

 //здесь обрабатываем ошибки

}

   Два свойства, из которых мы будем получать результат - это text, для текстовой информации и xml, для расшифрованного xml документа. Свойство, которое хранит описание ошибки - errtext

   Есть два метода - setGET и setPOST, с помощью которых можно добавить в запрос GET и POST параметры. Первый атрибут - это имя параметра, а второй - его значение. Важно, что эти методы должны вызываться до запроса, иначе они пойдут на следующий запрос.

   Ну и самый главный метод нашего объекта - метод request, который и осуществляет запрос к серверу. В качестве параметра он принимает имя файла, к которому будет производится запрос, например если нам нужно запросить файл mod.php из корня нашего сайта, то вызываем так:

AJAX.request("/mod.php");

---

P.S.

   Важно помнить, что AJAX работает невидимо и асинхронно, то есть не блокирует страницу во время загрузки. Надо показать посетителю, что идет загрузка, а так же не дать ему запустить запрос еще раз.

   Так же надо помнить, что элементы страницы, загруженные спомощью AJAX, не попадают в историю браузера, а значит, у посетителя не будет возможности вернуться назад обычным способом.

   И последнее, GET запросы всегда кэшируются браузером, и если ваша AJAX-страница, посылает однотипные запросы, но сервер возвращает разные ответы, то нужно запретить кэширование, делается это с помощью php. В самом начале файла, который мы запрашиваем с помощью AJAX, поместите следующий php-код: