Ajax异步请求原理和过程

1.什么是Ajax

Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。

2.AJAX创建异步对象XMLHttpRequest ( 考虑兼容性 )

AJAX 的要点是 XMLHttpRequest 对象。

不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的，IE浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。

例如：

　　var xhr=null; 
　　if (window.XMLHttpRequest)
　　 {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
    　　    xhr=new XMLHttpRequest();
   } else{// 兼容 IE6, IE5 
 　　 xhr=new ActiveXObject("Microsoft.XMLHTTP");  
    }
 

3.操作XMLHttpRequest 对象

（1）设置请求参数（请求方式，请求页面的相对路径，是否异步）

 xhr.open(method,url,async);  
 send(string);//post请求时才使用字符串参数，否则不用带参数。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

注意：post请求一定要设置请求头的格式内容，get请求的参数拼接在url后面

（2）设置回调函数，一个处理服务器响应的函数，使用 onreadystatechange ，类似函数指针，如

　xhr.onreadystatechange=function()
　　{
　　　　// 相应的执行代码
　　}

（3）获取异步对象的readyState 属性

该属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

readyState 属性可能的值：

0：未初始化 – 尚未调用.open()方法；
1：启动 – 已经调用.open()方法，但尚未调用.send()方法；
2：发送 – 已经调用.send()方法，但尚未接收到响应；
3：接收 – 已经接收到部分响应数据；
4：完成 – 已经接收到全部响应数据，而且已经可以在客户端使用了；

在调用时，我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成（意味着可获得数据）：

　　xhr.onreadystatechange=function()
　　{
　　　　if(xhr.readyState==4)
　　　　{
　　　　　　// 从服务器的response获得数据
　　　　}
　　}

（4）判断响应报文的状态，若为200说明服务器正常运行并返回响应数据，
（5）读取响应数据，可以通过 responseText 属性来取回由服务器返回的数据。

xhr.onreadystatechange=function()
　　{
　　　　if(xhr.readyState==4){

　　　　　　if(xhr.status==200){

　　　　　　　　document.myForm.time.value=xmlHttp.responseText;

　　　　　　}
　　　　}
　　}

整体示例如下：

<form name="myForm"> 
　　用户: <input type="text" name="username" onkeyup="ajaxFunction();" /> 
　　时间: <input type="text" name="time" /> 
</form> 


function ajaxFunction()
 {
 　　var xhr=null; //定义XMLHttpRequest对象
　　 if (window.XMLHttpRequest)
　　 {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
    　　    xhr=new XMLHttpRequest();
     } else{// 兼容 IE6, IE5 
 　　 		xhr=new ActiveXObject("Microsoft.XMLHTTP");  
    }
　　
　　xhr.open("GET","****.ashx",true)//设置请求方法，请求的目标页面，以及是否异步
　　xhr.setRequestHeader("If-Modified-Since","0");

　　xhr.onreadystatechange=function(){　　//定义XMLHttpRequest对象的onreadystatechange属性  　　

　　　　if(xhr.readyState==4)　{　　　//判断XMLHttpRequest对象的状态 
　　　　　　if(xhr.status==200){
　　　　　　　　document.myForm.time.value=xhr.responseText;//通过XMLHttpRequest对象的responseText属性获取回传的数据 
　　　　　　} 
　　　　}
　　} 
　　xhr.send(null);//发送异步请求 
}