Как можно видеть, это простая форма 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' id='txt1'
onkeyup='showHint(this.value)'>
</form>
<p>Советуем: <span id='txtHint'></span></p>
