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

前端之家收集整理的这篇文章主要介绍了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了呢?@H_301_9@则是通过客户端对服务的状态询问(定期轮询)所实现的

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

readyState属性

readyState取值

描述

0

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

1

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

2

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

3

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

4

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

在整个请求过程中,onreadystatechange属性指定的回调方法在每一次readystate值改变时都会被调用XMLHttpRequest的整体状态并且保证它已经完成(readyStatus=4),即数据已经发送完毕。然后根据服务器的设定询问(@H_301_9@类似于客户端会轮询服务器的返回状态,仍然是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);第二种方法感觉挺好

猜你在找的Ajax相关文章