开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步，快速开始

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

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


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

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

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

[PHP相关教程] [第四十五课]PHP 和 AJAX Live Search

[复制链接]
永久禁言

结帖率：33% (1/3)
发表于 2012-12-18 16:55:11 | 显示全部楼层 |阅读模式   上海市上海市
AJAX 可为用户提供更友好、交互性更强的搜索体验。

AJAX Live Search

在下面的 AJAX 例子中，我们将演示一个实时的搜索。

实时的搜索与传统搜索相比，具有很多优势：

  • 当键入数据时，就会显示出匹配的结果
  • 当继续键入数据时，对结果进行过滤
  • 如果结果太少，删除字符就可以获得更宽的范围

在下面的文本框中搜索 3600gz 的页面

本例包括四个元素：

  • 简单的 HTML 表单
  • JavaScript
  • PHP 页面
  • XML 文档

在本例中，结果在一个 XML 文档 (links.xml) 中进行查找。


HTML 表单

这是 HTML 页面。它包含一个简单的 HTML 表单，针对此表单的 CSS 样式，以及指向 JavaScript 的链接：

  1. <html>
  2. <head>
  3. <script src="livesearch.js"></script>
  4. <style type="text/css">
  5. #livesearch
  6.   {
  7.   margin:0px;
  8.   width:194px;
  9.   }
  10. #txt1
  11.   {
  12.   margin:0px;
  13.   }
  14. </style>
  15. </head>
  16. <body>

  18. <form>
  19. <input type="text" id="txt1" size="30"
  20. onkeyup="showResult(this.value)">

  22. <div id="livesearch"></div>
  23. </form>

  25. </body>
  26. </html>
复制代码
例子解释 - HTML 表单

正如你看到的，HTML 页面包含一个简单的 HTML 表单，其中的文本框名为 "txt1"。

表单是这样工作的：

  • 当用户在文本框中按键并松开按键时，会触发一个事件
  • 当事件触发时，会执行名为 showResult() 的函数
  • 表单下面是名为 "livesearch" 的 <div> 元素。它用作 showResult() 所返回数据的占位符

JavaScript

JavaScript 代码存储在与 HTML 文档连接的 "livesearch.js" 中：

  1. var xmlHttp

  3. function showResult(str)
  4. {
  5. if (str.length==0)
  6. {
  7. document.getElementById("livesearch").
  8. innerHTML="";
  9. document.getElementById("livesearch").
  10. style.border="0px";
  11. return
  12. }

  14. xmlHttp=GetXmlHttpObject()

  16. if (xmlHttp==null)
  17. {
  18. alert ("Browser does not support HTTP Request")
  19. return
  20. }

  22. var url="livesearch.php"
  23. url=url+"?q="+str
  24. url=url+"&sid="+Math.random()
  25. xmlHttp.onreadystatechange=stateChanged
  26. xmlHttp.open("GET",url,true)
  27. xmlHttp.send(null)
  28. }

  30. function stateChanged()
  31. {
  32. if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  33. {
  34. document.getElementById("livesearch").
  35. innerHTML=xmlHttp.responseText;
  36. document.getElementById("livesearch").
  37. style.border="1px solid #A5ACB2";
  38. }
  39. }

  41. function GetXmlHttpObject()
  42. {
  43. var xmlHttp=null;
  44. try
  45. {
  46. // Firefox, Opera 8.0+, Safari
  47. xmlHttp=new XMLHttpRequest();
  48. }
  49. catch (e)
  50. {
  51. // Internet Explorer
  52. try
  53.   {
  54.   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  55.   }
  56. catch (e)
  57.   {
  58.   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  59.   }
  60. }
  61. return xmlHttp;
  62. }
复制代码
例子解释：

GetXmlHttpObject 与 PHP 和 AJAX 请求 中的例子相同。

showResult() 函数

该函数每当一个字符输入文本框就会执行一次。

如果文本域中没有输入 (str.length == 0)，该函数把返回字段设置为空，并删除周围的任何边框。

不过，如果文本域中存在输入，则函数执行：

  • 定义发送到服务器的 url （文件名）
  • 把带有输入框内容的参数 (q) 添加到 url
  • 添加一个随机数，以防止服务器使用缓存文件
  • 调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象，并在触发一个变化时告知此函数执行名为 stateChanged 的一个函数
  • 使用给定的 url 来打开 XMLHTTP 对象
  • 向服务器发送 HTTP 请求
stateChanged() 函数

每当 XMLHTTP 对象的状态发生变化时，该函数就会执行。

当状态变为 4 (或 "complete") 时，就会使用响应文本来填充 txtHint 占位符的内容，并在返回字段周围设置一个边框。


PHP 页面

由 JavaScript 代码调用的服务器页面是名为 "livesearch.php" 的 PHP 文件。

"livesearch.php" 中的代码检查那个 XML 文档 "links.xml"。该文档 w3school.com.cn 上的一些页面的标题和 URL。

这些代码会搜索 XML 文件中匹配搜索字符串的标题，并以 HTML 返回结果：

  1. <?php
  2. $xmlDoc = new DOMDocument();
  3. $xmlDoc->load("links.xml");

  5. $x=$xmlDoc->getElementsByTagName('link');

  7. //get the q parameter from URL
  8. $q=$_GET["q"];

  10. //lookup all links from the xml file if length of q>0
  11. if (strlen($q) > 0)
  12. {
  13. $hint="";
  14. for($i=0; $i<($x->length); $i++)
  15. {
  16. $y=$x->item($i)->getElementsByTagName('title');
  17. $z=$x->item($i)->getElementsByTagName('url');
  18. if ($y->item(0)->nodeType==1)
  19.   {
  20.   //find a link matching the search text
  21.   if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
  22.    {
  23.    if ($hint=="")
  24.     {
  25.     $hint="<a href='" .
  26.     $z->item(0)->childNodes->item(0)->nodeValue .
  27.     "' target='_blank'>" .
  28.     $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
  29.     }
  30.    else
  31.     {
  32.     $hint=$hint . "
  33. <a href='" .
  34.     $z->item(0)->childNodes->item(0)->nodeValue .
  35.     "' target='_blank'>" .
  36.     $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
  37.     }
  38.    }
  39.   }
  40. }
  41. }

  43. // Set output to "no suggestion" if no hint were found
  44. // or to the correct values
  45. if ($hint == "")
  46. {
  47. $response="no suggestion";
  48. }
  49. else
  50. {
  51. $response=$hint;
  52. }

  54. //output the response
  55. echo $response;
  56. ?>
复制代码
例子解释：

如果从 JavaScript 送来了任何文本 (strlen($q) > 0)，会发生：

  • PHP 创建 "links.xml" 文件的一个 XML DOM 对象
  • 遍历所有 "title" 元素 (nodetypes = 1)，以便找到匹配 JavaScript 所传数据的 name
  • 找到包含正确 title 的 link，并设置为 "$response" 变量。如果找到多于一个匹配，所有的匹配都会添加到变量
  • 如果没有找到匹配，则把 $response 变量设置为 "no suggestion"
  • $result 是送往 "livesearch" 占位符的输出



回复

使用道具 举报

返回列表 发新帖
  高级模式
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

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