开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步，快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

精易论坛»论坛 › 技术专区 › 更多子版块 › JavaScript|PHP › [第四十四课]PHP 和 AJAX responseXML 实例
返回列表 发新帖
查看: 1470|回复: 0
收起左侧

[PHP相关教程] [第四十四课]PHP 和 AJAX responseXML 实例

[复制链接]
永久禁言

结帖率：33% (1/3)
发表于 2012-12-18 16:50:06 | 显示全部楼层 |阅读模式   上海市上海市
本帖最后由 永久禁言 于 2012-12-18 16:51 编辑

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

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

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

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

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

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


在下拉列表中选择一个名字Select a User:  Peter Griffin Lois Griffin Joseph Swanson Glenn Quagmire 此列由四个元素组成：
  • MySQL 数据库
  • 简单的 HTML 表单
  • JavaScript
  • PHP 页面

数据库

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

idFirstNameLastNameAgeHometownJob
1PeterGriffin41QuahogBrewery
2LoisGriffin40NewportPiano Teacher
3JosephSwanson39QuahogPolice Officer
4GlennQuagmire41QuahogPilot

HTML 表单

上面的例子包含了一个简单的 HTML 表单，以及指向 JavaScript 的链接：

  1. <html>
  2. <head>
  3. <script src="responsexml.js"></script>
  4. </head>
  5. <body>

  7. <form>
  8. Select a User:
  9. <select name="users" onchange="showUser(this.value)">
  10. <option value="1">Peter Griffin</option>
  11. <option value="2">Lois Griffin</option>
  12. <option value="3">Glenn Quagmire</option>
  13. <option value="4">Joseph Swanson</option>
  14. </select>
  15. </form>

  17. <h2>
  18. <span id="firstname"></span> <span id="lastname"></span>
  19. </h2>

  21. <span id="job"></span>

  23. <div style="text-align: right">
  24. <span id="age_text"></span>
  25. <span id="age"></span>
  26. <span id="hometown_text"></span>
  27. <span id="hometown"></span>
  28. </div>

  30. </body>
  31. </html>
复制代码
例子解释 - HTML 表单
  • HTML 表单是一个下拉列表，其 name 属性的值是 "users"，可选项的值与数据库的 id 字段相对应
  • 表单下面有几个 <span> 元素，它们用作我们所接收到的不同的值的占位符
  • 当用户选择了具体的选项，函数 "showUser()" 就会执行。该函数的执行由 "onchange" 事件触发

换句话说，每当用户在下拉列表中改变了值，函数 showUser() 就会执行，并在指定的 <span> 元素中输出结果。


JavaScript

这是存储在文件 "responsexml.js" 中的 JavaScript 代码：

  1. var xmlHttp

  3. function showUser(str)
  4. {
  5. xmlHttp=GetXmlHttpObject()
  6. if (xmlHttp==null)
  7.   {
  8.   alert ("Browser does not support HTTP Request")
  9.   return
  10.   }
  11. var url="responsexml.php"
  12. url=url+"?q="+str
  13. url=url+"&sid="+Math.random()
  14. xmlHttp.onreadystatechange=stateChanged
  15. xmlHttp.open("GET",url,true)
  16. xmlHttp.send(null)
  17. }

  19. function stateChanged()
  20. {
  21. if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  22. {
  23. xmlDoc=xmlHttp.responseXML;
  24. document.getElementById("firstname").innerHTML=
  25. xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
  26. document.getElementById("lastname").innerHTML=
  27. xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
  28. document.getElementById("job").innerHTML=
  29. xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
  30. document.getElementById("age_text").innerHTML="Age: ";
  31. document.getElementById("age").innerHTML=
  32. xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
  33. document.getElementById("hometown_text").innerHTML="
  34. From: ";
  35. document.getElementById("hometown").innerHTML=
  36. xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
  37. }
  38. }

  40. function GetXmlHttpObject()
  41. {
  42. var objXMLHttp=null
  43. if (window.XMLHttpRequest)
  44.   {
  45.   objXMLHttp=new XMLHttpRequest()
  46.   }
  47. else if (window.ActiveXObject)
  48.   {
  49.   objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  50.   }
  51. return objXMLHttp
  52. }
复制代码
例子解释：

showUser() 与 GetXmlHttpObject 函数与 PHP 和 AJAX MySQL 数据库实例 这一节中的例子是相同的。您可以参阅其中的相关解释。

stateChanged() 函数

如果选择了下拉列表中的项目，该函数执行：

  • 通过使用 responseXML 函数，把 "xmlDoc" 变量定义为一个 XML 文档
  • 从这个 XML 文档中取回数据，把它们放在正确的 "span" 元素中


PHP 页面

这个由 JavaScript 调用的服务器页面，是一个名为 "responsexml.php" 的简单的 PHP 文件。

该页面由 PHP 编写，并使用 MySQL 数据库。

代码会运行一段针对数据库的 SQL 查询，并以 XML 文档返回结果：

  1. <?php
  2. header('Content-Type: text/xml');
  3. header("Cache-Control: no-cache, must-revalidate");
  4. //A date in the past
  5. header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

  7. $q=$_GET["q"];

  9. $con = mysql_connect('localhost', 'peter', 'abc123');
  10. if (!$con)
  11. {
  12. die('Could not connect: ' . mysql_error());
  13. }

  15. mysql_select_db("ajax_demo", $con);

  17. $sql="SELECT * FROM user WHERE id = ".$q."";

  19. $result = mysql_query($sql);

  21. echo '<?xml version="1.0" encoding="ISO-8859-1"?>
  22. <person>';
  23. while($row = mysql_fetch_array($result))
  24. {
  25. echo "<firstname>" . $row['FirstName'] . "</firstname>";
  26. echo "<lastname>" . $row['LastName'] . "</lastname>";
  27. echo "<age>" . $row['Age'] . "</age>";
  28. echo "<hometown>" . $row['Hometown'] . "</hometown>";
  29. echo "<job>" . $row['Job'] . "</job>";
  30. }
  31. echo "</person>";

  33. mysql_close($con);
  34. ?>
复制代码
例子解释：

当查询从 JavaScript 送达 PHP 页面时，会发生：

  • PHP 文档的 content-type 被设置为 "text/xml"
  • PHP 文档被设置为 "no-cache"，以防止缓存
  • 用 HTML 页面送来的数据设置 $q 变量
  • PHP 打开与 MySQL 服务器的连接
  • 找到带有指定 id 的 "user"
  • 以 XML 文档输出数据

Peter, 能力, 如何
回复

使用道具 举报

返回列表 发新帖
  高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论，本站内容均为会员发表，并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的，严禁用于非法目的，否则造成一切后果自负！如帖子内容侵害到你的权益，请联系我们！
防范网络诈骗，远离网络犯罪 违法和不良信息举报电话0663-3422125，QQ： 793400750，邮箱：wp@125.la
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125　增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表