PHP 和 AJAX XML 實例
AJAX 可與 XML 文件進行交互式通信。
AJAX XML 實例
在下面的 AJAX 實例中，我們將演示網(wǎng)頁如何使用 AJAX 技術(shù)從 XML 文件中讀取信息。
在下面的下列列表中選擇一個 CD
本例包括三張頁面：
- 一個簡單 HTML 表單
- 一個 XML 文件
- 一個 JavaScript 文件
- 一張 PHP 頁面
HTML 表單
上面的例子包含了一張簡單的 HTML 表單，以及指向 JavaScript 的鏈接：
<html> <head> <script src="selectcd.js"></script> </head> <body> <form> Select a 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 info will be listed here.</b></div> </p> </body> </html>
例子解釋：
正如您看到的，它僅僅是一張簡單的 HTML 表單，其中帶有名為 "cds" 的下拉列表。
表單下面的段落包含了一個名為 "txtHint" 的 div。這個 div 用作從 web 服務(wù)器檢索到的數(shù)據(jù)的占位符。
當用戶選擇數(shù)據(jù)時，會執(zhí)行名為 "showCD" 的函數(shù)。這個函數(shù)的執(zhí)行是由 "onchange" 事件觸發(fā)的。
換句話說，每當用戶改變了下拉列表中的值，就會調(diào)用 showCD 函數(shù)。
XML 文件
XML 文件是 "cd_catalog.xml"。該文件中包含了有關(guān) CD 收藏的數(shù)據(jù)。
JavaScript
這是存儲在 "selectcd.js" 文件中的 JavaScript 代碼：
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 函數(shù)與上一節(jié)中的相同，您可以參閱上一頁中的相關(guān)解釋。
showCD() 函數(shù)
假如選擇了下拉列表中的某個項目，則函數(shù)執(zhí)行：
- 調(diào)用 GetXmlHttpObject 函數(shù)來創(chuàng)建 XMLHTTP 對象
- 定義發(fā)送到服務(wù)器的 URL（文件名）
- 向 URL 添加帶有下拉列表內(nèi)容的參數(shù) (q)
- 添加一個隨機數(shù)，以防服務(wù)器使用緩存的文件
- 當觸發(fā)事件時調(diào)用 stateChanged
- 通過給定的 URL 打開 XMLHTTP 對象
- 向服務(wù)器發(fā)送 HTTP 請求
PHP 頁面
這個被 JavaScript 調(diào)用的服務(wù)器頁面，是一個名為 "getcd.php" 的簡單 PHP 文件。
這張頁面是用 PHP 編寫的，使用 XML DOM 來加載 XML 文檔 "cd_catalog.xml"。
代碼運行針對 XML 文件的查詢，并以 HTML 返回結(jié)果：
<?php
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
//Process only element nodes
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++)
{
//Process only element nodes
if ($cd->item($i)->nodeType==1)
{
echo($cd->item($i)->nodeName);
echo(": ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br />");
}
}
?>
例子解釋
當請求從 JavaScript 發(fā)送到 PHP 頁面時，發(fā)生：
- PHP 創(chuàng)建 "cd_catalog.xml" 文件的 XML DOM 對象
- 循環(huán)所有 "artist" 元素 (nodetypes = 1)，查找與 JavaScript 所傳數(shù)據(jù)向匹配的名字
- 找到 CD 包含的正確 artist
- 輸出 album 的信息，并發(fā)送到 "txtHint" 占位符