Рубрика «AJAX»

Общее представление об AJAX. Часть 2

Отправка запроса GET

Отправка запроса HTTP на сервер с помощью объекта XMLHttpRequest организуется в три этапа.

  1. Указание URL и команды HTTP для последующего выполнения на сервере.
  2. Определение функции обратного вызова при поступлении результатов запроса.
  3. Отправка запроса.

На первом этапе используется метод open() объекта XMLHttpRequest. Но это означает не установление HTTP-соединения, а лишь инициализацию данного объекта. С помощью метода open() указывается URL и команда HTTP для последующего выполнения (как правило, GET или POST).

На втором этапе в свойстве onreadystatechange данного объекта указывается функция обратного вызова. Данная функция вызывается всякий раз, когда изменяется свойство readyState объекта XMLHttpRequest. И наконец, на третьем этапе посылается запрос HTTP с помощью метода send().

Значение 4 свойства readyState в функции обратного вызова означает требуемое состояние объекта, т.е. завершение вызова. В данном случае свойство responseText содержит данные, возвращаемые сервером.

Ниже приведен пример отправки запроса GET на сервер (в данном случае это запрос файла sometext.txt, содержащего простой текст) и последующей реакции на этот вызов.

var XMLHttp = getXMLHttp();
XMLHttp.open("GET", "sometext.txt", true);
XMLHttp.onreadystatechange = handlerFunction;
XMLHttp.send(null);

function handlerFunction() {
  if (XMLHttp.readyState == 4) {
    window.alert("Returned data: " + XMLHttp.responseText);
  }
}

function getXMLHttp() {
  var XMLHttp = null;
  if (window.XMLHttpRequest) {
    try {
      XMLHttp = new XMLHttpRequest();
    } catch (e) { }
  } else if (window.ActiveXObject) {
    try {
      XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) { }
    }
  }
  return XMLHttp;
}

Состояния объекта XMLHttpRequest

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

  • 0 — не инициализировано
  • 1 — загрузка
  • 2 — загружено
  • 3 — ожидание
  • 4 — завершено

Ссылки по теме:

Общее представление об AJAX. Часть 1

В 1990-е годы компания Microsoft внедрила новый объект XMLHttpRequest типа ActiveX в свой браузер Internet Explorer версии 5.0. Этот объект был способен посылать запросы HTTP на сервер и оценивать данные, возвращаемые обратно. Это было сделано по просьбе разработчиков, работавших тогда над последней версией Outlook.

Несколько лет спустя данный объект открыли для себя разработчики проекта Mozilla, и тогда они решили создать свой вариант объекта XMLHttpRequest. Разумеется, этот объект был собственным для JavaScript, поскольку ActiveX не является межплатформенной технологией.

В связи с тем, что объект XMLHttpRequest стал широко применятся в Web-приложениях, в феврале 2005 года появилась статья “Ajax: новый подход к Web-приложениям”, написанная Джесси Гарретом. В этой статье Гаррет ввел термин AJAX, означающий Asinchronous JavaScript + XML.

С технической точки зрения AJAX — это не более чем применение объекта XMLHttpRequest для отправки запросов HTTP на сервер, который должен находиться в том же домене по соображениям безопасности, а также применение JavaScript для оценки и отображения данных на стороне клиента.

Инициализация приложения AJAX

Основу всех приложений AJAX составляет упоминавшийся выше объект XMLHttpRequest. Во всех браузерах, допускающих AJAX, реализована собственная поддержка данного объекта, но в Internet Explorer для этого требуется объект ActiveX. Впрочем, из этого правила имеется одно исключение: в версии Internet Explorer 7 также внедрена собственная поддержка XMLHttpRequest. Для создания такого объекта лучше всего использовать конструкцию try…catch и реализовать сначала собственный объект, чтобы правильно настроить браузер MS IE 7, несмотря на то, что он по-прежнему поддерживает ActiveX, а затем реализовать объект типа ActiveX следующим образом:

if (window.XMLHttpRequest) {
  // реализовать собственный объект
} else if (window.ActiveXObject) {
  // реализовать объект ActiveX
}

Что касается объекта ActiveX, то для его реализации имеется несколько способов. Дело в том, что компания Microsoft поставляет различные версии своей библиотеки XML, в недрах которой скрыт данный объект. Самый надежный способ состоит в том, чтобы проверить все версии. Но в приведенном ниже фрагменте кода проверяются лишь самые основные версии. Этот код работает в браузере Internet Explorer 5 и последующих его версиях, а также во всех остальных типах браузеров, поддерживающих AJAX.

function getXMLHttp() {
  var XMLHttp = null;
  if (window.XMLHttpRequest) {
    try {
      XMLHttp = new XMLHttpRequest();
    } catch (e) { }
  } else if (window.ActiveXObject) {
    try {
      XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) { }
    }
  }
  return XMLHttp;
}

Ссылки по теме:

Динамическое формирование списка и таблицы

При использовании AJAX часто возникает задача динамического формирования элементов HTML-страницы с использованием DOM — на основе данных, полученных от сервера. Сегодня мы рассмотрим примеры составления списка и таблицы.

Формирование списка из данных JavaScript

В приведенном ниже коде функция createList() принимает в качестве аргумента массив и преобразует его в список:

<script language="JavaScript" type="text/javascript">
function createList(data) {
  var list = document.createElement("ul");
  for (var i = 0; i < data.length; i++) {
    var newItem = document.createElement("li");
    var newText = document.createTextNode(data[i]);
    newItem.appendChild(newText);
    list.appendChild(newItem);
  }
  return list;
}

window.onload = function() {
  var list = createList(["one", "two", "three", "four", "five"]);
  document.body.appendChild(list);
}
</script>

Формирование таблицы из данных JavaScript

Составить целую таблицу немного сложнее. Для этого прежде всего придется воспользоваться элементом <tbody>, а возможно, <tfoot> либо обоими элементами вместе. В противном случае в окне браузера Internet Explorer ничего не появится.

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

Как видите, приведенный ниже код для составления таблицы получился длиннее, но, с другой стороны, сохраняется тот же подход: сначала создаются узлы, включая и текстовые, а затем они присоединяются друг к другу в нужном порядке:

<script language="JavaScript" type="text/javascript">
function createTable(data) {
  var table = document.createElement("table");
  var thead = document.createElement("thead");
  var tr = document.createElement("tr");
  for (var i = 0; i < data[0].length; i++) {
    var th = document.createElement("th");
    var newText = document.createTextNode(data[0][i]);
    th.appendChild(newText);
    tr.appendChild(th);
  }
  thead.appendChild(tr);
  table.appendChild(thead);
 
  var tbody = document.createElement("tbody");
  for (var i = 1; i < data.length; i++) {
    var tr = document.createElement("tr");
    for (var j=0; j < data[i].length; j++) {
      var td = document.createElement("td");
      var newText = document.createTextNode(data[i][j]);
      td.appendChild(newText);
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }

  table.appendChild(tbody);
  return table;
}

window.onload = function() {
  var table = createTable([
    ["1", "2", "3", "4", "5"],
    ["one", "two", "three", "four", "five"],
    ["un", "deux", "trois", "quatre", "cinq"],
    ["один", "два", "три", "четыре", "пять"]]);
  document.body.appendChild(table);
}
</script>