PHP 和 AJAX responseXML 實例

AJAX 可用于以 XML 返回數據庫信息。

AJAX Database 轉 XML 實例 （測試說明：該實例功能未實現）

在下面的 AJAX 實例中，我們將演示網頁如何從 MySQL 數據庫中讀取信息，把數據轉換為 XML 文檔，并在不同的地方使用這個文檔來顯示信息。

本例與上一節中的 "PHP AJAX Database" 這個例子很相似，不過有一個很大的不同：在本例中，我們通過使用 responseXML 函數從 PHP 頁面得到的是 XML 形式的數據。

把 XML 文檔作為響應來接收，使我們有能力更新頁面的多個位置，而不僅僅是接收一個 PHP 輸出并顯示出來。

在本例中，我們將使用從數據庫接收到的信息來更新多個 <span> 元素。

在下拉列表中選擇一個名字

請選擇一位用戶：

 

此列由四個元素組成：

  • MySQL 數據庫
  • 簡單的 HTML 表單
  • JavaScript
  • PHP 頁面

數據庫

將在本例中使用的數據庫看起來類似這樣：

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 a User:
<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>&nbsp;<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

這是存儲在文件 "responsexml.js" 中的 JavaScript 代碼：

var xmlHttp
function 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() 與 GetXmlHttpObject 函數與 PHP 和 AJAX MySQL 數據庫實例 這一節中的例子是相同的。您可以參閱其中的相關解釋。

stateChanged() 函數

如果選擇了下拉列表中的項目，該函數執行：

  1. 通過使用 responseXML 函數，把 "xmlDoc" 變量定義為一個 XML 文檔
  2. 從這個 XML 文檔中取回數據，把它們放在正確的 "span" 元素中

PHP 頁面

這個由 JavaScript 調用的服務器頁面，是一個名為 "responsexml.php" 的簡單的 PHP 文件。

該頁面由 PHP 編寫，并使用 MySQL 數據庫。

代碼會運行一段針對數據庫的 SQL 查詢，并以 XML 文檔返回結果：

<?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);
?>

例子解釋：

當查詢從 JavaScript 送達 PHP 頁面時，會發生：

  • PHP 文檔的 content-type 被設置為 "text/xml"
  • PHP 文檔被設置為 "no-cache"，以防止緩存
  • 用 HTML 頁面送來的數據設置 $q 變量
  • PHP 打開與 MySQL 服務器的連接
  • 找到帶有指定 id 的 "user"
  • 以 XML 文檔輸出數據