Немного об AJAX

Главная цель технологии AJAX (Asynchronous Javascript and XML — асинхронный JavaScript и XML) состоит в том, чтобы обеспечить динамическое обновление содержимого Web-страницы без ее полной перезагрузки, а также организовать взаимодействие с сервером, при котором можно рационально распределить вычислительные ресурсы между ним и клиентом. Этой цели в разной степени можно достичь применением различных HTML-элементов и соответствующих им объектов, доступных посредством JavaScript: фреймов (обычных и плавающих), элементов <img>, <object> и <embed>. Например, при изменении значения атрибута src элемента <img> или <iframe> происходит динамическая загрузка указанного файла и отображение его содержимого в соответствующей области страницы, при этом остальные части последней не перезагружаются. Для предварительной загрузки графики, а также некоторых других целей можно использовать объект Image.

Более широкие возможности для асинхронного взаимодействия клиентских сценариев с сервером предоставляет объект XMLHttpRequest. Он уже довольно давно поддерживается всеми браузерами, но аббревиатура AJAX появилась относительно недавно, в 2005г. Именно широкое применение в клиентских скриптах объекта XMLHttpRequest обусловило появление специального термина "AJAX" для обозначения соответствующей технологии..

Применение XMLHttpRequest имеет и недостатки:

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

Имеются и другие эффекты, вызывающие нежелательные осложнения.

Важно также помнить, что через XMLHttpRequest можно обращаться лишь к ресурсам, находящимся в том же домене, что и файл, в котором используется данный XMLHttpRequest.

На данном сайте рассматриваются некоторые примеры использования технологии AJAX:

Фотогалерея. Обычно фотогалерея содержит довольно много фотографий и поэтому желательно организовать предварительную загрузку изображений прежде, чем их показывать. Для этого применяется объект Image (не путать с элементом <img>), при этом посредством скрипта вы можете контролировать окончание загрузки, узнать размеры и др. характеристики изображения, чтобы, например, выбрать масштаб его отображения на экране. См. пример.
Парольная защита страницы на стороне клиента. Для этого можно использовать и объект Image, и объект XMLHttpRequest. См. пример.
Загрузка текстовых файлов, содержащих, возможно, и HTML-код, может быть реализована посредством объекта XMLHttpRequest. Загруженное содержимое файла может быть как-то обработано (или нет) клиентским сценарием и при желании отображено на странице. Так, загрузка табличных данных в текстовом CSV-файле рассматривается на данном сайте. См. пример. Аналогичным образом устроен блок с афоризмами, размещенный на главной странице.

Свойства и методы объекта XMLHttpRequest можно найти в справочнике (например, http://ru.wikipedia.org/wiki/XHR). Здесь мы рассмотрим несколько базовых аспектов применения объекта XMLHttpRequest для загрузки текстовых файлов.

Проверка поддержки XMLHttpRequest браузером

Объект XMLHttpRequest поддерживается всеми современными браузерами. Однако в IE 6 и более ранних версиях его инициализация имеет некоторые особенности. Поэтому прежде всего в скрипте следует предусмотреть различные способы создания экземпляра XMLHttpRequest:

var req; // глобальная переменная для хранения экземпляра объекта XMLHttpRequest 
if(window.XMLHttpRequest) { // для всех современных браузеров
      req=new XMLHttpRequest(); 
} else {  // для старых IE
      try {
          req=new ActiveXObject('Msxml2.XMLHTTP'); 
      } catch (e) {
          req=new ActiveXObject('Microsoft.XMLHTTP'); 
      }
}
/* Если экземпляр объекта создан,
   то назначаем обработчик смены состояния объекта
   (в нашем случае - функцию receive):
 */
if (req) req.onreadystatechange = receive;

Периодическая загрузка текстового файла

Допустим, мы хотим загружать текстовый файл news.txt. Если его содержимое часто обновляется, то целесообразно предусмотреть его периодическую перезагрузку. Таким образом можно организовать на своем сайте ленту новостей. Функция, которая пытается одноактно загрузить текстовый файл news.txt, в простейшем случае имеет такой вид:

function loadfile() { // запрос файла news.txt
  req.open("get", 'news.txt?'+Math.random(),true); 
  req.send(null); 
}

Функция loadfile() отправляет запрос файла news.txt методом GET, задавая асинхронный режим. Это обеспечивается двумя методами объекта XMLHttpRequest - open() и send(). Метод open() задает параметры запроса, а send() - собственно посылает запрос, добавляя к нему при необходимости указанные в качестве параметра данные. Поскольку в нашем случае используется метод GET передачи запроса, то данных, указанных в методе send(null), не должно быть (указывается null). Таким образом, запрос требует от сервера просто вернуть клиенту запрашиваемый файл. При этом содержимое загруженного файла не отображается, а сохраняется в свойстве responseText объекта XMLHttpRequest.
В URL файла как параметр добавлено случайное число: 'news.txt?'+Math.random(). Это сделано только лишь для того, чтобы избежать кеширования запросов путем придания им формально уникального вида.

Для периодического вызова функции loadfile() используем метод setInterval():

newsint=setInterval("loadfile()", период_в_мс); // news

Обработка содержимого загруженного файла

Ранее отмечалось, что если объект XMLHttpRequest инициирован, то назначается обработчик (функция, например, receive) изменения состояния:

if (req) req.onreadystatechange = receive;

Структура кода функции receive() может быть такой:

function receive() {  // обработчик изменения состояния
 if (req.readyState == 4){    // данные загружены
     if (req.status == 200) { // HTTP-статус - "OK" 

	  // действия над req.responseText (содержимым загруженного файла) 

     } else {

        // действия в случае неудачи

     }
 }

Содержимое загруженного текстового файла сохраняется как значение свойства req.responseText. Это может быть обычный текст, HTML-код, JavaScript-код, текст со структурой CSV (табличные данные с символьными разделителями полей). Это содержимое может быть как-то предварительно обработано или оставлено как есть. Возможно, его потребуется отобразить в том или ином виде на странице. Для этого можно использовать свойство innerHTML для заранее созданного элемента, например, <div>.

Как уже отмечалось, на главной странице данного сайта размещен блок, в котором отображаются афоризмы. Собственно афоризмы хранятся в текстовом файле с разделителями (т.е. в так называемом CSV-файле). Указанный файл перезагружается в браузер каждые 15 минут, поскольку я время от времени выкладываю на сервер его обновленную версию. Загруженный файл обрабатывается на стороне клиента: в нем случайным образом раз в 15 секунд выбирается один из афоризмов, который и отображается на странице в отведенном для этой цели блоке.