AJAX история, объект XmlHttpRequest

AJAX (Asynchronous JavaScript adnd XML — асинхронный JavaScript и XML) — способ получения интерактивной html страницы.

Смысл технологии в седующем. Большинство web страниц в браузере статичны. Но часто админы сайтов привносят динамику на свои страницы — DHTML. Что это дает? Возможность описать поведение браузера и какие-то изменения на странице с помощью клиентского языка программирования.

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

Но по сути все эти JavaScript статичны. JavaScript может оперировать только теми данными, которые он получил в момент загрузки страницы. Но был предложен другой способ: возможность с помощью javaScript догружать какие-то данные на страницу после того, как она загрузилась. Т.е. мы что-то сделали на странице, javaScript сам снова обратился к серверу и изменил страницу. И тогда на странице появится то, чего не было на момент загрузки. И это дает широкий простор для маневров (например, почта gmail, приходит извещение о приходе нового письма без перезагрузки стрницы).

История разработки Ajax

История разработки Ajax начинается с 1998г. Тогда компания Microsoft для своих нужд разработала Microsoft Remote Scripting. Это технология дозагрузки с помощью клиентского скрипта данных сервера (о чем написано выше в статье). Т.е. удаленное взаимодейтсвие скрипта и удаленного сервера.

Но эта технология не пошла, т.к. параллельно с ней были другие технологии, связанные с апплетами JAVA. И многие в 1998г. надеялись на развитие JAVA апплетов, т.е. что эту операцию будет делать JAVA апплет.

В 2000г. Microsoft готовилась к выпуску своего ofiice 2000, а там продукт — Outlook Web Access. Это интерактивная почта, чтобы пользователь мог работать в браузере. А для этого нужен постоянный обмен данными с сервером.

Параллельно Microsoft в 1999г. разрабатывает MSXML — парсер операционной системы. И в него внедряют объект, который расширяет его функциональность. По сути, это был мини-браузер, доступный скрипту. Этот объект умел отправлять запрос на сервер и получать ответ сервера в виде XML.

В 2005г. появилась статья Д.Д. Гаррета, где он пишет, что любые данные можно гонять между сервером и браузером. Что можно строить целые интерактивные приложения. Впервые он применил термин “AJAX”. AJAX — это набор серверных техник, которые дают много возможностей:

• Стандартные уровни презентаций, т.е. отображение страниц с помощью xml, css, xhtml.
• Взаимодействие со страницами с помощью DOM модели.
• Обмен данными, используя XML и XSLT, между сервером и браузером.
• Асинхронная загрузка данных с помощью объекта компании Microsoft — XmlHttpRequest.
• И javaScript, который связывает все это воедино.

И данную технологию c 2005г. активно начинает использовать Google (Gmail, Google Maps, AdWords, Google Analytics).

Реализация Ajax взаимодействия

Для реализации применяются несколько механизмов:

• Создание дочерних фреймов. С помощью javaScript создают элемент и помещают его на страницу. Програмно делают iframe. А его свойству “src” назначают url с данными. Iframe его загружает и просто програмно прочитывает. И тогда страница по мере надобности закачает данные с сервера.
• Создание элемента “script”. Делают тег-скрипт. Как только его добавят на страницу, он сразу выполнится. В коде можно просто написать скрипт src и ссылку на сервер. И сервер в формате javaScript присылает данные в виде массива.
• Объект XMLHttpRequest – самый удачный, реализованный Microsoft (его описание см. выше). На сегодня он входит в состав DOM модели браузера, и все современные браузеры его поддерживают.

Смысл работы: работает скрипт, он создает объект, который обменивается данными с сервером. В целях безопасности обмен происходит только с тем сервером, с которого загружен скрипт. Скрипт обрабатывает полученнные с сервера данные и меняет открытую в браузере страницу (в соответствии с этими данными).

Объект XmlHttpRequest

Объект имеет свойства:

• onreadystatechange.
• readyState — показывает, что сейчас делает объект, в каком состоянии он находится. У свойства 5 состояний (0-4), которые характеризуют его: 0 — ничего не делает, не инициализирован, 1- начало взаимодействия с сервером, 2 — серверу все отдано, 3 — сервер начал передавать данные, 4 — данные с сервера полностью получены.
• responseText — данные, полученные с сервера в виде текста — строки.
• responseXML – DOM документ ответа сервера. Здесь сервер посылает данные в виде XML, по которому строится DOM модель.
• status – статус ответа сервера.
• statusText – расшифровка статуса сервера.

Объект имеет методы:

• abort () — прекратить операцию.
• open () — готовит объект для работы с сервером.
• send () — выполняет посыл данных на сервер.
• getAllResponseHeaders () — все заголовки ответа сервера.
• ResponseHeader () — читает заголовок ответа.
• setRequestHeader () — дополнительно передать заголовки протокола HTTP на сервер.

Создание объекта XmlHttpRequest

Создается данный объект по-разному.

• Ранние версии IE.

var req = new ActiveXObject("Microsoft.XMLHTTP");

• IE 6 и ниже.

var req=new ActiveXObject("Msxml2.XMLHTTP");

• Firefox, IE7, Opera, Ghrome.

var req=new XMLHttpRequest();

• Универсальное создание объекта, без привязки к старым и новым браузерам:

function getXmlHttp(){
  var xmlhttp;
  try{
    xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
    try{
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }catch(E){
      xmlhttp =false;
    }
  }
  if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

Использование XMLHTTPRequest

• Синхронный XMLHttpRequest.

//Адрес страницы
var url=location.href;
//объект XMLHttpRequest
var request = getXmlHttpRequest()
//Запрос на сервер
request.open('GET', url, false);
request.send(null);
//Чтение ответа
if(request.status == 200) {
  alert(request.responseText);
}

• Асинхронный XMLHttpRequest.

//сам объект
var req = getXmlHttp()
//запрос на сервер
req.open('GET', url, true);
//установка обработчика
req.onreadystatechange = function(){
  if (xmlhttp.readyState == 4) { //состояние "данные получены"
     if(xmlhttp.status == 200) {
       alert(req.responseText); //ответ
         }
  }
};
req.send(null);

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

При асинхронном запросе мы послали запрос на сервер и не ждем ответа, т.е. скрипт выполняется, не получив данные с сервера. Рекомендую использовать данный тип запросов.