Примеры AJAX и XML с PHP

AJAX может взаимодействовать с XML-файлами интерактивно.

Пример AJAX XML

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

Выберите один CD из списка ниже

В этом списке указывается информация о CD.

Этот пример включает три страницы:

  • Простая HTML-форма
  • XML-файл
  • JavaScript-файл
  • PHP-страница

HTML-форма

Пример включает в себя простую HTML-форму и ссылку на JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Выберите CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<p>
<div id="txtHint"><b>Информация о CD будет отображена здесь.</b></div>
</p>
</body>
</html>

Пример объяснения:

Как вы видите, это просто простая форма HTML с выпадающим списком под именем "cds".

Отрезок текста под формой содержит div с именем "txtHint". Этот div используется в качестве占位щика для данных, полученных с веб-сервера.

Когда пользователь выбирает данные, выполняется функция с именем "showCD". Выполнение этой функции запускается событием "onchange".

Иными словами, каждый раз, когда пользователь изменяет значение в выпадающем списке, вызывается функция showCD.

XML-файл

XML-файл叫做 "cd_catalog.xml". Этот файл содержит данные о коллекции CD.

JavaScript

Это код JavaScript, хранящийся в файле "selectcd.js":

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="getcd.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Пример объяснения:

Функции stateChanged() и GetXmlHttpObject такие же, как в предыдущем разделе. Вы можете ознакомиться с соответствующими объяснениями на предыдущей странице.

Функция showCD()

Если выбран элемент из выпадающего списка, функция выполняется:

  1. Вызов функции GetXmlHttpObject для создания объекта XMLHTTP
  2. Определение URL (имени файла), отправляемого на сервер
  3. Добавление параметра (q) с содержимым выпадающего списка в URL
  4. Добавление случайного числа, чтобы предотвратить использование сервером файла из кэша
  5. Вызов функции stateChanged при наступлении события
  6. Открывает объект XMLHTTP по заданному URL
  7. Отправка HTTP-запроса на сервер

PHP страница

Эта страница сервера, вызываемая JavaScript, является простым файлом PHP с именем "getcd.php".

Эта страница написана на PHP, использует XML DOM для загрузки 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($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

Примеры的解释

Когда запрос отправляется от JavaScript к PHP-странице, происходит:

  1. PHP создает объект XML DOM для файла "cd_catalog.xml"
  2. Цикл всех элементов "artist" (nodetypes = 1), найти имя, которое совпадает с переданными данными JavaScript
  3. Найти CD с правильным artist
  4. Вывести информацию о альбоме и отправить её на маркер "txtHint"