Архив за Июль 2008

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

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

При отправке запроса GET все параметры указываются как составная часть URL. А при отправке запроса POST эти данные указываются в теле самого запроса HTTP. Следует, однако, иметь в виду, что если требуется доступ к этим параметрам на стороне сервера, то необходимо правильно сформировать HTTP-заголовок Content-type. Это делается с помощью метода setRequestHeader() следующим образом:

var XMLHttp = getXMLHttp();
XMLHttp.open("POST", "post.php", true);
XMLHttp.onreadystatechange = handlerFunction;
name = encodeURIComponent("Вася");
surname = encodeURIComponent("Пупкин");
XMLHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
XMLHttp.send("name=" + name + "&surname=" + surname);

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;
}

Приведенный выше сценарий отправляет по указанному адресу POST-запрос. Скрипт post.php просто возвращает полученные данные:

<?php
  header('Content-Type: text/plain; charset=UTF-8');
  if (isset($_POST['name']) && isset($_POST['surname'])) {
    echo $_POST['name'] . ' ' . $_POST['surname'];
  } else {
    echo 'No data sent';
  }
?>

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

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

Общее представление об 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;
}

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