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下载其源码。