Краткое руководство по AJAX

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

С помощью AJAX можно создавать Web-приложения, которые будут лучше, быстрее и удобнее для пользователей, чем существующие.

AJAX основывается на JavaScript и запросах HTTP.

AJAX = Асинхронный JavaScript и XML

AJAX является сокращением от "Asynchronous JavaScript And XML" (Асинхронный JavaScript и XML).

AJAX является не новым языком программирования, а просто новым способом создания Web-приложений, которые будут лучше, быстрее, и более интерактивными.

AJAX использует JavaScript для отправки и получения данных при взаимодействии Web-браузера и Web-сервера.

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

AJAX является технологией браузера

AJAX является технологией, которая выполняется в браузере клиента. Она использует асинхронную передачу данных (запросы HTTP) между браузером и Web-сервером, позволяя Web-страницам запрашивать с сервера небольшие объемы данных вместо целых страниц.

Эта технология позволяет уменьшить объем приложений Интернет, сделать их более быстрыми и более удобными для пользователей.

AJAX является технологией Web-браузера, которая не зависит от программного обеспечения Web-сервера.

AJAX основан на открытых стандартах

AJAX использует следующие открытые стандарты:

JavaScript

XML

HTML

CSS

Используемые в AJAX открытые стандарты строго определены и поддерживаются всеми основными браузерами. Приложения AJAX не зависят от используемых браузеров и платформ.

Технология AJAX улучшает приложения Интернет

Web-приложения имеют множество преимуществ при сравнении с традиционными приложениями настольных компьютеров. Они имеют более обширную аудиторию, их легче устанавливать и поддерживать, и их легче разрабатывать.

Однако приложения Интернет не всегда бывают достаточно "богаты" свойствами и удобны для использования по сравнению с традиционными приложениями.

С помощью AJAX приложения Интернет можно сделать богаче (меньше, быстрее, и легче в использовании).

AJAX можно использовать прямо сейчас

Нет ничего нового, что требует изучения.

Технология AJAX основывается на открытых стандартах. Эти стандарты использовались множеством разработчиков многие годы.

Большинство существующих Web-приложений можно легко переписать с помощью технологии AJAX вместо традиционных форм HTML.

AJAX использует XML и запросы HTTP

Традиционное Web-приложение посылает введенные данные на Web-сервер (используя форму HTML). После обработки данных Web-сервер возвращает пользователю совершенно новую Web-страницу.

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

С помощью AJAX Web-приложения могут посылать и получать данные без перезагрузки всей Web-страницы. Это делается с помощью запросов HTTP, посылаемых на сервер (в фоновом режиме), и модификации только отдельных частей Web-страницы с помощью JavaScript, когда сервер возвращает данные.

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

Как это делается, будет показано далее в этом кратком руководстве.

Пример использования AJAX

Технологию AJAX можно использовать для создания приложений с большими интерактивными возможностями.

Пример AJAX

В следующем примере приложения AJAX показано, как Web-страница может оперативно общаться с Web-сервером, когда пользователь вводит данные в Web-форму.

Описание примера

На странице выводится поле ввода с предложением ввести имя. Когда пользователь начинает вводить в этом поле имя, ниже появляются возможные варианты имен.

Форма HTML

Пусть на Web-странице имеется форма HTML со следующим кодом:

<form> 
Имя:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Советуем: <span id="txtHint"></span></p>

Как можно видеть, это простая форма HTML с полем ввода с именем "txt1".

Атрибут события этого поля ввода определяет функцию, которая будет запускаться при возникновении события onkeyup.

Параграф ниже формы содержит тег span с именем "txtHint". Тег span используется в качестве поля для подстановки данных, получаемых с Web-сервера.

Когда пользователь вводит данные, выполняется функция с именем "showHint()". Выполнение функции запускается событием "onkeyup". Другими словами, всякий раз, когда пользователь убирает свой палец с клавиатуры внутри поля ввода (отпускает нажатую клавишу), вызывается функция showHint.

Функция showHint()

Функция showHint() является очень простой функцией JavaScript, помещенной в раздел заголовка <head> страницы HTML.

Функция имеет следующий код:

function showHint(str)
{
if (str.length==0)
{ 
document.getElementById("txtHint").innerHTML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Браузер не поддерживает запросы HTTP")
return
} 
var url="gethint.asp"
url=url+"?q="+str
url=url+"sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

Функция выполняется всякий раз, когда в поле ввода вводится символ.

Если имеется какой-то ввод в текстовое поле ( str.length > 0 ), то функция выполняет следующее:

Если поле ввода будет пустым, то функция просто очищает содержимое поля для подстановки txtHint.

Функция stateChanged()

Функция stateChanged() содержит следующий код:

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
} 
}

Функция stateChanged() выполняется всякий раз, когда изменяется состояние объекта XMLHTTP.

Когда состояние будет равно 4 (или "complete"), поле для подстановки txtHint получает содержимое текста пришедшего ответа.

Браузеры AJAX

Приложения AJAX могут выполняться только в Web-браузерах с поддержкой XML.

Поддержка AJAX браузерами

Приложения AJAX могут выполняться только в Web-браузерах с полной поддержкой XML, т.е. всеми основными современными браузерами.

Предыдущий пример вызывает функцию с именем GetXmlHttpObject.

Эта функция предназначена для решения проблемы создания различных объектов XMLHTTP для различных браузеров.

Функция имеет следующий код:

function GetXmlHttpObject(handler)
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

Исходный код приложения AJAX

Далее показан полный исходный код рассмотренного выше примера AJAX.

Страница HTML для примера AJAX

Эта страница HTML содержит простую форму HTML и ссылку на файл JavaScript.

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
Имя:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Советуем: <span id="txtHint"></span></p> 
</body>
</html>

Код JavaScript приложения AJAX

Это код JavaScript, который находится в файле "clienthint.js":

var xmlHttp

function showHint(str)
{
if (str.length==0)
{ 
document.getElementById("txtHint").innerHTML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Браузер не поддерживает запросы HTTP")
return
} 
var url="gethint.asp"
url=url+"?q="+str
url=url+"sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
} 
} 

function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

Далее речь пойдет о серверной странице AJAX.

Серверные страницы AJAX для ASP и PHP

Сервера AJAX не существует.

Страницы AJAX может обрабатывать любой сервер Интернет.

Серверная страница AJAX - ASP и PHP

Серверная страница, вызываемая сценарием JavaScript в рассматриваемом примере, является простым файлом ASP с именем "gethint.asp".

Ниже представлены два примера кода серверной страницы, один, написанный на ASP, а другой – на PHP.

Пример AJAX на ASP

Код на странице "gethint.asp" написан на VBScript для Информационного сервера Интернет (IIS). Он просто проверяет массив имен и возвращает клиенту подходящие имена:

<%
dim a(30)
'Заполнение массива именами 
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
'извлечение параметра q из URL
q=ucase(request.querystring("q"))
'поиск всех рекомендаций из массива, если длина q>0
if len(q)>0 then
  hint=""
  for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint  " , "  a(i)
      end if
    end if
  next
end if
'Вывод "нет предложений" если рекомендуемого имени не найдено 
'или вывод подходящих значений 
if hint="" then 
  response.write("нет предложений")
else
  response.write(hint)
end if
%>

Пример AJAX на PHP

Приведенный выше код переписан на PHP.

Примечание: Чтобы выполнить весь пример на PHP, не забудьте изменить значение переменной url в "clienthint.js" с "gethint.asp" на "gethint.php".

Пример PHP

<?php
// Заполняем массив именами 
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//извлечение параметра q из URL
$q=$_GET["q"];
//поиск всех рекомендаций в массиве, если длина q>0
if (strlen($q) > 0)
{
  $hint="";
  for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}

// Вывод "нет предложений", если рекомендаций не найдено 
// или вывод подходящих значений 
if ($hint == "")
{
$response="нет предложений";
}
else
{
$response=$hint;
}

//вывод ответа 
echo $response;
?>

Пример AJAX c базой данных

AJAX можно использовать для интерактивного взаимодействия с базой данных.

Пример AJAX с базой данных

В следующем примере приложения AJAX будет показано, как Web-страница может извлекать информацию из базы данных с помощью технологии AJAX.

Описание примера:

На Web-странице выводится список выбора с именами клиентов.

При выборе любого клиента на странице выводится связанная с ним информация из базы данных

Разбор примера AJAX с базой данных

Описанный выше пример страницы содержит простую форму HTML и ссылку на сценарий JavaScript:

<html>
<head>
<script src="selectcustomer.js"></script>
</head>
<body>
<form> 
Выберите заказчика:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste
<option value="NORTS ">North/South
<option value="WOLZA">Wolski Zajazd 
</select>
</form>
<p>
<div id="txtHint"><b>Информация о заказчике будет выводиться здесь.</b></div>
</p>
</body>
</html>

Как можно видеть, это просто форма HTML с раскрывающимся списком с названием "customers".

Параграф ниже формы содержит тег div с именем "txtHint". Тег div используется в качестве поля для заполнения получаемой с Web-сервера информацией.

Когда пользователь выбирает данные (имя заказчика), выполняется функция "showCustomer()". Выполнение функции запускается событием "onchange". Другими словами, каждый раз, когда пользователь изменяет значение в поле раскрывающегося списка, вызывается функция showCustomer.

Код JavaScript показан далее.

Код JavaScript приложения AJAX

Следующий далее код JavaScript находится в файле "selectcustomer.js":

var xmlHttp

function showCustomer(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Браузер не поддерживает запросы HTTP")
return
} 
var url="getcustomer.asp"
url=url+"?q="+str
url=url+"sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
} 
} 

function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

Серверная страница приложения AJAX

Серверная страница, вызываемая сценарием JavaScript, является просто файлом ASP file с именем "getcustomer.asp".

Страница написана на VBScript для Информационного сервера Интернет (IIS). Ее можно легко переписать на PHP, или любой другой серверный язык.

Код выполняет команды SQL на базе данных и возвращает результат в виде таблицы HTML:

sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql  request.querystring("q")

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn

response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>"  x.name  "</b></td>")
response.write("<td>"  x.value  "</td></tr>")
next
rs.MoveNext
loop

response.write("</table>")

Пример использования AJAX c XML

AJAX можно использовать для интерактивного взаимодействия с файлом XML.

Пример использования AJAX c XML

В следующем далее примере приложения AJAX показано, как Web-страница может извлекать информацию из файла XML с помощью технологии AJAX.

Описание примера

На Web-странице выводится список выбора с именами исполнителей музыкальных произведений. При выборе исполнителя на странице появляется информация с описанием компакт-диска с записями этого музыканта.

Разбор примера AJAX с использованием XML

Рассматриваемый пример содержит простую форму HTML и ссылку на код JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form>
Выберите компакт-диск:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option> 
</select>
</form>
<p>
<div id="txtHint"><b>Здесь выводится информация о компакт-диске.</b></div>
</p>
</body>
</html>

Как можно видеть, это простая форма HTML с простым раскрывающимся списком выбора с именем "cds".

Параграф ниже формы содержит тег div с именем "txtHint". Тег div используется в качестве поля для заполнения информацией, получаемой с Web-сервера.

Когда пользователь делает свой выбор, выполняется функция с именем "showCD". Выполнение функции запускается событием "onchange". Другими словами, каждый раз, когда пользователь изменяет значение в поле раскрывающегося списка, вызывается функция showCD.

Код JavaScript показан далее.

Код JavaScript приложения AJAX

Следующий далее код JavaScript находится в файле "selectcd.js":

var xmlHttp

function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Браузер не поддерживает запросы HTTP")
return
} 
var url="getcd.asp"
url=url+"?q="+str
url=url+"sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
} 
} 

function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

Серверная страница приложения AJAX

Серверная страница, вызываемая кодом JavaScript, будет простым файлом ASP с именем "getcd.asp".

Страница написана на VBScript для Информационного сервера Интернет (IIS). Ее можно легко переписать на PHP, или любом другом серверном языке.

Код выполняет запрос на файле XML и возвращает результат в виде HTML.

q=request.querystring("q")

set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load(Server.MapPath("cd_catalog.xml"))

set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='"  q  "']")

for each x in nodes
for each y in x.childnodes
response.write("<b>"  y.nodename  ":</b> ")
response.write(y.text)
response.write("<br />")
next
next

Объект AJAX XMLHttpRequest

Объект XMLHttpRequest делает возможной технологию AJAX.

Объект XMLHttpRequest

Чтобы создавать Web-приложения AJAX, необходимо хорошо знать объект JavaScript, называемый XMLHttpRequest.

Объект XMLHttpRequest является ключевым понятием технологии AJAX. Он был доступен с момента появления в июле 2000 браузера Internet Explorer 5.5, но не был полностью понят до 2005 года, когда начались разговоры об AJAX и Web 2.0.

Ниже представлены некоторые методы и свойства этого объекта, с которыми необходимо быть знакомым.

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

Различные браузеры используют для создания объекта XMLHttpRequest различные методы.

Internet Explorer использует ActiveXObject.

Другие браузеры используют встроенный в JavaScript объект, называемый XMLHttpRequest.

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

var XMLHttp=null

if (window.XMLHttpRequest)
  {
  XMLHttp=new XMLHttpRequest()
  }
else if (window.ActiveXObject)
  {
  XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  }

Разбор приведенного примера

Сначала создается переменная XMLHttp для использования в качестве объекта XMLHttpRequest. Ее значение задается как null.

Затем проверяется, доступен ли объект window.XMLHttpRequest. Этот объект доступен в более новых версиях браузеров, таких как Firefox, Mozilla, и Opera.

Если объект доступен, то он используется для создания нового объекта.

XMLHttp=new XMLHttpRequest().

Если он не доступен, то проверяется, доступен ли объект window.ActiveXObject. Этот объект будет доступен в браузере Internet Explorer версии 5.5 и выше.

Если этот объект доступен, то он используется для создания нового объекта:

XMLHttp=new ActiveXObject().

Еще пример?

Некоторые программисты предпочтут использовать самую новую и быструю версию объекта XMLHttpRequest.

Следующий пример пытается использовать самую последнюю версию объекта "Msxml2.XMLHTTP" компании Microsoft, доступную в Internet Explorer 6, прежде чем обратиться к объекту "Microsoft.XMLHTTP", доступному в Internet Explorer 5.5 и выше.

var XMLHttp=null
try
{
XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
}
catch(e)
 {
 try
 {
 XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
}

if (XMLHttp==null)
{
XMLHttp=new XMLHttpRequest()
}

Разбор приведенного примера

Сначала создается переменная XMLHttp для использования в качестве объекта XMLHttpRequest. Ее значение задается как null.

Затем делается попытка создания объекта способом компании Microsoft, доступным в Internet Explorer 6 и более поздних версиях:

XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")

Если это порождает ошибку, то используется старый способ (Internet Explorer 5.5):

XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

Если XMLHttp по прежнему имеет значение null, то делается попытка создания объекта "стандартным" способом:

XMLHttp=new XMLHttpRequest()

Методы объекта XMLHttpRequest

Метод open()

Метод open() создает запрос для Web-сервера.

Метод send()

Метод send() посылает запрос серверу.

Метод abort()

Метод abort() отменяет текущий запрос к серверу.

Свойство readyState объекта XMLHttpRequest

Свойство readyState определяет текущее состояние объекта XMLHttpRequest.

В таблице показаны возможные значения свойства readyState:

readyState=0 после создания объекта XMLHttpRequest, но до вызова метода open().

readyState=1 после вызова метода open(), но до вызова метода send().

readyState=2 после вызова метода send().

readyState=3 после того, как браузер соединится с сервером, но до завершения сервером ответа.

readyState=4 после завершения запроса и полного получения всех данных ответа с сервера.

Различные браузеры используют свойство состояния готовности по-разному. Не стоит рассчитывать, что все браузеры будут сообщать обо всех состояниях. Некоторые не сообщают о состоянии 0 и 1.

Для приложений AJAX представляет интерес фактически только состояние 4. То есть, когда запрос завершен, и можно использовать полученные данные.

Свойство responseText объекта XMLHttpRequest

Свойство responseText содержит присланный сервером текст.