AJAX 可为用户提供更友好、交互性更强的搜索体验。
在下面的 AJAX 例子中,我们将演示一个实时的搜索。
实时的搜索与传统搜索相比,具有很多优势:
本例包括四个元素:
在本例中,结果在一个 XML 文档 (links.xml) 中进行查找。为了让这个例子小而简单,我们只提供 8 个结果。
这是 HTML 页面。它包含一个简单的 HTML 表单,针对此表单的 CSS 样式,以及指向 JavaScript 的链接:
</>code
- <html>
- <head>
- <script src="livesearch.js"></script>
- <style type="text/css">
- #livesearch
- {
- margin:0px;
- width:194px;
- }
- #txt1
- {
- margin:0px;
- }
- </style>
- </head>
- <body>
- <form>
- <input type="text" id="txt1" size="30"
- onkeyup="showResult(this.value)">
- <div id="livesearch"></div>
- </form>
- </body>
- </html>
正如你看到的,HTML 页面包含一个简单的 HTML 表单,其中的文本框名为 "txt1"。
表单是这样工作的:
JavaScript 代码存储在与 HTML 文档连接的 "livesearch.js" 中:
</>code
- var xmlHttp
- function showResult(str)
- {
- if (str.length==0)
- {
- document.getElementById("livesearch").
- innerHTML="";
- document.getElementById("livesearch").
- style.border="0px";
- return
- }
- xmlHttp=GetXmlHttpObject()
- if (xmlHttp==null)
- {
- alert ("Browser does not support HTTP Request")
- return
- }
- var url="livesearch.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")
- {
- document.getElementById("livesearch").
- innerHTML=xmlHttp.responseText;
- document.getElementById("livesearch").
- style.border="1px solid #A5ACB2";
- }
- }
- function GetXmlHttpObject()
- {
- var xmlHttp=null;
- try
- {
- // Firefox, Opera 8.0+, Safari
- xmlHttp=new XMLHttpRequest();
- }
- catch (e)
- {
- // Internet Explorer
- try
- {
- xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
- }
- catch (e)
- {
- xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- }
- return xmlHttp;
- }
GetXmlHttpObject 与 PHP 和 AJAX 请求 中的例子相同。
该函数每当一个字符输入文本框就会执行一次。
如果文本域中没有输入 (str.length == 0),该函数把返回字段设置为空,并删除周围的任何边框。
不过,如果文本域中存在输入,则函数执行:
每当 XMLHTTP 对象的状态发生变化时,该函数就会执行。
当状态变为 4 (或 "complete") 时,就会使用响应文本来填充 txtHint 占位符的内容,并在返回字段周围设置一个边框。
由 JavaScript 代码调用的服务器页面是名为 "livesearch.php" 的 PHP 文件。
"livesearch.php" 中的代码检查那个 XML 文档 "links.xml"。该文档 365jz.com 上的一些页面的标题和 URL。
这些代码会搜索 XML 文件中匹配搜索字符串的标题,并以 HTML 返回结果:
</>code
- <?php
- $xmlDoc = new DOMDocument();
- $xmlDoc->load("links.xml");
- $x=$xmlDoc->getElementsByTagName('link');
- //get the q parameter from URL
- $q=$_GET["q"];
- //lookup all links from the xml file if length of q>0
- if (strlen($q) > 0)
- {
- $hint="";
- for($i=0; $i<($x->length); $i++)
- {
- $y=$x->item($i)->getElementsByTagName('title');
- $z=$x->item($i)->getElementsByTagName('url');
- if ($y->item(0)->nodeType==1)
- {
- //find a link matching the search text
- if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
- {
- if ($hint=="")
- {
- $hint="<a href='" .
- $z->item(0)->childNodes->item(0)->nodeValue .
- "' target='_blank'>" .
- $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
- }
- else
- {
- $hint=$hint . "<br /><a href='" .
- $z->item(0)->childNodes->item(0)->nodeValue .
- "' target='_blank'>" .
- $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
- }
- }
- }
- }
- }
- // Set output to "no suggestion" if no hint were found
- // or to the correct values
- if ($hint == "")
- {
- $response="no suggestion";
- }
- else
- {
- $response=$hint;
- }
- //output the response
- echo $response;
- ?>
如果从 JavaScript 送来了任何文本 (strlen($q) > 0),会发生:
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛
Powered by 365建站网 RSS地图 HTML地图
copyright © 2013-2024 版权所有 鄂ICP备17013400号