首页 web前端 js教程 在Ajax里使用readyState与status区别有哪些

在Ajax里使用readyState与status区别有哪些

Apr 02, 2018 am 10:06 AM
ajax

这次给大家带来在Ajax里使用readyState与status区别有哪些,在Ajax里使用readyState与status的注意事项有哪些,下面就是实战案例,一起来看一下。

在前几篇分析了jquery的ajax异步和同步,以及异常的一些处理,感觉还没有把ajax的readyState和status说清楚.今天就来说说ajax状态的那点事。

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代码,提示窗口出现了如下:

  服务响应出错了,但还是返回了信息,这并不是我们想要的结果。打开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的判断放在前面。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

jQuery+Ajax判断输入的验证码是否通过

Ajax怎么做出智能搜索框的提示功能

以上是在Ajax里使用readyState与status区别有哪些的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

解决jQuery AJAX请求遇到403错误的方法 解决jQuery AJAX请求遇到403错误的方法 Feb 20, 2024 am 10:07 AM

标题:解决jQueryAJAX请求出现403错误的方法及代码示例403错误是指服务器禁止访问资源的请求,通常会导致出现这个错误的原因是请求缺少权限或者被服务器拒绝。在进行jQueryAJAX请求时,有时候会遇到这种情况,本文将介绍如何解决这个问题,并提供代码示例。解决方法:检查权限:首先要确保请求的URL地址是正确的,同时验证是否有足够的权限来访问该资

解决jQuery AJAX请求403错误的方法 解决jQuery AJAX请求403错误的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一个流行的JavaScript库,用于简化客户端端的开发。而AJAX则是在不重新加载整个网页的情况下,通过发送异步请求和与服务器交互的技术。然而在使用jQuery进行AJAX请求时,有时会遇到403错误。403错误通常是服务器禁止访问的错误,可能是由于安全策略或权限问题导致的。在本文中,我们将讨论如何解决jQueryAJAX请求遭遇403错误

如何使用Ajax从PHP方法中获取变量? 如何使用Ajax从PHP方法中获取变量? Mar 09, 2024 pm 05:36 PM

使用Ajax从PHP方法中获取变量是Web开发中常见的场景,通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中,将介绍如何使用Ajax从PHP方法中获取变量,并提供具体的代码示例。首先,我们需要编写一个PHP文件来处理Ajax请求,并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码:

如何解决jQuery AJAX报错403的问题? 如何解决jQuery AJAX报错403的问题? Feb 23, 2024 pm 04:27 PM

如何解决jQueryAJAX报错403的问题?在开发网页应用程序时,经常会使用jQuery来发送异步请求。然而,有时候在使用jQueryAJAX时可能会遇到错误代码403,表示服务器禁止访问。这种情况通常是由服务器端的安全设置所导致的,但可以通过一些方法来解决这个问题。本文将介绍如何解决jQueryAJAX报错403的问题,并提供具体的代码示例。一、使

PHP 与 Ajax:创建动态加载内容的解决方案 PHP 与 Ajax:创建动态加载内容的解决方案 Jun 06, 2024 pm 01:12 PM

Ajax(异步JavaScript和XML)允许在不重新加载页面情况下添加动态内容。使用PHP和Ajax,您可以动态加载产品列表:HTML创建一个带有容器元素的页面,Ajax请求加载数据后将数据添加到该元素中。JavaScript使用Ajax通过XMLHttpRequest向服务器发送请求,从服务器获取JSON格式的产品数据。PHP使用MySQL从数据库查询产品数据,并将其编码为JSON格式。JavaScript解析JSON数据,并将其显示在页面容器中。点击按钮触发Ajax请求,加载产品列表。

通过使用Ajax函数实现异步数据交换的方法 通过使用Ajax函数实现异步数据交换的方法 Jan 26, 2024 am 09:41 AM

如何利用Ajax函数实现异步数据交互随着互联网和Web技术的发展,前端与后端之间的数据交互变得十分重要。传统的数据交互方式,如页面刷新和表单提交,已经不能满足用户的需求。而Ajax(AsynchronousJavaScriptandXML)则成为了实现异步数据交互的重要工具。Ajax通过使用JavaScript和XMLHttpRequest对象,使得网

了解Ajax框架:探索常见的五种框架 了解Ajax框架:探索常见的五种框架 Jan 26, 2024 am 09:28 AM

了解Ajax框架:探索常见的五种框架,需要具体代码示例引言:在现代Web应用开发中,Ajax是必不可少的技术之一。它以其支持异步数据交互,提升用户体验等特点,成为了前端开发中不可或缺的一部分。为了更好地了解和掌握Ajax框架,本文将介绍五种常见的Ajax框架,并提供具体的代码示例,帮助读者深入了解这些框架的使用方法和优势。一、jQueryjQuery是目前最

ajax版本有哪些 ajax版本有哪些 Nov 22, 2023 pm 02:00 PM

ajax不是一个具体的版本,而是一种使用多种技术的集合来异步加载和更新网页内容的技术。ajax没有具体的版本号,但是有一些ajax的变体或扩展:1、jQuery AJAX;2、Axios;3、Fetch API;4、JSONP;5、XMLHttpRequest Level 2;6、WebSockets;7、Server-Sent Events;8、GraphQL等等。

See all articles