PHP 和 AJAX responseXML 實(shí)例-6.6PHP和AJAX

閱讀 ?·? 發(fā)布日期 2019-06-29 08:31 ?·? admin

AJAX 可用于以 XML 返回?cái)?shù)據(jù)庫(kù)信息。

AJAX Database 轉(zhuǎn) XML 實(shí)例 （測(cè)試說(shuō)明：該實(shí)例功能未實(shí)現(xiàn)）

在下面的 AJAX 實(shí)例中，我們將演示網(wǎng)頁(yè)如何從 MySQL 數(shù)據(jù)庫(kù)中讀取信息，把數(shù)據(jù)轉(zhuǎn)換為 XML 文檔，并在不同的地方使用這個(gè)文檔來(lái)顯示信息。

本例與上一節(jié)中的 "PHP AJAX Database" 這個(gè)例子很相似，不過(guò)有一個(gè)很大的不同：在本例中，我們通過(guò)使用 responseXML 函數(shù)從 PHP 頁(yè)面得到的是 XML 形式的數(shù)據(jù)。

把 XML 文檔作為響應(yīng)來(lái)接收，使我們有能力更新頁(yè)面的多個(gè)位置，而不僅僅是接收一個(gè) PHP 輸出并顯示出來(lái)。

在本例中，我們將使用從數(shù)據(jù)庫(kù)接收到的信息來(lái)更新多個(gè) <span> 元素。

在下拉列表中選擇一個(gè)名字

Select a User: 

 

 

 

此列由四個(gè)元素組成：

  • MySQL 數(shù)據(jù)庫(kù)
  • 簡(jiǎn)單的 HTML 表單
  • JavaScript
  • PHP 頁(yè)面

數(shù)據(jù)庫(kù)

將在本例中使用的數(shù)據(jù)庫(kù)看起來(lái)類似這樣：

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 表單

上面的例子包含了一個(gè)簡(jiǎn)單的 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 表單是一個(gè)下拉列表，其 name 屬性的值是 "users"，可選項(xiàng)的值與數(shù)據(jù)庫(kù)的 id 字段相對(duì)應(yīng)
  • 表單下面有幾個(gè) <span> 元素，它們用作我們所接收到的不同的值的占位符
  • 當(dāng)用戶選擇了具體的選項(xiàng)，函數(shù) "showUser()" 就會(huì)執(zhí)行。該函數(shù)的執(zhí)行由 "onchange" 事件觸發(fā)

換句話說(shuō)，每當(dāng)用戶在下拉列表中改變了值，函數(shù) showUser() 就會(huì)執(zhí)行，并在指定的 <span> 元素中輸出結(jié)果。

JavaScript

這是存儲(chǔ)在文件 "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ù)庫(kù)實(shí)例 這一節(jié)中的例子是相同的。您可以參閱其中的相關(guān)解釋。

stateChanged() 函數(shù)

如果選擇了下拉列表中的項(xiàng)目，該函數(shù)執(zhí)行：

  1. 通過(guò)使用 responseXML 函數(shù)，把 "xmlDoc" 變量定義為一個(gè) XML 文檔
  2. 從這個(gè) XML 文檔中取回?cái)?shù)據(jù)，把它們放在正確的 "span" 元素中

PHP 頁(yè)面

這個(gè)由 JavaScript 調(diào)用的服務(wù)器頁(yè)面，是一個(gè)名為 "responsexml.php" 的簡(jiǎn)單的 PHP 文件。

該頁(yè)面由 PHP 編寫，并使用 MySQL 數(shù)據(jù)庫(kù)。

代碼會(huì)運(yùn)行一段針對(duì)數(shù)據(jù)庫(kù)的 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 送達(dá) PHP 頁(yè)面時(shí)，會(huì)發(fā)生：

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