欢迎来到天天文库
浏览记录
ID：8804496
大小：17.12 KB
页数：3页
时间：2018-04-08
《phpajax教程-ajaxlivesearch》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。
1、PHP+AJAX教程(7):AJAXLiveSearch AJAX可为用户提供更友好、交互性更强的搜索体验。 AJAXLiveSearch 在下面的AJAX例子中，我们将演示一个实时的搜索。 实时的搜索与传统搜索相比，具有很多优势： 当键入数据时，就会显示出匹配的结果 当继续键入数据时，对结果进行过滤 如果结果太少，删除字符就可以获得更宽的范围 在下面的文本框中搜索W3School的页面 本例包括四个元素： 简单的HTML表单 JavaScript PHP页面 XML文档 在本例中，结果在一个XML文档(links
2、.xml)中进行查找。为了让这个例子小而简单，我们只提供8个结果。 HTML表单 这是HTML页面。它包含一个简单的HTML表单，针对此表单的CSS样式，以及指向JavaScript的链接： <html><head><scriptsrc="livesearch.js"></script><styletype="text/css">#livesearch{margin:0px;width:194px;}#txt1{margin:0px;}&
3、lt;/style></head><body><form><inputtype="text"id="txt1"size="30"onkeyup="showResult(this.value)"><divid="livesearch"></div></form></body></html> 例子解释-HTML表单 正如你看到的，H
4、TML页面包含一个简单的HTML表单，其中的文本框名为"txt1"。 表单是这样工作的： 当用户在文本框中按键并松开按键时，会触发一个事件当事件触发时，会执行名为showResult()的函数表单下面是名为"livesearch"的<div>元素。它用作showResult()所返回数据的占位符 JavaScript JavaScript代码存储在与HTML文档连接的"livesearch.js"中： varxmlHttpfunctionshowResult(s
5、tr){if(str.length==0){document.getElementById("livesearch").innerHTML="";document.getElementById("livesearch").style.border="0px";return}xmlHttp=GetXmlHttpObject()if(xmlHttp==null){alert("BrowserdoesnotsupportHTTPRequest")re
6、turn}varurl="livesearch.php"url=url+"?q="+strurl=url+"&sid="+Math.random()xmlHttp.onreadystatechange=stateChangedxmlHttp.open("GET",url,true)xmlHttp.send(null)}functionstateChanged(){if(xmlHttp.readyState==4
7、
8、xmlHttp.readyState==&
9、quot;complete"){document.getElementById("livesearch").innerHTML=xmlHttp.responseText;document.getElementById("livesearch").style.border="1pxsolid#A5ACB2";}}functionGetXmlHttpObject(){varxmlHttp=null;try{//Firefox,Opera8.0+,SafarixmlHttp=ne
10、wXMLHttpRequest();}catch(e){//InternetExplorertry{xmlHttp=newActiveXObject("M
此文档下载收益归作者所有
