Інтерактивний Пошук засобами AJAX

Навчальний матеріал взято з ресурсу w3schools.com

AJAX можна застосовувати для для реалізації інтуітивного Пошуку.

липень 2015 рок

Зміст

AJAX Live Search

Слідуючий приклад застосування AJAX демонструє інтерактивний пошук, коли Ви отримуєте результати пошуку під час введення символів в пошуковому полі.

Інтерактивний пошук має декілька переваг порівняно з традиційним пошуком:

  • Результати пошуку відображаються під час друкування пошукового слова.
  • Список результатів зменшується, якщо продовжуєте вводити пошукове слово.
  • Коли кількість результатів пошуку стала досить мала, можна скоректувати пошукове слово, видаливши останні символи,- як результат збільшиться кількість пошукових запитів.

Пошук відбувається по веб-сторінкам навчального ресурсу w3schools.com.

Приклад інтерактивного пошуку:


Результати пошуку вибираються з XML файлу.
Щоб зробити приклад меншим та зручнішим подано лише шість посилань.

Коротке знайомство з файлом XML

XML picture

Що таке XML?

  • XML - Розширювана мова розмітки (англ. EXtensible Markup Language) — запропонований консорціумом World Wide Web (W3C) стандарт побудови мов розмітки ієрархічно структурованих даних для обміну між різними застосунками.
  • XML це мова розмітки, що схожа до HTML.
  • XML була розроблена для опису даних.
  • Теги в XML не зумовлені. Ви можете самі визначати власні теги.
  • XML це файл, що описує сам себе.
  • XML використовує DTD (Document Type Definition) для формального для опису даних.

Відмінність між XML та HTML

XML це не є заміна для HTML.

XML та HTML призначені для різних задач:
XML був розроблений для опису даних та зосередженні уваги, що це за дані.
HTML був розроблений для показу даних та зосередженні уваги як дані виглядають.

HTML показує інформацію, XML описує інформацію.

XML - власне формування структури файлу

Теги, що використовуються для розмітки та структури HTML документу визначені. Автор HTML документу може застосовувати лише ті теги, що визначені в стандартах HTML.

XML дозволяє автору визначати власні теги та структуру документу.

Пояснення роботи AJAX на стороні HTML сторінки.

Коли користувач вводить символи пошуку, то виконується функція "showResult()".
Функція активується подією "onkeyup".

<html>
<head>
<script>
function showResult(str) {
  if (str.length==0) {
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
      document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
  xmlhttp.open("GET","livesearch.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
<h4>Приклад інтерактивного пошуку:</h4>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>
</html>

Декілька слів про роботу скрипта:

Якщо поле для пошуку пусте (str.length==0), то функція очищає вміст поля виведення результату та завершує роботу.

Якщо ж поле пошуку не пусте, то функція showResult() виконує слідуюче:

  • Створює обєкт XMLHttpRequest.
  • Створює функцію, що виконується за умови готовності серверу.
  • Відправляє запит пошуку на сервер до php-обробника запиту.
  • Зауважте параметр (q) додається до URL адреси з контентом із пошукового поля.

PHP файл

Php-скрипт на сервері, що обробляє запит Javascript, має імя "livesearch.php".

Php-скрипт завантажує, XML документ, виконує запит до файлу, та повертає результат вибірки даних, як HTML:

<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");

$x=$xmlDoc->getElementsByTagName('link');

//Отримуємо параметр q із URL адреси
$q=$_GET["q"];

//Знаходимо всі посилання з файлу XML, якщо кількість символів q>0
if (strlen($q)>0) {
  $hint="";
  for($i=0; $i<($x->length); $i++) {
    $y=$x->item($i)->getElementsByTagName('title');
    $z=$x->item($i)->getElementsByTagName('url');
    if ($y->item(0)->nodeType==1) {
      //Пошук посилань, що відповідать запиту пошукового поля
      if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
        if ($hint=="") {
          $hint="<a href='" .
          $z->item(0)->childNodes->item(0)->nodeValue .
          "' target='_blank'>" .
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        } else {
          $hint=$hint . "<br /><a href='" .
          $z->item(0)->childNodes->item(0)->nodeValue .
          "' target='_blank'>" .
          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      }
    }
  }
}

// Повідомлення "Відповідностей не знайдено", якщо підказка не знайдена
// чи коректні значення пошуку
if ($hint=="") {
  $response="Відповідностей не знайдено";
} else {
  $response=$hint;
}

//Виводимо відповідь
echo $response;
?>

Якщо Javascript-скрипт надсилає текст до Php-обробника (strlen($q) > 0), то відбувається слідуюче:

- Php створює XML DOM об'єкт.
- В циклі перевіряються всі елементи <title> XML-файлу на відповідність пошуковому запиту тексту, що надісланий Javascript.
- Встановлюється відповідні посилання та заголовки посилань в змінну "$response". Якщо знаходиться більш ніж одне посилатння, то всі відповідності додаються до змінної.
- Якщо нічого не знайдено, то в змінну "$response" встановлюється текст "Відповідностей не знайдено".

<<Знайомство з AJAX та PHP

Знайомство AJAX та опитування>>