PHP 和 AJAX XML 實例 · W3School PHP 教程

# PHP 和 AJAX XML 實例 **AJAX 可與 XML 文件進行交互式通信。** ## AJAX XML 實例在下面的 AJAX 實例中，我們將演示網頁如何使用 AJAX 技術從 XML 文件中讀取信息。本例包括三張頁面： * 一個簡單 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 服務器檢索到的數據的占位符。當用戶選擇數據時，會執行名為 "showCD" 的函數。這個函數的執行是由 "onchange" 事件觸發的。換句話說，每當用戶改變了下拉列表中的值，就會調用 showCD 函數。 ## XML 文件 XML 文件是 "[cd_catalog.xml](/php/cd_catalog.xml)"。該文件中包含了有關 CD 收藏的數據。 ## 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 函數與上一節中的相同，您可以參閱上一頁中的相關解釋。 #### showCD() 函數假如選擇了下拉列表中的某個項目，則函數執行： 1. 調用 GetXmlHttpObject 函數來創建 XMLHTTP 對象 2. 定義發送到服務器的 URL（文件名） 3. 向 URL 添加帶有下拉列表內容的參數 (q) 4. 添加一個隨機數，以防服務器使用緩存的文件 5. 當觸發事件時調用 stateChanged 6. 通過給定的 URL 打開 XMLHTTP 對象 7. 向服務器發送 HTTP 請求 ## PHP 頁面這個被 JavaScript 調用的服務器頁面，是一個名為 "getcd.php" 的簡單 PHP 文件。這張頁面是用 PHP 編寫的，使用 XML DOM 來加載 XML 文檔 "[cd_catalog.xml](/php/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++) { //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 發送到 PHP 頁面時，發生： 1. PHP 創建 "cd_catalog.xml" 文件的 XML DOM 對象 2. 循環所有 "artist" 元素 (nodetypes = 1)，查找與 JavaScript 所傳數據向匹配的名字 3. 找到 CD 包含的正確 artist 4. 輸出 album 的信息，并發送到 "txtHint" 占位符