Книга: Основы программирования на JavaScript

Дополнение I. Краткое руководство по AJAX

Дополнение I. Краткое руководство по AJAX

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

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

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

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

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

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

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

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

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

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

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

JavaScript

XML

HTML

CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<form>

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

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

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

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

Когда пользователь вводит данные, выполняется функция с именем "showHint()". Выполнение функции запускается событием "onkeyup". Другими словами, всякий раз, когда пользователь убирает свой палец с клавиатуры внутри поля ввода (отпускает нажатую клавишу), вызывается функция 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), то функция выполняет следующее:

[x] Определяет url (имя файла) для отправки на сервер

[x] Добавляет к url параметр (q) с содержимым поля ввода

[x] Добавляет случайное число, чтобы сервер не использовал кэшированный файл

[x] Создает объект XMLHTTP, и приказывает объекту выполнить функцию с именем stateChanged, когда произойдет изменение.

[x] Открывает объект XMLHTTP с заданным url.

[x] Посылает запрос HTTP на сервер

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

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

function stateChanged()

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

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

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

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

Приложения 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.

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

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

Это код 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 не существует.

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

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

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

Код на странице "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
%>

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

Примечание: Чтобы выполнить весь пример на PHP, не забудьте изменить значение переменной url в "clienthint.js" с "gethint.asp" на "gethint.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 можно использовать для интерактивного взаимодействия с базой данных.

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

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

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

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

<html>

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

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

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

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

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

Следующий далее код 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
}

Серверная страница, вызываемая сценарием 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 можно использовать для интерактивного взаимодействия с файлом XML.

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

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

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

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form>
Выберите компакт-диск:
<select name="cds">
<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><b>Здесь выводится информация о компакт-диске.</b></div>
</p>
</body>
</html>

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

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

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

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

Следующий далее код 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
}

Серверная страница, вызываемая кодом 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

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

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

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

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

Различные браузеры используют для создания объекта 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()

Метод open()

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

Метод send()

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

Метод abort()

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

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

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

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

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

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

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

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

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

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

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

Оглавление книги