В данной главе будут рассмотрены практические примеры с использованием 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;
   }
}  
?>

Работа с XML файлами

С помощью 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 можно здесь.

Работа с JSON файлами

Наш следующий пример позволяет просматривать книги имеющиеся в каталоге книжного магазина.

Пример

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 файлами и рассмотрели несколько практически полезных примеров.

После прочтения учебника появилось желание создать собственный веб-сайт? Посетите раздел веб-хостинг, чтобы узнать как можно разместить его в интернете и сделать доступным для посещения другим людям.

« Предыдущая глава На главную »