PHP 和 AJAX responseXML 實例 · W3School PHP 教程

# 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> <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 數據庫實例](/php/php_ajax_database.asp "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 文檔輸出數據