AJAX используется для создания более интерактивных приложений.
В следующем примере показано, как веб-страница взаимодействует с веб-сервером, когда пользователь вводит символы в поле ввода:
Когда пользователь вводит символы в поле ввода выше, выполняется функция «showHint()». Эта функция запускается событием «onkeyup»:
<html><head><script>function showHint(str){ if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return } if (window.XMLHttpRequest) { / / Код, выполняемый браузерами IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest() } else { //IE6, IE5; Код, выполняемый браузером xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint" ).innerHTML=xmlhttp.responseText; } }; xmlhttp.open("GET","gethint.php?q="+str,true();</script></head><body><p><b>В поле ввода; Введите имя:</b></p><form> Имя: <input type="text" onkeyup="showHint(this.value)"></form><p>Возвращаемое значение: <span id="txtHint"></span></p></body></html>Объяснение исходного кода:
Если поле ввода пусто (str.length==0), эта функция очистит содержимое заполнителя txtHint и выйдет из функции.
Если поле ввода не пусто, showHint() выполнит следующие шаги:
Создать объект XMLHttpRequest.
Создайте функцию, которая выполняется, когда ответ сервера готов.
Отправить запрос к файлу на сервере
Обратите внимание на параметр (q), добавленный в конец URL-адреса (содержащий содержимое поля ввода).
Страница сервера, вызванная выше через JavaScript, представляет собой PHP-файл с именем «gethint.php».
Исходный код в «gethint.php» проверяет массив имен и возвращает браузеру соответствующие имена:
<?php// Заполните массив именами $a[]="Анна";$a[]="Бретань";$a[]="Золушка";$a[]="Диана";$a[]="Ева" ; $a[]="Фиона";$a[]="Гунда";$ a[]="Хеге";$a[]="Инга";$a[]="Джоанна";$a[]="Китти";$a[]="Линда";$a[]=" Нина";$a[]="Офелия";$a[]="Петуния";$ a[]="Аманда";$a[]="Ракель";$a[]="Синди";$a[]="Дорис";$a[]="Ева";$a[]=" Эвита";$a[]="Суннива";$a[]="Тове";$a []="Унни";$a[]="Вайолет";$a[]="Лиза";$a[]="Элизабет";$a[]="Эллен";$a[]="Девушка ";$a[]="Vicky";//Получить q из URL-адреса запроса Параметр $q=$_GET["q"];//Проверяем, есть ли совпадающее значение, если q>0if (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;?>Объяснение: Если JavaScript отправляет какой-либо текст (т. е. strlen($q) > 0), происходит следующее:
Найти имена, соответствующие символам, отправленным JavaScript
Если совпадение не найдено, установите для строки ответа значение «нет предложений».
Если найдено одно или несколько совпадающих имен, установите строку ответа со всеми именами.
Отправьте ответ в заполнитель «txtHint».
Если ваш асинхронный запрос должен передаваться между доменами, вы можете проверить: Решение междоменной проблемы PHP Ajax.