Получение данных с сервера из файла XML с помощью Ajax
Поскольку XML широко используется в качестве формата данных, стоит научиться получать ответ с помощью XML и Ajax. Следующая живая демонстрация показывает вам конечный продукт, который мы создадим к концу этого урока.
Пример PHP — AJAX и XML
В следующем примере показано, как веб-страница может получать информацию из файла XML с помощью AJAX. Вы можете из выпадающего списка выбрать один из компакт-дисков и увидите, что, без перезагрузки страницы, необходимая информация будет отображаться под самим списком:
Example
HTML-код нашей веб-страницы
Когда пользователь выбирает компакт-диск в выпадающем списке этого примера, то выполняется функция showCD(). Функция showCD() запускается событием "onchange":
Пример
Попробуй сам »<html>
<head>
<script>
function showCD(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getcd.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
Выберите CD:
<select name="cds" onchange="showCD(this.value)">
<option value="">Выберите CD:</option>
<option value="Gary Moore">Gary Moore</option>
<option value="Van Morrison">Van Morrison</option>
<option value="Jorn Hoel">Jorn Hoel</option>
</select>
</form>
<div id="txtHint"><b>Информация о CD будет выведена здесь...</b></div>
</body>
</html>Пояснение к коду:
Сначала проверим, выбран ли компакт-диск из списка. Если компакт-диск не выбран (str == ""), то очистим содержимое элемента txtHint и выйдем из функции. Если же компакт-диск выбран, то выполним следующие шаги:
- Создадим объект var xmlhttp = new XMLHttpRequest();
- Создадим функцию xmlhttp.onreadystatechange, которая будет выполняться, когда будет готов ответ сервера if (this.readyState == 4 && this.status == 200)
- Отправим запрос в php-файл getcd.php на сервере
- Обратите внимание, что к URL-адресу добавлен параметр (q) (с содержимым раскрывающегося списка)
Файл-обработчик для работы с Ajax и XML
Страница на сервере, вызываемая указанным выше сценарием JavaScript, представляет собой PHP-файл "getcd.php".
Сценарий PHP загружает XML-документ cd_catalog.xml, выполняет запрос к 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++) {
//Обрабатывать только узлы элементов
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++) {
//Обрабатывать только узлы элементов
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
- Выполняется поиск всех элементов <artist>, которые соответствуют имени, отправленному из JavaScript
- Выводится информация об альбоме, заполняется данными и отправляется обратно в элемент-заполнитель "txtHint".
