最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
PHP and AJAX 仿 Live与google 搜索框
时间:2008-11-18 编辑:简简单单 来源:一聚教程网
PHP and AJAX 仿 Live与google 搜索框
AJAX的Live搜索
在AJAX以下例子,我们将表现出生活的搜索,那里的服务器获得搜索结果,同时用户类型。
Live搜索有许多好处,相比传统的搜索:
匹配结果表明您键入
结果狭隘你继续输入
如果结果变得过于狭窄,删除字符看到一个更广泛的结果
这个例子包含了四个网页:
一个简单的HTML表单
一个JavaScript
一个PHP网页
XML文件
在这个例子中,结果发现在一个XML文件( links.xml ) 。为了使这个例子小和简单,只有8个可用的结果。
-------------------------------------------------- ------------------------------
在HTML表单
这是HTML网页。它包含一个简单的HTML形式,风格的表格,并链接到一个JavaScript :
例如解释-的H TML表单
正如你可以看到, HTML网页上面载有一个简单的HTML表单的输入外地所谓“ txt1 ” 。
作品的形式像这样:
事件触发当使用者按下,并发布了关键领域的投入
当事件触发的功能要求showResult ( )被处决。
下面的形式是一个所谓的“ livesearch ” 。这是作为一个占位符返回的数据showResult ( )函数。
-------------------------------------------------- ------------------------------
的JavaScript
JavaScript代码是储存在“ livesearch.js ”和相关的HTML文件:var xmlHttpfunction 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; }后面的php程序我们只要返回数据就行了这里不多写了以后我们本站写了很多相关的文章.
-
上一个: js教程:array 对象创建
-
下一个: js右击弹出菜单
相关文章
- PHP 中使用ajax时一些常见错误总结整理 05-05
- PHP如何传递Ajax成功或失败的状态?HTTP Status Codes可以实现 12-28
- php ajax.$post实现攒,顶,踩的功能 12-13
- php 判断是否为ajax请求 09-30
- ajax+php检测文章标题是否存在代码 11-20
- ajax与php基础教程 12-05
热门栏目
-
php教程
php入门 php安全 php安装 php常用代码 php高级应用 -
asp.net教程
基础入门 .Net开发 C语言 VB.Net语言 WebService -
手机开发
安卓教程 ios7教程 Windows Phone Windows Mobile 手机常见问题 -
css教程
CSS入门 常用代码 经典案例 样式布局 高级应用 -
网页制作
设计基础 Dreamweaver Frontpage js教程 XNL/XSLT -
办公数码
word excel powerpoint 金山WPS 电脑新手 -
jsp教程
Application与Applet J2EE/EJB/服务器 J2ME开发 Java基础 Java技巧及代码