AJAX之四：XHR readyState

理解AJAX的onreadystatechange事件

最新推荐文章于 2025-03-26 06:12:26 发布

yi杯敬明天

最新推荐文章于 2025-03-26 06:12:26 发布

阅读量585

点赞数

CC 4.0 BY-SA版权

分类专栏： AJAX

本文链接：https://blog.youkuaiyun.com/zj11653911007/article/details/86152011

AJAX 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了AJAX中的onreadystatechange事件，用于监听XMLHttpRequest对象的readyState变化，当readyState等于4且状态为200时，表示响应就绪。同时提到了回调函数在处理多个AJAX任务中的应用，并概述了HTTP状态码的分类和常见状态码的含义。

AJAX - onreadystatechange 事件

使用回调函数

HTTP状态码分类

AJAX - onreadystatechange 事件

当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XMLHttpRequest对象提供了 onreadystatechange 事件机制来捕获请求的状态，继而实现响应。

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

status

200: "OK"
404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function() 
  { 
  if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
    } 
  }

注意： onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

提示：XHR.readyState状态的变化如下：

0：请求未初始化，还没有调用 open()。

1：请求已经建立，但是还没有发送，还没有调用 send()。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。

4：响应已完成；您可以获取并使用服务器的响应了。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/statics/demosource/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

function myFunction() 
{ 
loadXMLDoc("ajax_info.txt",function() 
  { 
  if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
    } 
  }); 
}

实例

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
   if (window.XMLHttpRequest)
   {// IE7+, Firefox, Chrome, Opera, Safari 代码
       xmlhttp=new XMLHttpRequest();
   }
   else
   {// IE6, IE5 代码
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=cfunc;
   xmlhttp.open("GET",url,true);
   xmlhttp.send();
}
function myFunction()
{
   loadXMLDoc("/statics/demosource/ajax_info.txt",function()
   {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
         {
             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
          }
  });
}
</script> 
 </head> 
 <body> 
  <div id="myDiv">
   <h2>使用 AJAX 修改文本内容</h2>
  </div> 
  <button type="button" onclick="myFunction()">修改内容</button>  
 </body>
</html>

HTTP状态码分类

HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型：

HTTP状态码分类
分类	分类描述
1**	信息，服务器收到请求，需要请求者继续执行操作
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

常见的HTTP状态码：