先来看如下一段代码:
//当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 |
|
1 |
|
2 |
|
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);第二种方法感觉挺好