[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / AJAX /

AJAX - Asynchronous JavaScript and XML

AJAX – это техника построения интерактивных веб-приложений, заключающаяся в «фоновой» передаче информации между браузером и сервером. Приложения, построенные по такому принципу, не требуют полной перезагрузки при обновлении данных, тем самым начинают больше походить на обычное программное обеспечение. Понятие «AJAX» является относительно новым, однако сама техника построена на ряде более старых технологий, например, таких как JavaScript, (X)HTML, DOM, XMLHttpRequest.

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

AJAX технологию поддерживают следующие браузеры: Internet Explorer 5.0, Mozilla 1.0, Firefox, Opera 8, Netscape 7, Safari 1.2, а также их более новые версии.

Принципы работы AJAX

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

К примеру приведем видео-галерею, в которой пользователь может оценивать видеофайлы. Это может происходить либо нажатием кнопки, либо, выбирая из списка желаемую оценку, но главное, это может происходить во время просмотра самого видеофайла. В данной ситуации AJAX-приложение отправляет оценку серверу, который в свою очередь сохраняет ее в базе данных. Весь процесс протекает таким образом, что пользователь даже и не замечает отправки сообщения; проигрывание файла не прерывается. (При полной же перезагрузке страницы результат совершенно противоположный.)

Объект XMLHttpRequest

Работа AJAX основана на использовании объекта XMLHttpRequest. Как и все объекты, он имеет определенные свойства и методы.

СвойствоОписание
onreadystatechangeСобытие, происходящее при изменении состояния объекта
readyStateСостояние объекта
responseTextОбычная строка текста, возвращаемая сервером
responseXMLИнформация, полученная от сервера в XML-формате
statusСтатус http-запроса (200 = выполнение запроса прошло успешно)
statusTextТекстовое сообщение статуса (например, сообщение об ошибке)

Свойство readyState имеет 5 состояний, которые указывают на то, в какой фазе обработка запроса находится:

  • 0 – объект неинициализирован
  • 1 – «идет загрузка»
  • 2 – «загружен»
  • 3 – «интерактивен»
  • 4 – «выполнен»

МетодОписание
abort()Прерывание текущего запроса
setRequestHeader("name", "value")Установка заголовка в отправляемом запросе
getResponseHeader("name")Получение заголовка ответа
getAllResponseHeaders()Получение всех заголовков ответа
open("method", "URL", async)Присвоение параметров подключения
send(data)Отправка запроса серверу

Параметр method метода open указывает на то, отправляется ли запрос серверу согласно типу GET либо POST. URL указывает адрес скрипта, обрабатывающего запрос. Параметр async говорит о том, используется ли асинхронный метод передачи информации (true/false).

С помощью метода send запрос отправляется серверу. Если для отправки сообщения применяется метод POST, то параметр data содержит отправляемую информацию, иначе null (ноль, пустое значение).

POST и GET

POST и GET являются двумя методами передачи информации от браузера серверу и наоборот. При использовании GET, информация передается «внутри» адреса (URL) по следующему принципу: www.proging.info/guide.php?id=ajax, т.е. за знаком вопроса (?) следует первая переменная id со значением ajax. Если же требуется передать несколько переменных в одном запросе, то для этой цели используется символ амперсанд (&), разделяющий переменные друг от друга (например, id=ajax&print_version=1).

При использовании метода POST информация передается вместе с http-заголовками запроса, и тем самым скрывается от пользователей. Метод POST также рекомендуется использовать для передачи больших объемов информации либо из соображений безопасности.

Заметьте, что с применением AJAX, информация передается серверу в совершенно невидимом для пользователя режиме, т.е. даже GET запросы скрываются.

Первое AJAX-приложение

Теперь на основе ранее полученных знаний мы попытаемся создать простенькое AJAX-приложение. Начнем с написания JavaScript кода, который поместим в заголовок страницы между <script type="text/javascript"> и </script> тегами. Обозначим глобальную переменную объекта XMLHttpRequest и инициализируем ее в зависимости от используемого типа браузера.

// ссылка на объект XMLHttpRequest
var xmlHttp = null;

// создадим экземпляр объекта XMLHttpRequest, в зависимости от типа браузера
function createXMLHttpRequestObject()
{
  // если используется Internet Explorer:
  if(window.ActiveXObject)
  {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  // если используется какой-либо другой браузер, например Mozilla, Opera, Safari
  else if(window.XMLHttpRequest)
  {
    xmlHttp = new XMLHttpRequest();
  }
}

Далее создадим функцию, выполняющую основной запрос. Мы рассмотрим варианты с использованием GET и POST методов. Вам останется в зависимости от своих предпочтений выбрать только один.

// для передачи информации используем метод GET
function ajaxRequest()
{
  // инициализируем переменную xmlHttp
  createXMLHttpRequestObject();

  // обозначим функцию, которая будет выполнятся при получении ответа от сервера
  xmlHttp.onreadystatechange = handleResponse;

  // асинхронная передача информации скрипту «check.php», используя метод GET
  xmlHttp.open("GET", "check.php?name=Mike", true);

  // отправка запроса серверу
  xmlHttp.send(null);
}

Заметьте, что название функции обрабатывающей запрос (свойство onreadystatechange) мы указываем без скобок. В примере серверу отправляется URL-адрес с переменной name и значением Mike. Запрос отправляется с помощью «пустого» метода send.

// для передачи информации используем метод POST
function ajaxRequest()
{
  // инициализируем переменную xmlHttp
  createXMLHttpRequestObject();

  // обозначим функцию, которая будет выполнятся при получении ответа от сервера
  xmlHttp.onreadystatechange = handleResponse;

  // асинхронная передача информации скрипту «check.php», используя метод POST
  xmlHttp.open("POST", "check.php", true);

  // ставим заголовок, указывающий тип содержания запроса
  xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  // отправка запроса серверу
  xmlHttp.send("name=Mike");
}

В случае с POST методом отправляемая информация напрямую вставляется в метод send. Но перед этим необходимо указать заголовок "Content-Type", описывающий тип передаваемой информации.

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

<input type="button" value="Проверить имя" onclick="ajaxRequest()" />

При нажатии на кнопку выполняется функция ajaxRequest(), которая в свою очередь вызывает функцию createXMLHttpRequestObject() создающую объект XMLHttpRequest. Затем запрос отправляется серверу, и приложение переходит в состояние ожидания ответа. Когда ответ приходит, он обрабатывается в функции указанной в свойстве onreadystatechange. Функция представлена ниже:

function handleResponse()
{
  // проверяем, выполнен ли запрос полностью
  if(xmlHttp.readyState == 4)
  {
    // проверяем, прошло ли выполнение запроса успешно
    if(xmlHttp.status == 200)
    {
      // если все в порядке, обрабатываем запрос
      alert(xmlHttp.responseText);
    }
    else
    {
      alert("При выполнении запроса произошла ошибка!");
    }
  }
}

Сначала проверяем, выполнен ли запрос. Если да, то значение свойства readyState будет равно четырем. Далее идет проверка на успешное выполнение запроса (свойство status должно быть равным 200).

Полученная от сервера информация становится доступной через responseText либо responseXML свойства. Из них первое содержит информацию в обычном виде, в виде текста, а второе уже в формате XML. (Использование XML позволяет применять более сложные структуры данных при отправке и получении запросов.)

На данном этапе может возникнуть вопрос, каким образом, находящийся на сервере скрипт, отправляет информацию клиентам. В PHP это происходит, например, при вызове команды echo:

<?php echo "Тестовое сообщение, отправляемое клиентам."; ?>

Теперь свойство responseText содержит вышеупомянутое текстовое сообщение.

В свете предыдущего примера рассмотрены почти все вещи (кроме XML) необходимые для применения AJAX технологии. Когда информация получена, ее дальнейшая обработка происходит уже с помощью других технологий (JavaScript, DOM). На стороне сервера обработка запросов осуществляется уже за счет скриптовых языков программирования, таких как, например, PHP, Perl, Python.

Обработка информации в формате XML

Обработка информации в формате XML происходит главным образом с применением методов и свойств модели DOM. Главным делом, если получаемая от сервера информация представлена в формате XML, то в начале ответа должен быть непременно заголовок, описывающий тип информации. На примере языка PHP – это происходит следующим образом:

<?php
// указываем заголовок, описывающий тип отправляемой информации
header("Content-type: text/xml");

// содержание скрипта
?>

Отправляемой информации необходимо выглядеть согласно всем стандартам XML. Внизу представлен небольшой пример файла:

<?xml version="1.0" encoding="utf-8"?>
<cities>
  <city>
    <name>Москва</name>
    <country>Россия</country>
  </city>
  <city>
    <name>Берлин</name>
    <country>Германия</country>
  </city>
</cities>

Информация в формате XML образует древовидную структуру, элементы которой можно обработать, например, с помощью методов и свойств модели DOM.

var names = xmlHttp.responseXML.getElementsByTagName("name");
var name = names[0].childNodes[0].nodeValue;

alert(name);

Функция getElementsByTagName собирает все элементы name в единую таблицу names. Каждый name элемента может иметь свои дочерние узлы. Содержимое этих узлов можно получить с помощью childNodes и nodeValue. Из таблицы берем первый элемент (names[0]) и его первый дочерний узел (childNodes[0]). Значение этого узла получим из свойства nodeValue («Москва»).

Заключение

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

Дополнительную информацию об объекте XMLHttpRequest предлагает документация W3C.




Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / AJAX /

Asynchronous JavaScript and XML
06-12-2009   

Когда существующих возможностей становиться мало, а совершенствовать существующее уже некуда, тогда и происходит технологический прорыв. Таким прорывом и есть AJAX (Asynchronous JavaScript and XML) - подход к построению пользовательских интерфейсов веб-приложений, при котором web-страница, не перезагружаясь, сама догружает нужные пользователю данные. AJAX - один из компонентов концепции DHTML... подробнее

Кол. просмотров: общее - 3677 сегодня - 1

AJAX. Взаимодействие с жизненным циклом страницы
06-12-2009   

Итак, запись в таблице отредактирована, осталось её сохранить. Первое, что приходит на ум - это целиком AJAX решение, когда данные собираются из редактируемой строки DataGrid, отправляются на сервер, и в случае успеха клиентская PostBack функция перерисовывает строку таблицы уже только для просмотра... подробнее

Кол. просмотров: общее - 3650 сегодня - 0

xAJAX: Легкий AJAX в массы
03-12-2009   

Не так давно я говорил, что буду предоставлять информацию относительно PHP и Ajax. На конференции которую я провел на прошлой неделе 10 ноября 2005г. Я также обещал людям что переведу все что я приготовил для публикации на моем блоге (автор так и не перевел все это дело на Голландский, тем самым очень мне облегчил перевод )... подробнее

Кол. просмотров: общее - 3860 сегодня - 0

«Hello, закладки!» - Добавить в закладки на AJAX
03-12-2009   

Давайте обсудим более рациональные и эффективные функции для нашего любимого сайта. Начнем с самой простой вещи - кнопки Добавить в закладки. По моему, это самое наболевшее место, которое так и просится чтобы его Ajax’стили... подробнее

Кол. просмотров: общее - 238922 сегодня - 0

Simple AJAX Code-Kit (SACK) и движок DataLife
03-12-2009   

Рыская в интернете в поисках Ajax-готового новостного движка, я наткнулся на давно всем известный . Хотя этот довольно продвинутый php ресурс и содержит элементы Ajax, они по-моему не до конца раскрыты и используются довольно скупо... подробнее

Кол. просмотров: общее - 3965 сегодня - 0



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects