ajax实现异步前后台交互，模拟百度搜索框智能提示
1.什么是异步？在传统的网站项目中，填写一堆数据，最后点击提交，在点击提交的这一刻才实现数据提交，前后台交互。在你点击提交之前数据是没有提交到后台的。这样就会造成很大的不便。比如，我填了一大堆数据，结果告诉我填错了，怎么办？如果我一填错就提示我填错了，那该有多好啊，此时，异步提交就出现了，不用写好所有数据一次全部提交，而是可以部分提交数据。
2.ajax实现异步提交的核心代码就是一行，就是获取浏览器内嵌的XMLHttpRequest对象，用该对象发送请求xmlHttp.open("GET",url,true)，设置第三个参数为true，即脚本会在send（提交）方法之后继续执行，而不用等待来自服务器的响应（异步）
3.具体实现请看实例实现类似于百度输入框的效果，随着输入内容的改变，动态改变页面提示信息，关键部位已有注释：
页面内容：
<body> <div id="myDiv"> <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="clearData()" onfocus="getMoreContents()"> <input type="button" value="百度一下" width="50"> <!--紧贴在输入框下面，动态显示提示内容--> <div id="popDiv"> <table id="content_table" bgcolor="#FFFAFA" border="0" cellpadding="0"> <tbody id="content_table_body"> </tbody> </table> </div> </div> </body>
首先，在输入框中的内容发生变化的时候触发onkeyup事件（键盘敲击之后），进入getMoreContents()函数，进行后台交互，将相关联的信息查出来显示到输入框的下方。代码如下
var xmlHttp; function getMoreContents() { var contents = document.getElementById("keyword"); if (contents.value == "") { clearData(); return; } //该对象是实现异步提交的核心 xmlHttp = createXmlHttp(); //向服务器发送数据,escape函数是编码函数，将内容编码为ascll传输，以防中文乱码 var url = "search?keyword=" + escape(contents.value); //true表示脚本会在send方法之后继续执行，而不用等待来自服务器的响应（异步） xmlHttp.open("GET", url, true) //xmlHttp绑定回调函数，在对象状态发生改变时调用。有0-4五个状态，一般只关心4（提交完成） //不能带参数，不能带括号 xmlHttp.onreadystatechange = callBack; xmlHttp.send(); }
其中有一个函数是createXmlHttp,这是用来获取实现异步提交的对象，不同的浏览器有不同的获取方法，代码如下：
//获得xmlHttp对象 function createXmlHttp() { var xmlHttp; //一般的浏览器都支持这种方式来获取该对象 if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } //考虑浏览器的兼容性,ie就是他妈的事多 if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //虽然该浏览器支持ActiveXObject，但是不支持Microsoft.XMLHTTP if (!xmlHttp) { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } } return xmlHttp; }
在获取后台返回的数据之后要将数据显示到页面上，这就要求提交对象绑定一个回调函数（提交成功之后执行），代码如下：
xmlHttp.onreadystatechange = callBack; function callBack() { if (xmlHttp.readyState == 4) { //200表示响应成功，404表示未找到，500表示服务器内部错误 if (xmlHttp.status == 200) { //交互成功，获得响应数据 var result = xmlHttp.responseText; //java返回的json数据和js的json数据有细微的区别：最外层少了小括号 var json = eval("(" + result + ")"); //获得数据之后就可以动态展示数据了 setContents(json); } } }
其中xmlHttp.readyState==4表示请求后台成功，至此，已经完成了关于异步提交的所有事情，后面的优化需要同学们自己完成。有需要的可以在评论区留下邮箱，有完整代码奉上。
