文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

jQuery Ajax中readyState和status有什么区别

2024-04-02 19:55

关注

这篇文章将为大家详细讲解有关jQuery Ajax中readyState和status有什么区别,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

jquery ajax函数源代码是这样的:

var getXmlHttpRequest = function () {
  if (window.XMLHttpRequest) {
    //主流浏览器提供了XMLHttpRequest对象
    return new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    //低版本的IE浏览器没有提供XMLHttpRequest对象
    //所以必须使用IE浏览器的特定实现ActiveXObject
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    //获取成功后执行操作
    //数据在xhr.responseText
  }
};
xhr.open("TYPE", "URL", true);
xhr.send("");

什么是readyState

  readyState是XMLHttpRequest对象的一个属性,用来标识当前XMLHttpRequest对象处于什么状态。

  readyState总共有5个状态值,分别为0~4,每个值代表了不同的含义,如下表所示:

  0    未初始化状态:此时,已经创建了一个XMLHttpRequest对象

  1  准备发送状态:此时,已经调用了XMLHttpRequest对象的open方法,并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端

  2  已经发送状态:此时,已经通过send方法把一个请求发送到服务器端,但是还没有收到一个响应

  3  正在接收状态:此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收到

  4  完成响应状态:此时,已经完成了HTTP响应的接收

什么是status

  status是XMLHttpRequest对象的一个属性,表示响应的HTTP状态码。

  在HTTP1.1协议下,HTTP状态码总共可分为5大类,如下表所示:

  1XX    服务器收到请求,需要继续处理。例如101状态码,表示服务器将通知客户端使用更高版本的HTTP协议。

  2XX    请求成功。例如200状态码,表示请求所希望的响应头或数据体将随此响应返回。

  3XX    重定向。例如302状态码,表示临时重定向,请求将包含一个新的URL地址,客户端将对新的地址进行GET请求。

  4XX    客户端错误。例如404状态码,表示客户端请求的资源不存在。

  5XX    服务器错误。例如500状态码,表示服务器遇到了一个未曾预料的情况,导致了它无法完成响应,一般来说,这个问题会在程序代码出错时出现。

抛出问题

  为什么onreadystatechange的函数实现要同时判断readyState和status呢?

  我们知道 readyState === 4 已经表示了请求响应成功了,为什么还要后续的status呢?带着问题,我们开始来做一些试验吧。

只使用readyState判断

  javascript端的实现代码如下:

var getXmlHttpRequest = function () {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    alert(xhr.responseText);
  }
};
xhr.open("GET", "/data.aspx", true);
xhr.send("");

我们在服务端抛出异常:

public partial class data : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    throw new Exception("Error");
  }
}

运行javascript代码,提示窗口出现了如下:

jQuery Ajax中readyState和status有什么区别

  服务响应出错了,但还是返回了信息,这并不是我们想要的结果。打开Fiddler监控,可以看到data.aspx返回的是500响应,但由于只使用readystate做判断,它不理会放回的结果是500还是200,只要响应成功返回了,就执行接下来的javascript代码,结果将造成各种不可预料的错误。所以只使用readyState判断是行不通的。

  换另外一个角度想,状态码返回200就表示这次响应是成功的了,那么是不是可以不使用readyState,单独只使用status做判断呢?好,带着问题,继续来做试验吧。

只使用status判断

  javascript端的代码实现如下:

var getXmlHttpRequest = function () {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.status === 200) {
    alert("readyState=" + xhr.readyState + xhr.responseText);
  }
};
xhr.open("GET", "/data.aspx", true);
xhr.send("");

事实上,结果却不像预期那样。响应码确实是返回了200,但是总共弹出了3次窗口!第一次是“readyState=2”的窗口,第二次是“readyState=3Test”的窗口,第三次是“readyState=4Test”的窗口。由此,可见onreadystatechange函数的执行不是只在readyState变为4的时候触发的,而是readyState的每次变化都会触发,所以就出现了前面说的那种情况。可见,单独使用status判断也是行不通的。

进一步思考

  由上面的试验,我们可以知道判断的时候readyState和status缺一不可。那么readyState和status的先后判断顺序会不会有影响呢?我们可以将status调到前面先判断,代码如 xhr.status === 200 && xhr.readyState === 4。

  事实上,这对于最终的结果是没有影响的,但是中间的性能就不同了。由上一个试验我们知道,readyState的每次变化都会触发onreadystatechange函数,假如先判断status,那么每次都会多判断一次status的状态。虽然性能上影响甚微,不过我们还是应该抱着追求极致代码的想法,把readyState的判断放在前面。

关于“jQuery Ajax中readyState和status有什么区别”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     801人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     348人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     311人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     432人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     220人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯