Марк Кан - Основы программирования на JavaScript
Помощь проекту
Основы программирования на JavaScript читать книгу онлайн
Технологию AJAX можно использовать для создания приложений с большими интерактивными возможностями.
В следующем примере приложения AJAX показано, как Web-страница может оперативно общаться с Web-сервером, когда пользователь вводит данные в Web-форму.
На странице выводится поле ввода с предложением ввести имя. Когда пользователь начинает вводить в этом поле имя, ниже появляются возможные варианты имен.
Пусть на 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() является очень простой функцией 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> </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" 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 находится в файле "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:
