时间:2021-07-01 10:21:17 帮助过:3人阅读
AJAX Database 转 XML 实例 (测试说明:该实例功能未实现)
在下面的 AJAX 实例中,我们将演示网页如何从 MySQL 数据库中读取信息,把数据转换为 XML 文档,并在不同的地方使用这个文档来显示信息。
本例与上一节中的 "PHP AJAX Database" 这个例子很相似,不过有一个很大的不同:在本例中,我们通过使用 responseXML 函数从 PHP 页面得到的是 XML 形式的数据。
把 XML 文档作为响应来接收,使我们有能力更新页面的多个位置,而不仅仅是接收一个 PHP 输出并显示出来。
在本例中,我们将使用从数据库接收到的信息来更新多个 元素。
在下拉列表中选择一个名字 Select a User: Peter Griffin Lois Griffin Joseph Swanson Glenn Quagmire
此列由四个元素组成:
MySQL 数据库 简单的 HTML 表单 JavaScript PHP 页面数据库
将在本例中使用的数据库看起来类似这样:
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 表单 HTML 表单是一个下拉列表,其 name 属性的值是 "users",可选项的值与数据库的 id 字段相对应 表单下面有几个 元素,它们用作我们所接收到的不同的值的占位符 当用户选择了具体的选项,函数 "showUser()" 就会执行。该函数的执行由 "onchange" 事件触发
换句话说,每当用户在下拉列表中改变了值,函数 showUser() 就会执行,并在指定的 元素中输出结果。
JavaScript
这是存储在文件 "responsexml.js" 中的 JavaScript 代码:
var xmlHttpfunction 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="例子解释:
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 数据库实例 这一节中的例子是相同的。您可以参阅其中的相关解释。
stateChanged() 函数如果选择了下拉列表中的项目,该函数执行:
通过使用 responseXML 函数,把 "xmlDoc" 变量定义为一个 XML 文档 从这个 XML 文档中取回数据,把它们放在正确的 "span" 元素中PHP 页面
这个由 JavaScript 调用的服务器页面,是一个名为 "responsexml.php" 的简单的 PHP 文件。
该页面由 PHP 编写,并使用 MySQL 数据库。
代码会运行一段针对数据库的 SQL 查询,并以 XML 文档返回结果:
例子解释:';while($row = mysql_fetch_array($result)) { echo " ";mysql_close($con);?>" . $row['FirstName'] . " "; echo "" . $row['LastName'] . " "; echo "" . $row['Age'] . ""; echo "" . $row['Hometown'] . " "; echo "" . $row['Job'] . " "; }echo "
当查询从 JavaScript 送达 PHP 页面时,会发生:
PHP 文档的 content-type 被设置为 "text/xml" PHP 文档被设置为 "no-cache",以防止缓存 用 HTML 页面送来的数据设置 $q 变量 PHP 打开与 MySQL 服务器的连接 找到带有指定 id 的 "user" 以 XML 文档输出数据