ajax如何实现、readyState五中状态的含义
转载:http://www.cnblogs.com/teroy/p/3917439.html
熟悉web开发的程序员想必对Ajax也不会陌生。现在已经有很多js框架封装了ajax实现,例如JQuery的ajax函数,调用起来非常方便。当然本文不打算讲框架的使用,我们将从Ajax的javascript源码实现开始。
Ajax源码实现
if (window.XMLHttpRequest) {//主流浏览器提供了XMLHttpRequest对象return new XMLHttpRequest();}else if (window.ActiveXObject) {//低版本的IE浏览器没有提供XMLHttpRequest对象//所以必须使用IE浏览器的特定实现ActiveXObjectreturn 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("");
可以看到,xhr对象是通过onreadystatechange来监听Ajax的最终完成情况,这里也迎来了这次要重点讨论的主角:readyState和status。
什么是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("");
这个演示DEMO使用ASP.NET Webform框架,现在我们在后台data.aspx做一些手脚,不如让它报错试试!C#代码如下:
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("");
这次将在data.aspx后台做处理,让它只返回一个字符串,实现如下:
public partial class data : System.Web.UI.Page {protected void Page_Load(object sender, EventArgs e){Response.Write("Test");Response.End();} }
一切都是那么地自然,是不是只要弹出一个写着一行"readyState=4Test"的字符串的提示框,就表示结果成立了?把它跑起来了吧,结果已经就离我们不远了!
事实上,结果却不像预期那样。响应码确实是返回了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的判断放在前面。
如果你有新的想法,欢迎留言讨论。
转载于:https://www.cnblogs.com/sivkun/p/7263754.html
ajax如何实现、readyState五中状态的含义相关推荐
- ajax返回报错html,Jquery AJAX POST调用返回200状态确定,但错误
嗨我已经实现了一个Ajax POST请求来调用Web服务.它总是返回200行,但执行失败的事件我已经尝试了很多事情,但我没有得到我犯的错误.我在这里添加我的代码. Fiddler显示响应内容,但Aja ...
- HTTP/HTTPS 01-不同状态码含义
转自:http://m.blog.csdn.net/blog/u013857407/21741847 HTTP协议状态码,是指在HTTP协议运作中由客户端发出请求连接,服务端建立连接,客户端发出HTT ...
- linux系统端口的5种状态及含义
linux系统端口的5种状态及含义 1.listening 监听状态 说明该端口是开放的,正在等待连接,但是还没有被连接:2.established 正在建立连接 标识两台机器正在通信中:3.time ...
- HTTP状态查询,HTTP状态码含义,HTTP头部信息查询,http状态码表
HTTP状态查询,HTTP状态码含义,HTTP头部信息查询,http状态码表 状态码表 状态码 状态码英文名称 中文描述 100 Continue 继续.客户端应继续其请求 101 Switching ...
- ajax请求一直出于请求状态,不返回的原因
问题往往在被发现后,然后觉得如此easy,可是我们没有找到答案之前,几度要崩溃. 前不久,我就是发现我一个ajax请求一直出于请求状态,死活不返回, 出现这种情况原因有两个 一:后台有断点 二:数据库 ...
- Ajax中有关readyState(状态值)和status(状态码)的问题
var getXmlHttpRequest=function(){ try{ //主流浏览器提供了XMLHttpRequest对象 return new XMLHttpRequest(); }catc ...
- 原生ajax请求及readyState的几种状态
原生ajax请求写法: var http = new XMLHttpRequest();http.open('get','./package.json');http.onreadystatechang ...
- AJAX 状态值(readyState)与状态码(status)详解
总结:status体现的是服务器对请求的反馈,而readystate表明客户端与客户的交互状态过程. 1- AJAX状态值与状态码区别AJAX状态值是指,运行AJAX所经历过的几种状态,无论访问是否成 ...
- AJAX请求时status返回状态明细表 readyState的五种状态
为什么80%的码农都做不了架构师?>>> 在<Pragmatic Ajax A Web 2.0 Primer >中偶然看到对readyStae状态的介绍,感觉这个介 ...
最新文章
- linux下qq客户端
- java map按照value排序_基础:Java集合需要注意的 5 个问题
- ios 跨域_如何在iOS和Android中建立跨域通信桥
- 使用js获取页面参数
- C# 笔记2 - 数组、集合与与文本文件处理
- 在ntpdate同步时间的时候出现“the NTP socket is in use, exiting”
- 开源项目也要讲注意力经济
- python中functools_Python中functools模块的常用函数解析
- 电机学重读(一)基础知识
- java生成32位id,java中生成32位随机ID
- slickedit 设置
- iOS 将PCM格式转换为WAV格式 播放wav音频或者直接播放pcm文件
- Axial Attention 和 Criss-Cross Attention及其代码实现
- Jove:[酷站推荐] http://www.everydo.com/ 中文版的basecamp. 貌似比较方便, 共享文件进度TODO. 真希望公司内部也有一个这个...
- 惊呆了!我用 Python 可视化分析和预测了 2022 年 FIFA 世界杯
- Web前端学习笔记(十五)---四色花瓣
- 快手AI 实验室Y-Lab 招聘
- 前期软件项目评估偏差,如何有效处理?
- MT6582+Android4.2的编译
- Novenber II 2004
热门文章
- 数组的最长平台c语言,2010台湾省C语言版高级
- python的for循环累加_在python中将6 for循环累计和矢量化
- roboware studio_关于安装Roboware的教程
- endnote咋手动输入文献_endnote如何导入参考文献?如何手动导入EndNote
- java全局变量怎么定义_Java开发知识点:如何理解Java函数式编程?
- python调用报表制作工具_工作汇报神技!用Python三步生成带有图表的word报表
- notepad++ vim插件_是时候摒弃掉Notepad++ ,因为你还有更多的选择...
- 4x4矩阵键盘工作原理及扫描程序_AVR单片机扫描4X4矩阵键盘并数码管显示程序
- 如何避免fstab挂载故障问题
- 从零开始学习docker(一)