В данной главе будут рассмотрены практические примеры с использованием AJAX.
ТвитнутьС помощью AJAX Вы можете добавить к поиску на Вашем сайте функцию подсказок (предположений).
Каждый введенный пользователем символ будет сравниваться с содержимым базы поиска и если будут найдены совпадения они будут выведены на экран. Выбрав нужное совпадение из списка пользователь может произвести поиск необходимого совпадения без необходимости дописывать запрос до конца.
Пример
function suggest(value){
document.getElementById('res').style.display='block';
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
if (xhttp.readyState==4 && xhttp.status==200)
document.getElementById('res').innerHTML=xhttp.responseText;
}
xhttp.open('GET','suggest.php?word='+encodeURI(value),true);
xhttp.send();
}
function complete(content){
document.getElementById('enter').value=content;
document.getElementById('res').style.display='none';
}
Ниже приведем содержимое скрипта suggest.php:
<?php
/* Создадим базу стран и запишем их в массив state (оригинальная база
содержит названия 73 стран) */
$state[]="Австралия";
$state[]="Австрия";
.....................
$state[]="ЮАР";
$state[]="Япония";
//Запишем переданную из JavaScript кода строку в переменную word
$word=urldecode($_GET["word"]);
/* Если переменная word содержит какие либо символы выполняем дальнейший код
иначе выполнение кода на этом завершается */
if (strlen($word) > 0){
$suggest="";
for ($i=0;$i<count($state);$i++){
/*Если символы в переменной word совпадают по значению с первыми
символами элементов массива state записать их в переменную suggest.
При этом с помощью substr мы учитываем при сравнении еще и количество переданных
символов например если были переданы только два символа их значения будут
сравниваться с двумя первыми символами всех элементов массива. Перед сравнением
все символы переводятся в нижнюю раскладку. */
if (strtolower($word)==strtolower(substr($state[$i],0,strlen($word)))){
if ($suggest==""){
$suggest="<ul id='suggest'><li onmouseover='this.style.backgroundColor=
\"#63afd0\";'
onmouseout='this.style.backgroundColor=\"white\";'
onclick='complete(this.innerHTML)'>".$state[$i]."</li>";
}
else {
$suggest=$suggest."<li onmouseover='this.style.backgroundColor=\"#63afd0\";'
onmouseout='this.style.backgroundColor=\"white\";'
onclick='complete(this.innerHTML)'>".$state[$i]."</li>";
}
}
}
/* Выводим или найденные совпадения или сообщение об их отсутствии. */
if ($suggest==""){echo "Совпадения не найдены";}
else {
$suggest=$suggest."</ul>";
echo $suggest;
}
}
?>
С помощью AJAX Вы можете удобно извлекать информацию из XML файлов.
Пример ниже с помощью AJAX наполняет таблицу данными, которые он извлекает из XML файла представляющего базу книг книжного магазина:
Пример
function extract(){
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
if (xhttp.readyState==4 && xhttp.status==200){
var base="<table id='booktab'><tr><th>Название</th>
<th>Автор</th><th>Стоимость (руб.)</th>";
base=base+"<th>Количество<br />на складе</th></tr>";
var book=xhttp.responseXML.getElementsByTagName("book");
var title=xhttp.responseXML.getElementsByTagName("title");
var author=xhttp.responseXML.getElementsByTagName("author");
var cost=xhttp.responseXML.getElementsByTagName("cost");
var quantity=xhttp.responseXML.getElementsByTagName("quantity");
for (var i=0;i<book.length;i++){
base=base+"<tr>";
base=base+"<td>"+title[i].childNodes[0].nodeValue+"</td>";
base=base+"<td>"+author[i].childNodes[0].nodeValue+"</td>";
base=base+"<td>"+cost[i].childNodes[0].nodeValue+"</td>";
base=base+"<td>"+quantity[i].childNodes[0].nodeValue+"</td>";
base=base+"</tr>";
}
base=base+"</tr></table>";
document.getElementById('res').innerHTML=base;
}
}
xhttp.open('GET','bookbase.xml',true);
xhttp.send();
}
Обратите внимание: ознакомиться с содержимым XML файла bookbase.xml можно здесь.
Наш следующий пример позволяет просматривать книги имеющиеся в каталоге книжного магазина.
Пример
var i=5;
function start(){
xhttp=new XMLHttpRequest();
xhttp.open('GET','bookbase.json',true);
xhttp.send();
xhttp.onreadystatechange=function(){
if (xhttp.readyState==4){
//Принятое содержимое json файла должно быть вначале обработано функцией eval
var json=eval( '('+xhttp.responseText+')' );
//Далее мы можем спокойно использовать данные
document.getElementById('wrap').style.display='block';
if ((i>=0) && (i<=13)){
document.getElementById('res1').innerHTML=json.bookbase[i].title;
document.getElementById('res2').innerHTML=json.bookbase[i].author;
document.getElementById('res3').innerHTML=json.bookbase[i].cost;
document.getElementById('res4').innerHTML=json.bookbase[i].quantity;
}
}
}
}
В данном учебнике мы рассмотрели уникальные возможности асинхронного обмена данными с сервером, которые предоставляет AJAX.
Мы рассмотрели свойства и методы ключевого объекта AJAX - XMLHttpRequest.
Мы также подробно обсудили взаимодействие AJAX с JSON и XML файлами и рассмотрели несколько практически полезных примеров.
После прочтения учебника появилось желание создать собственный веб-сайт? Посетите раздел веб-хостинг, чтобы узнать как можно разместить его в интернете и сделать доступным для посещения другим людям.