大家在访问 google或百度的时候,假如要搜索“阿凡达”,我们可能只需要输入一个 “阿”字,网站就会自动匹配一些词组供我们选择,这个设计非常人性化。今天我们就此技术简要介绍,本文假设读者不清楚ajax技术细节。
先说说AJAX,我之前也没有关注过这方面,稍微了解了一下,其实它就是一个客户端脚本与服务器动态通信,在WEB界面不刷新的情况下就可以进行交互的一个技术。这个技术能带来非常棒的用户体验,将网页从“表单”提交方式,变成了界面互动方式,使得整个页面看上去交互性更强大,更方便。
ajax 大致流程如下:
1客户端脚本 - 2触发事件 - 3访问服务器脚本 - 4通过固定数据格式回传数据 - 5客户端动态呈现
这里4一般通用的数据传输方式为XML或者jason(轻量级)
下面就我们实现这个自动匹配输入框的一些限制作要求:
1.词汇取自服务器的一个数据库。
2.一次取10个词。
3.词的匹配为子串匹配。
下面看一下相关重要部分的代码:
客户端javascript
function on_search()
{
var content = document.getElementById("searchname").value;
if( content != "" )
document.getElementById("searchresult").innerHTML="正在搜索...";
else
document.getElementById("searchresult").innerHTML="";
////////////创建http request//////////////////
http_request=false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest)//Mozilla浏览器
{
http_request=new XMLHttpRequest();
if(http_request.overrideMimeType)
{//设置MIME类别
http_request.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject)//IE浏览器
{
try
{
http_request=new ActiveXObject("Msxml2.XMLHttp");
}
catch(e)
{
try
{
http_request=new ActiveXobject("Microsoft.XMLHttp");
}
catch(e){}
}
}
//异常,创建对象实例失败
if(!http_request)
{
document.getElementById("searchresult").innerHTML="<font color=red>Fault error:创建XMLHttp对象失败!</font>";
return false;
}
//在URL添加随机数防止浏览器cache页面
var posturl= "Ajax_test.php?keyword=" + encodeURIComponent(content) + "&random=" + Math.random()*(10000);
http_request.onreadystatechange=showResult;//注册完成的回调函数
http_request.open("GET",posturl,true);
http_request.send(null);
}
//显示结果
function showResult()
{
var html="";
if(http_request.readyState==4)
{
if(http_request.status==200)//信息返回成功
{
if( !(http_request.responseText) )
{
document.getElementById("searchresult").innerHTML="";
return;
}
var response = eval( "(" + http_request.responseText + ")" );
if( response != null )
{
if( response.counter < 1 )
{
document.getElementById("searchresult").innerHTML="";
return;
}
/////////< 这里依具体情况呈现
html+='<select name="select_keyword" ondblclick="document.searchform.MovieName.value = document.searchform.select_keyword.value;">';
for(var i = 1;i<response.counter;i++)
{
html += "<option value='";
html += response.film[i];
html += "'>";
html += response.film[i];
html += "</option>";
}
html += "</select>";
/////////////
document.getElementById("searchresult").innerHTML=html;
}
}
}
}
下面说一下为何要在访问php脚本的url后加一个随机数。(46行, var posturl= "Ajax_test.php?keyword=" + encodeURIComponent(content) + "&random=" + Math.random()*(10000);)
因为现在浏览器很多都具有cache,能把一些URL给缓存起来,下次访问的时候不需要与服务器交互就能呈现页面。
而我们这里由于是和服务器动态通信的,假如被浏览器给缓存了,可能出现以下情况:
用户输入 “阿凡达”,服务器数据库中没有该内容,显示搜索结果为空;
这时我们向服务器数据库导入“阿凡达”字段,再让用户输入“阿凡达”。
这时客户端却由于访问PHP地址已经存在——如xxxx.php?query=阿凡达 ,直接调用浏览器缓存数据,于是搜索结果还是为空。
所以我们在URL中加入一个随机数,防止浏览器缓存。
服务器端脚本
$content=$_GET["keyword"];
$content = urldecode( $content );
//echo $content;
if( $content != "" )
{
$exec="select * from movie where name LIKE '%".$content."%'";
$result = mysql_query($exec);
$response->counter = 0;
while($rs=mysql_fetch_object($result)){
$response->counter++;
$response->film[$response->counter] = $rs->name;
if( $response->counter > 10 )
break;//MAX TO SELECT
}
echo json_encode($response);
}
?>
这样数据就可以传回到web界面了,具体怎么样处理,就可以天马行空了~
推荐一个比较好用的已经封装好的auto complete text——Autocomplete-jQuery ajax,其采用php 、mysql 、javascript
有兴趣的可以访问http://www.open-open.com/ajax/ajax20080314223803.htm下载其源码。