AJAX的原理-如何做到异步和局部刷新

先来看如下一段代码：

//当readystate的值发生变化时调用handleRequest回调函数XMLHttpReq.onreadystatechange =handleRequest;XMLHttpReq.open("get","http://localhost:8080/test/register.jsp?username="+userName, true);XMLHttpReq.send(null);

onreadystatechange被回调函数赋值，则能实现异步调用，回调函数直接操作DOM，则能实现局部刷新。那么XMLHttpRequest的onreadystatechange如何知道服务ready了呢？则是通过客户端对服务的状态询问（定期轮询）所实现的。

那么服务器到底在什么时候会查看onreadystatechange属性并去调用指定的回调方法呢？这就要取决于XMLHttpRequest对象的另外一个属性readyState了。readyState表示了当前的请求状态，可以的状态有5个，如表所示。

readyState的属性值

readyState取值

描述

0

请求没有发出，表示open方法还没有开始调用

1

请求已经建立但还没有发送出去。表示open方法已经调用，但还没有调用send()方法。

2

请求已经发出，正在处理中。表示send方法已经调用。

3

请求已经处理，正在接收服务器的数据。

4

响应已经完成，数据接收成功。

在整个请求过程中，onreadystatechange属性指定的回调方法在每一次readystate值改变时都会被调用。当XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。然后根据服务器的设定询问（类似于客户端会轮询服务器的返回状态，仍然是http短连接,并非长连接的服务器端push）请求状态，如果一切已经就绪（status=200），那么就执行需要的操作。

操作一般就是直接操作DOM，所以AJAX能做到所谓的“无刷新”用户体验。

document.getElementById("user1").innerHTML = "数据正在加载...";            if (xmlhttp.status == 200) {                document.write(xmlhttp.responseText);            }

2. 那么在AJAX客户端如何做到的异步呢？实际上就是Javascript的回调函数起的作用一旦服务器处理完XmlHttpRequest并返回给浏览器，使用req.onreadystatechange指派所设置的回调方法将被自动调用。

在回调方法中，一般需要对服务器的状态进行判定，只有readyState的值为4时才表示服务器响应已经完成，可以使用响应的数据了。

function handleRequest(){    if(XMLHttpReq.readyState==4){      //请求完毕的处理代码}  }

但是这里就会出现一个问题，如果服务器响应请求并完成了处理（即readyState的值为4），但是却产生了一个错误，返回的结果并不是预期的结果。这时候就需要在回调方法中检测XMLHttpRequest对象中的status属性值，它记录了服务器端返回的http请求响应状态，如200，表示请求成功，404表示请求资源没有找到，500表示内部服务器错误等。

function handleRequest(){    if(XMLHttpReq.readyState==4){       if(XMLHttpReq.status==200){   //请求完毕并能返回了预期的数据}}  }

1:在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数 
   在javascript发送的URL后加上t=Math.random() 
   当然，不是直接把t=Math.random()拷贝到URL后面,应该像这样:URL+"&"+"t="+Math.random(); 
2:在XMLHttpRequest发送请求之前加上XMLHttpRequest.setRequestHeader("If-Modified-Since","0") 
一般情况下,这里的XMLHttpRequest不会直接使用 
你应该可以找到这样的代码 
XXXXX.send(YYYYYY); 
那么,就把它变成 
XXXXX.setRequestHeader("If-Modified-Since","0"); 
XXXXX.send(YYYYYY); 
第二种方法感觉挺好