ajax实现类似百度和google的下拉框原理

大家在访问 google或百度的时候，假如要搜索“阿凡达”，我们可能只需要输入一个 “阿”字，网站就会自动匹配一些词组供我们选择，这个设计非常人性化。今天我们就此技术简要介绍，本文假设读者不清楚ajax技术细节。

先说说AJAX，我之前也没有关注过这方面，稍微了解了一下，其实它就是一个客户端脚本与服务器动态通信，在WEB界面不刷新的情况下就可以进行交互的一个技术。这个技术能带来非常棒的用户体验，将网页从“表单”提交方式，变成了界面互动方式，使得整个页面看上去交互性更强大，更方便。

ajax 大致流程如下：

1客户端脚本 - 2触发事件 - 3访问服务器脚本 - 4通过固定数据格式回传数据 - 5客户端动态呈现

这里4一般通用的数据传输方式为XML或者jason（轻量级）

下面就我们实现这个自动匹配输入框的一些限制作要求：

1.词汇取自服务器的一个数据库。

2.一次取10个词。

3.词的匹配为子串匹配。

下面看一下相关重要部分的代码：

客户端javascript

var http_request=false; 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中加入一个随机数，防止浏览器缓存。

服务器端脚本

<?php require_once('connectdb.php'); $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下载其源码。