JS--AJAX跟踪状态readyState、终止ajax请求abort()方法

最新推荐文章于 2024-10-17 09:04:54 发布

原创最新推荐文章于 2024-10-17 09:04:54 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#web #JavaScript #readyState #abort()

JavaScript 同时被 2 个专栏收录

47 篇文章

订阅专栏

web

41 篇文章

订阅专栏

本文深入解析了XMLHttpRequest对象的readyState属性及其跟踪异步交互状态的作用。详细介绍了readyState的五个状态值及其含义，并展示了如何结合status属性判断HTTP响应是否成功。同时，提供了中止请求的方法及注意事项。

跟踪状态

XMLHttpRequest对象通过readyState属性实时跟踪异步交互状态。一旦当该属性发生变化时，就触发readystatechange事件，调用该事件绑定的回调函数。

readyState属性值：

返回值	说明
0	未初始化。表示对象已经建立，但是尚未初始化，即尚未调用open()方法
1	初始化。表示对象已经建立，即尚未调用send()方法
2	发送数据。表示send()方法已经调用，但是当前的状态及HTTP头未知
3	数据传送中。已经接收部分数据，因为响应及HTTP头不全，这时通过responseBody和responseText获取部分数据会出现错误
4	完成。数据接收完毕，此时可以通过responseBody和responseTest获取完成响应数据

如果readyState属性值为4，则说明响应完毕，那么就可以安全读取返回的数据。另外，还需要检测HTTP状态码，只有当HTTP状态码为200时，才表示HTTP响应顺利完成。

在XMLHttpRequest对象中可以借助status获取当前HTTP状态码。如果readyState属性值为4，且status属性值为200，那么说明HTTP请求和响应过程顺利完成。

示例：

<h1>AJAX测试</h1>
 <button id="btn" value="btn" onclick="f()">按钮</button>
 <script>
     function f() {
         var ajax = createXMLHTTPObject();
         ajax.onreadystatechange = function(){
             if(ajax.readyState == 4){
                 if(ajax.status == 200){
                     alert(ajax.responseText);
                 }
             }
         }
         ajax.open("post", "response.jsp",false);
         ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
         ajax.send("name=Tom");
     }
 </script>

response.jsp:

<%
   String name = request.getParameter("name");
   response.getWriter().write(name);
%>

在这里插入图片描述

终止请求

使用abort()方法可以中止正在进行的异步请求。在使用abort()方法前，应先清除onreadystatechange事件处理函数，因为IE和Mozilla在请求中止后也会激活这个事件处理函数，如果给onreadystatechange属性设置为null，则在IE会发生异常，所以可以为它设置一个空函数：

xmlhttp.onreadystatechange = function(){};
xmlhttp.abort();