Пример responseXML с PHP и AJAX

AJAX можно использовать для получения информации из базы данных в формате XML.

Пример AJAX Database в XML (тестовое описание: функция не реализована)

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

Этот пример очень похож на пример "PHP AJAX Database", приведенный в предыдущем разделе, но есть одно большое различие: в этом примере мы получаем данные в формате XML, используя функцию responseXML на PHP-странице.

Получение XML-документа в ответ позволяет нам обновлять несколько мест на странице, а не просто отображать PHP-вывод.

В этом примере мы будем использовать информацию, полученную из базы данных, чтобы обновить несколько элементов <span>.

Выберите имя из выпадающего списка

Выберите одного пользователя:

　

Эта колонка состоит из четырех элементов:

  • MySQL база данных
  • Простая HTML-форма
  • JavaScript
  • PHP page

База данных

База данных, которую мы будем использовать в этом примере, выглядит примерно так:

id FirstName LastName Age Hometown Job
1 Peter Griffin 41 Quahog Brewery
2 Lois Griffin 40 Newport Piano Teacher
3 Joseph Swanson 39 Quahog Police Officer
4 Glenn Quagmire 41 Quahog Pilot

HTML-форма

Пример, приведенный выше, включает простую HTML-форму и ссылку на JavaScript:

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
Выберите пользователя:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<h2>
<span id="firstname"></span> <span id="lastname"></span>
</h2>
<span id="job"></span>
<div style="text-align: right">
<span id="age_text"></span>
<span id="age"></span>
<span id="hometown_text"></span>
<span id="hometown"></span>
</div>
</body>
</html>

Пример объяснения - HTML-форма

  • HTML-форма представляет собой выпадающий список, значение атрибута name которого равно "users", а значения вариантов соответствуют полю id в базе данных
  • Под формой есть несколько элементов <span>, которые служат占ачками для различных значений, которые мы получаем
  • Когда пользователь выбирает конкретный вариант, выполняется функция "showUser()". Выполнение функции инициируется событием "onchange"

Иначе говоря, каждый раз, когда пользователь изменяет значение в выпадающем списке, функция showUser() выполняется и результат выводится в указанном элементе <span>.

JavaScript

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

var xmlHttp
функция showUser(str)
 { 
 xmlHttp = GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert("Browser does not support HTTP Request");
  return;
  } 
 var url="responsexml.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")
{
 xmlDoc=xmlHttp.responseXML;
 document.getElementById("firstname").innerHTML=
 xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
 document.getElementById("lastname").innerHTML=
 xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
 document.getElementById("job").innerHTML=
 xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
 document.getElementById("age_text").innerHTML="Age: ";
 document.getElementById("age").innerHTML=
 xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
 document.getElementById("hometown_text").innerHTML="<br/>From: ";
 document.getElementById("hometown").innerHTML=
 xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
 }
}
function GetXmlHttpObject()
 { 
 var objXMLHttp=null
 if (window.XMLHttpRequest)
  {
  objXMLHttp=new XMLHttpRequest()
  }
 else if (window.ActiveXObject)
  {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  }
 return objXMLHttp
 }

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

showUser() and GetXmlHttpObject functions with Пример базы данных MySQL с PHP и AJAX The examples in this section are the same. You can refer to the relevant explanations in them.

stateChanged() function

If an item in the dropdown list is selected, this function is executed:

  1. Using the responseXML function, define the "xmlDoc" variable as an XML document
  2. Retrieve data from this XML document and place them in the correct "span" elements

PHP page

This server page, called "responsexml.php", is a simple PHP file that is called by JavaScript.

This page is written in PHP and uses the MySQL database.

The code will run a SQL query against the database and return the results as an XML document:

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//A date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = ".$q."";
$result = mysql_query($sql);
echo '<?xml version="1.0" encoding="ISO-8859-1"?>
<person>';
while($row = mysql_fetch_array($result))
 {
 echo "<firstname>" . $row['FirstName'] . "</firstname>";
 echo "<lastname>" . $row['LastName'] . "</lastname>";
 echo "<age>" . $row['Age'] . "</age>";
 echo "<hometown>" . $row['Hometown'] . "</hometown>";
 echo "<job>" . $row['Job'] . "</job>";
 }
echo "</person>";
mysql_close($con);
?>

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

Происходит: когда запрос送达 PHP-страницу из JavaScript:

  • content-type PHP-документа установлен в "text/xml"
  • PHP-документ установлен в "no-cache", чтобы предотвратить кэширование
  • Установите переменную $q с данными, отправленными HTML-страницей
  • PHP открывает соединение с сервером MySQL
  • Найден "user" с указанным id
  • Вывод данных в виде XML-документа