AJAX onreadystatechange事件

onreadystatechange 事件

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

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

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

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

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

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

readyState状态说明

0：请求未初始化

此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备，值为0表示对象已经存在，否则浏览器会报错：对象不存在。

1：服务器连接已建立

此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数（method,url,true）完成对象状态的设置。并调用send()方法开始向服务端发送请求。

值为1表示正在向服务端发送请求。

2：请求已接收

此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。

值为2表示已经接收完全部响应数据，并为下一阶段对数据解析作好准备。

3：请求处理中

此阶段解析接收到的服务器端响应数据即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody，responseText或responseXML的属性存取的格式，为在客户端调用作好准备。

状态3表示正在解析数据。

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

此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过的XMLHttpRequest对象的属性取得数据。

概而括之，整个XMLHttpRequest对象的生命周期应该包含如下阶段：

• 创建

• 初始化请求

• 发送请求

• 接收数据

• 解析数据

• 完成

在 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：响应已完成；您可以获取并使用服务器的响应了。

使用回调函数

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

如果您的网站上存在多个 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;
    }
  });
}