创新互联AJAX教程:AJAX XHR-readyState

ajax - onreadystatechange 事件

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

创新互联专注于企业成都全网营销、网站重做改版、个旧网站定制设计、自适应品牌网站建设、html5、商城开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为个旧等各大城市提供网站开发制作服务。

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

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

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

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

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

• 0: 请求未初始化

• 1: 服务器连接已建立

• 2: 请求已接收

• 3: 请求处理中

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

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对象的生命周期应该包含如下阶段：

1. 创建
2. 初始化请求
3. 发送请求
4. 接收数据
5. 解析数据
6. 完成

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

使用回调函数

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

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

    }

  });

}

尝试一下 »

在接下来的一个章节中，你将学习到与AJAX ASP/PHP相关的知识！

相关文章

HTTP状态码

网站栏目：创新互联AJAX教程:AJAX XHR-readyState
当前路径：http://www.shufengxianlan.com/qtweb/news25/238025.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联