PHP 和 AJAX responseXML 實例
AJAX 可用于以 XML 返回數(shù)據(jù)庫信息。
AJAX Database 轉(zhuǎn) XML 實例 （測試說明：該實例功能未實現(xiàn)）
在下面的 AJAX 實例中，我們將演示網(wǎng)頁如何從 MySQL 數(shù)據(jù)庫中讀取信息，把數(shù)據(jù)轉(zhuǎn)換為 XML 文檔，并在不同的地方使用這個文檔來顯示信息。
本例與上一節(jié)中的 "PHP AJAX Database" 這個例子很相似，不過有一個很大的不同：在本例中，我們通過使用 responseXML 函數(shù)從 PHP 頁面得到的是 XML 形式的數(shù)據(jù)。
把 XML 文檔作為響應(yīng)來接收，使我們有能力更新頁面的多個位置，而不僅僅是接收一個 PHP 輸出并顯示出來。
在本例中，我們將使用從數(shù)據(jù)庫接收到的信息來更新多個 <span> 元素。
在下拉列表中選擇一個名字
此列由四個元素組成：
- MySQL 數(shù)據(jù)庫
- 簡單的 HTML 表單
- JavaScript
- PHP 頁面
數(shù)據(jù)庫
將在本例中使用的數(shù)據(jù)庫看起來類似這樣：
| 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> <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"，可選項的值與數(shù)據(jù)庫的 id 字段相對應(yīng)
- 表單下面有幾個 <span> 元素，它們用作我們所接收到的不同的值的占位符
- 當(dāng)用戶選擇了具體的選項，函數(shù) "showUser()" 就會執(zhí)行。該函數(shù)的執(zhí)行由 "onchange" 事件觸發(fā)
換句話說，每當(dāng)用戶在下拉列表中改變了值，函數(shù) showUser() 就會執(zhí)行，并在指定的 <span> 元素中輸出結(jié)果。
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 函數(shù)與 PHP 和 AJAX MySQL 數(shù)據(jù)庫實例 這一節(jié)中的例子是相同的。您可以參閱其中的相關(guān)解釋。
stateChanged() 函數(shù)
如果選擇了下拉列表中的項目，該函數(shù)執(zhí)行：
- 通過使用 responseXML 函數(shù)，把 "xmlDoc" 變量定義為一個 XML 文檔
- 從這個 XML 文檔中取回數(shù)據(jù)，把它們放在正確的 "span" 元素中
PHP 頁面
這個由 JavaScript 調(diào)用的服務(wù)器頁面，是一個名為 "responsexml.php" 的簡單的 PHP 文件。
該頁面由 PHP 編寫，并使用 MySQL 數(shù)據(jù)庫。
代碼會運行一段針對數(shù)據(jù)庫的 SQL 查詢，并以 XML 文檔返回結(jié)果：
<?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);
?>
例子解釋：
當(dāng)查詢從 JavaScript 送達 PHP 頁面時，會發(fā)生：
- PHP 文檔的 content-type 被設(shè)置為 "text/xml"
- PHP 文檔被設(shè)置為 "no-cache"，以防止緩存
- 用 HTML 頁面送來的數(shù)據(jù)設(shè)置 $q 變量
- PHP 打開與 MySQL 服務(wù)器的連接
- 找到帶有指定 id 的 "user"
- 以 XML 文檔輸出數(shù)據(jù)