大家在访问 google或百度的时候,假如要搜索“阿凡达”,我们可能只需要输入一个 “阿”字,网站就会自动匹配一些词组供我们选择,这个设计非常人性化。今天我们就此技术简要介绍,本文假设读者不清楚ajax技术细节。
先说说AJAX,我之前也没有关注过这方面,稍微了解了一下,其实它就是一个客户端脚本与服务器动态通信,在WEB界面不刷新的情况下就可以进行交互的一个技术。这个技术能带来非常棒的用户体验,将网页从“表单”提交方式,变成了界面互动方式,使得整个页面看上去交互性更强大,更方便。
ajax 大致流程如下:
1客户端脚本 - 2触发事件 - 3访问服务器脚本 - 4通过固定数据格式回传数据 - 5客户端动态呈现
这里4一般通用的数据传输方式为XML或者jason(轻量级)
下面就我们实现这个自动匹配输入框的一些限制作要求:
1.词汇取自服务器的一个数据库。
2.一次取10个词。
3.词的匹配为子串匹配。
下面看一下相关重要部分的代码:
客户端javascript
下面说一下为何要在访问php脚本的url后加一个随机数。(46行,var posturl= "Ajax_test.php?keyword=" + encodeURIComponent(content) + "&random=" + Math.random()*(10000);)
因为现在浏览器很多都具有cache,能把一些URL给缓存起来,下次访问的时候不需要与服务器交互就能呈现页面。
而我们这里由于是和服务器动态通信的,假如被浏览器给缓存了,可能出现以下情况:
用户输入 “阿凡达”,服务器数据库中没有该内容,显示搜索结果为空;
这时我们向服务器数据库导入“阿凡达”字段,再让用户输入“阿凡达”。
这时客户端却由于访问PHP地址已经存在——如xxxx.php?query=阿凡达 ,直接调用浏览器缓存数据,于是搜索结果还是为空。
所以我们在URL中加入一个随机数,防止浏览器缓存。
服务器端脚本
这样数据就可以传回到web界面了,具体怎么样处理,就可以天马行空了~
推荐一个比较好用的已经封装好的auto complete text——Autocomplete-jQuery ajax,其采用php 、mysql 、javascript
有兴趣的可以访问http://www.open-open.com/ajax/ajax20080314223803.htm下载其源码。
分享到:
相关推荐
web2.0+C#+Ajax实现无刷新三联动下拉框
ajax实现无刷新三联动下拉框,全国各省份,地区和市县。
Ajax实现无刷新三联动下拉框,代码,实现过程
jquery实现百度搜索关键字输入下拉框提示,非常有效果,本人亲测超级好用
Ajax实现的三级联动下拉框
ajax 二级下拉框ajax 实现二级下拉框,地址联动,xmlHttp,serverlet,java,ajax 实现二级下拉框,地址联动,xmlHttp,serverlet,java,
类似百度下拉提示 模拟select下拉框 jquery插件 自动提示框 下拉框 本插件依赖于jquery的插件,类似于百度下拉提示框
ajax实现二级下拉框和用户名校验eclipse下的工程文件(原码)
基于jquery,仿百度模拟ajax下拉框搜索,可以通过键盘方向键上下进行选择
Ajax实现下拉框无刷新
模仿google下拉框模仿google下拉框模仿google下拉框
ajax实现三级联运下拉框.pdf ajax实现三级联运下拉框.pdf
Ajax实现下拉框三级联动,实现数据库动态连接,无刷新动态更新 MyEclipse+Ajax+SQL Server 2005
本篇文章主要介绍了ajax实现动态下拉框示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
绝对物超所值,菜鸟必备,有少量注释,不用继续找,我更懂你
1 模拟百度搜索引擎 实现模糊查询 2 选择下拉框的选项时 动态显示相应的表格信息内容
下拉框 ajax 注册 下拉框 ajax 注册 下拉框 ajax 注册
ajax实现动态从数据库模糊查询显示到下拉框中(ajax方法返回Dataset的例子)
仿Google 百度 搜索 下拉框仿Google 百度 搜索 下拉框仿Google 百度 搜索 下拉框仿Google 百度 搜索 下拉框仿Google 百度 搜索 下拉框仿Google 百度 搜索 下拉框仿Google 百度 搜索 下拉框仿Google 百度 搜索 下拉框