Основы программирования на JavaScript, Кан Марк

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

на обложку

Кан Марк

Шрифт:

[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>

</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). Он просто проверяет массив имен и возвращает клиенту подходящие имена:

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"