AJAX та файл XML

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

AJAX можна застосовувати для інтерактивного зв'язку з файлом типу XML.

липень 2015 рок

Зміст

Коротке знайомство з файлом 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 сувмісно з XML файлом

Слідуючий приклад демонструє роботу веб-сторінки, що отримує дані з XML-файлу.

Select a CD:


CD info will be listed here...


Пояснення роботи скрипту на HTML сторінці

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

<html>
<head>
<script>
function showCD(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","getcd.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="">Select a CD:</option>
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<div id="txtHint"><b>CD info will be listed here...</b></div>

</body>
</html>

Функція showCD() виконує слідуюче:

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

PHP файл

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

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

<?php
$q=$_GET["q"];

$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");

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

for ($i=0; $i<=$x->length-1; $i++) {
  //Process only element nodes
  if ($x->item($i)->nodeType==1) {
    if ($x->item($i)->childNodes->item(0)->nodeValue == $q) {
      $y=($x->item($i)->parentNode);
    }
  }
}

$cd=($y->childNodes);

for ($i=0;$i<$cd->length;$i++) {
  //Process only element nodes
  if ($cd->item($i)->nodeType==1) {
    echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
    echo($cd->item($i)->childNodes->item(0)->nodeValue);
    echo("<br>");
  }
}
?>

Коли відправлений CD запит із Javascript до Php-обробника, то відбувається слідуюче:

- Php створює XML DOM обєкт.
- Знаходить всі елементи , що відповідає запиту Javascript.
- Виводить інформацію про альбом ( інформація вноситься в поле "txtHint").

<<Знайомство з AJAX та Базою Даних

Знайомство з AJAX та Пошуком>>