AJAX используется для создания более динамичных приложений.
В следующем примере показано, как веб-страница взаимодействует с веб-сервером, когда пользователь вводит символы в поле ввода: Введите буквы (A–Z) в поле ввода ниже:
Попробуйте ввести букву а в поле ввода:
Оперативная информация:
Когда пользователь вводит символы в поле ввода выше, будет выполнена функция «showHint()». Эта функция запускается событием «onkeyup»:
функция showHint ( ул ) { вар xmlhttp ; если ( ул . длина == 0 ) { document.getElementById ( " txtHint " ) . innerHTML = " " ; return ; если ( окно . XMLHttpRequest ) { // IE7+, Firefox, Chrome, Opera, код выполнения браузера Safari xmlhttp = новый XMLHttpRequest ( ) } ; еще { // код выполнения браузера IE6, IE5 xmlhttp = новый ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = функция ( ) { если ( xmlhttp .readyState == 4 && xmlhttp .status == 200 ) { document.getElementById ( " txtHint " ) . } xmlhttp.open ( " GET " , "/ try / ajax /gethint.php ?q = " + str , true ) ; xmlhttp send ( ) ;Анализ исходного кода:
Если поле ввода пусто str.length==0 , функция очищает содержимое заполнителя txtHint и выходит из функции.
Если поле ввода не пусто, функция showHint() выполняет следующие задачи:
Создать объект XMLHttpRequest.
Выполнить функцию, когда ответ сервера готов.
Отправьте запрос в файл на сервере
Обратите внимание, что мы добавили параметр q (с содержимым поля ввода) в URL-адрес.
Страница сервера, вызываемая приведенным выше JavaScript, представляет собой ASP-файл с именем «gethint.asp».
Ниже мы создаем две версии файла сервера: одну, написанную на ASP, а другую на PHP.
Исходный код gethint.asp проверяет массив имен и возвращает браузеру соответствующие имена:
<%response.expires=-1dim a(30)'Заполните массив namesa(1)="Анна"a(2)="Бретань"a(3)="Золушка"a(4)="Диана"a(5)="Ева"a(6)="Фиона"a( 7)="Гунда"a(8)=" Hege"a(9)="Инга"a(10)="Джоанна"a(11)="Китти"a(12)="Линда"a(13)="Нина"a(14)="Офелия" a(15)="Петуния"a( 16)="Аманда"a(17)="Ракель"a(18)="Синди"a(19)="Дорис"a(20)="Ева"a(21)="Эвита"a(22) ="Суннива"a(23)="Тов e"a(24)="Унни"a(25)="Вайолет"a(26)="Лиза"a(27)="Элизабет"a(28)="Эллен"a(29)="Венч" a(30)="Вики"'получить параметр q из URLq=ucase(request.querystring("q"))' ищет все подсказки из массива, если длина q>0, если len(q)>0, то намек="" для i=1 до 30, если q=ucase (mid(a(i),1,len(q))) then if намек="" then намек=a(i) else намек=hint & " , " & a(i) end if end if nextend if'Output «нет предложения», если подсказка не найдена, или выведите правильные значения, если подсказка = «», затем ответ. запись («нет предложения»), иначе ответ. запись (подсказка) конец, если%>Код ниже написан на PHP и имеет тот же эффект, что и код ASP выше.
<?php// Заполняем массив имена$a[]="Анна";$a[]="Бретань";$a[]="Золушка";$a[]="Диана";$a[]="Ева";$a[] ="Фиона";$a[]="Гунда";$a []="Хеге";$a[]="Инга";$a[]="Джоанна";$a[]="Китти";$a[]="Линда";$a[]="Нина ";$a[]="Офелия";$a[]="Петуния" ";$a[]="Аманда";$a[]="Ракель";$a[]="Синди";$a[]="Дорис";$a[]="Ева";$a[ ]="Эвита";$a[]="Суннива";$a[]="Чтобы ve";$a[]="Унни";$a[]="Вайолет";$a[]="Лиза";$a[]="Элизабет";$a[]="Эллен";$a []="Девушка";$a[]="Вики";//получить параметр q из URL$q=$_GET["q"];//поиск всех подсказок из массива, если длина q>0if (strlen($q) > 0){ $hint=""; 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="no предложению";}else{ $response=$hint;}//выводим ответное эхо $ответ;?>