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的属性值
在整个请求过程中，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);第二种方法感觉挺好 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |