Основы программирования на JavaScript
Шрифт:
Когда пользователь вводит данные, выполняется функция с именем "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 ("Браузер
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>
Советуем: <span id="txtHint"></span>
</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). Он просто проверяет массив имен и возвращает клиенту подходящие имена:
<%