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

﹏ヽ暗。殇╰゛Y 2021-08-14 01:16 524阅读 0赞

#### 跟踪状态 ####

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

**readyState属性值：**

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

如果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);
    %>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

#### 终止请求 ####

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/65f928dad61249b1852d670e19b09ee0.png