PHP og AJAX responseXML eksempel

AJAX 可用于以 XML 返回数据库信息。

AJAX Database 转 XML 实例 （测试说明：该实例功能未实现）

在下面的 AJAX 实例中，我们将演示网页如何从 MySQL 数据库中读取信息，把数据转换为 XML 文档，并在不同的地方使用这个文档来显示信息。

本例与上一节中的 "PHP AJAX Database" 这个例子很相似，不过有一个很大的不同：在本例中，我们通过使用 responseXML 函数从 PHP 页面得到的是 XML 形式的数据。

把 XML 文档作为响应来接收，使我们有能力更新页面的多个位置，而不仅仅是接收一个 PHP 输出并显示出来。

在本例中，我们将使用从数据库接收到的信息来更新多个 <span> 元素。

在下拉列表中选择一个名字

请选择一位用户：

　

此列由四个元素组成：

  • MySQL 数据库
  • 简单的 HTML 表单
  • JavaScript
  • PHP-side

数据库

将在本例中使用的数据库看起来类似这样：

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> 
Vælg en bruger:
<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>

Eksempel forklaring - HTML-formular

  • HTML-formularen er en rullemenu med name-attributten værdi "users" og valgsværdier, der svarer til databasefeltet id
  • Der er flere <span>-elementer under formularen, som bruges som pladsholdere for de forskellige værdier, vi modtager
  • Når brugeren vælger et specifikt valg, udføres funktionen "showUser()" og denne udførelse udløses af "onchange"-eventen

Det vil sige, hver gang brugeren ændrer værdien i en rullemenu, udføres funktionen showUser() og resultatet vises i det angivne <span>-element.

JavaScript

Dette er JavaScript-koden gemt i filen "responsexml.js":

var xmlHttp
function showUser(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert ("Browseren understøtter ikke HTTP-anmodning")
  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="Alder: ";
 document.getElementById("age").innerHTML=
 xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
 document.getElementById("hometown_text").innerHTML="<br/>Fra: ";
 document.getElementById("hometown").innerHTML=
 xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
 }
}
function GetXmlHttpObject()
 { 
 var objXMLHttp = null
 hvis (window.XMLHttpRequest)
  {
  objXMLHttp = new XMLHttpRequest()
  }
 ellers hvis (window.ActiveXObject)
  {
  objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
  }
 return objXMLHttp
 }

Eksempel forklaring:

showUser() og GetXmlHttpObject funktioner med PHP og AJAX MySQL database eksempel Eksemplerne i dette afsnit er de samme. Du kan se de relevante forklaringer der.

stateChanged() funktionen

Hvis et element i rullemenuen er valgt, udfører denne funktion:

  1. Brug responseXML-funktionen til at definere variablen "xmlDoc" som et XML-dokument
  2. Hent data fra dette XML-dokument og placér dem i de korrekte "span"-elementer

PHP-side

Denne server-side side kaldet af JavaScript er en simpel PHP-fil med navnet "responsexml.php".

Denne side er skrevet i PHP og bruger MySQL-databasen.

Koden vil køre en SQL-forespørgsel mod databasen og returnere resultaterne som en XML-dokument:

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//En dato i fortiden
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
$q = $_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
hvis (!$con)
 {
 død('Kunne ikke forbinde: ' . mysql_error());
 }
mysql_select_db("ajax_demo", $con);
sql="Vælg * fra user hvor 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);
?>

Eksempel forklaring:

Når en forespørgsel sendes fra JavaScript til PHP-side, sker der følgende:

  • PHP-dokumentets content-type sættes til "text/xml"
  • PHP-dokumentet sættes til "no-cache", for at forhindre cachen
  • Indstil variablen $q med data sendt fra HTML-side
  • PHP åbner forbindelse til MySQL-serveren
  • Find "user" med angivet id
  • Output data som XML-dokument