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://hi.baidu.com/zhangqiuxi/blog/item/3d0206a84bbd72bbcb130cab.html
这篇文章说明 AJAX 相关技术的基础，并提供实例供您上手。
第一步 – 说声「请」 （又称为「怎么发出 XMLHttpRequest」）
为 了用 JavaScript 对服务器发送 HTTP 要求，你必须先以相关的类别（class）制出实体（instance）。Int ......
一：前端js代码，主要负责创建ajax和动态生成区域列表
<script type="text/javascript">
//i始终指向最后一个select
var i=1;
//创建XMLHttpRequest对象
var XMLHttpReq;
&n ......
多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮，等待服务器响应，再点击另一个按钮，然后再等待，这样一个反复的过程。有了 Ajax 和 XMLHttpRequest 对象，就可以使用不必让用户等待服务器响应的请求/响应模型了。本文中，Brett McLaughlin 介绍了如何创建能够适应不同浏览器的 ......
在 HTML 的外部文件中一样，标记的组织与其样式、格式和行为是分离的。虽然您肯定可以用 JavaScript 更改元素或文本的样式，但实际更改您的标记所布置的组织却更加有趣。
只要牢记您的标记只为您的页面提供组织、框架，您就能立于不败之地。再前进一小步，您就会明白浏览器是如何接受所有的文本组织并将其转变为超级有趣� ......
ajax.open方法中，第3个参数是设同步或者异步。prototype等js类库一般都默认为异步，即设为true。
先说下同步的
情况下，js会等待请求返回，获取status。不需要onreadystatechange事件处理函数。
而异步则需要
onreadystatechange事件处理，且值为4再正确处理下面的内容
......
