设为首页 加入收藏

TOP

XHR 对象实例所有的配置、属性、方法、回调和不可变值(一)
2019-09-17 18:48:32 】 浏览:64
Tags:XHR 对象 实例 有的 配置 属性 方法 调和 可变

当我们声明了一个XMLHttpRequest对象的实例的时候,使用for-in来循环遍历一下这个实例(本文使用的是chrome45版本浏览器),我们会发现在这个实例上绑定了一些内容,我把这些内容进行了一下分类:

一、配置项

也就是对xhr对象进行配置。
① timeout : 配置请求超时时间。
② withCredentials:是否携带发送提供凭据,在下面会进行详细的说明。

二、属性项

也就是指一些请求发送或完成过程中可能会被用户读取或使用到的一些值。
① readyState:xhr的状态码。
② status:http状态码。
③ statusText:http状态说明文本。
④ response:响应。
⑤ responseType:响应类型。
⑥ responseURL:响应的URL路径。
⑦ responseText:响应的文本数据。
⑧ responseXML:响应的XML数据。
⑨ upload:上传对象,在下面会详细说明。

三、方法项

就是可以通过这些方法进行一些交互,如发送请求,获取或设置头部信息等等。
① open:打开一个xhr请求。
② setRequestHeader:设置请求头信息。
③ send:发送请求。
④ abort:中断请求。
⑤ getResponseHeader:获取某一响应头内容。
⑥ getAllResponseHeaders:获取所有响应头内容。
⑦ overrideMimeType:覆盖服务器返回的MIME类型。
xhr对象还有一些例如addEventListener、removeEventListener等等的方法,由于和xhr没太大联系,所以这里就不再写出来了。

四、回调项

回调项的作用是用来当xhr对象发送一些变化的时候来触发某些操作使用的。
① onabort:发生中断事件。
② onerror:产生了错误。
③ ontimeout:请求超时了。
④ onreadystatechange:xhr状态码发生了改变。
⑤ onloadstart:当process开始的时候。(关于procress我们在后面再说)
⑥ onprogress:每次progress正在进行的时候。
⑦ onload:每次progress成功的时候。
⑧ onloadend:当process结束的时候。

五、不可变值

在xhr中存在UNSENT,OPENED,HEADERS_RECEIVED,LOADING,DONE这五个不可变值,他们所代表的内容分别是0,1,2,3,4这五个数字,在open方法调用之前,xhr对象的status属性是UNSENT,也就是0,当调用了open方法之后,但是还没有调用send的时候status的值是OPENED,当调用了send方法,已经接收到响应的头信息时,status就会变为HEADERS_RECEIVED,正在接受响应内容的时候status就是LOADING,请求已完成并且接受完所有响应内容的时候就会变为DONE。

下面对这五个分类的前四个已经里面的内容进行一个详细的记录~(有人可能会问,不是上面分了五个分类吗,可素第五个分类就那5个不可改变的值,也没有什么好说的+_+)

一、配置项

① timeout
timeout是用来设置超时时间的,默认的值是0,也就是说没有超时限制,不管请求多久都不会触发超时。可以给他设置一个类型为数字的值,代表多少毫秒之后如果没有收到响应就触发超时事件(ontimeout)。
② withCredentials
这个值是来配置是否在发送的时候携带着凭据,默认值是false,也就是默认不携带。所谓的凭据指的就是cookie、HTTP认证及客户端SSL证明等信息。这个是在CORS跨域的时候与服务器的Access-Control-Allow-Credentials进行配合使用的,如果发送了携带凭据的请求,但是服务器的响应里面没有Access-Control-Allow-Credentials是true这个值的头,那么浏览器就会由于同源限制把响应给屏蔽掉,并且调用xhr的oerror事件。
例如有下面这一段代码:

java script(示例代码,没有考虑兼容性)
var xhr=new XMLHttpRequest(); xhr.withCredentials=true; xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ console.log("success!"); } } } xhr.onerror=function(e){ console.log("error!"); } xhr.open("GET","http://127.0.0.1/withCredentials.php"); xhr.send(null);
如果在服务端的代码试下嘛这样子的:
php
header("Access-Control-Allow-Origin: *"); echo "ok";
那么肯定会报错,首先因为当客户端的withCredentials设置为true的时候,服务端的Access-Control-Allow-Origin就不能设置为*来代表任意一个域了,需要把请求的域给写出来,如: http://192.168.1.106;另外服务器端需要把Access-Control-Allow-Credentials设置为true,否则会报错:
XMLHttpRequest cannot load http://127.0.0.1/withCredentials.php. Credentials flag is "true", but the "Access-Control-Allow-Credentials" header is "". It must be "true" to allow credentials. Origin "http://192.168.1.106" is therefore not allowed access.
所以正确的服务端代码应该是:
php
header("Access-Control-Allow-Origin: http://192.168.1.106"); header("Access-Control-Allow-Credentials: true"); echo "ok";

二、属性项

① readyState
这个是xhr对象的状态码,就像是一本史书一样,贯穿于整个xhr的使用历史,从最开始没有进行任何操作的时候为UNSENT,到OPENED,HEADERS_RECEIVED,LOADING,DONE的一步步变化,我们可以使用onreadystatechange这一回调函数来侦听它的变化,我们使用的最多的就是当它的值为4,也就是等于DONE的时候来对响应结果进行进一步的处理。
② status
由于xhr对象发送的是一个http请求,那么
首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇HTTP缓存字段总结 下一篇Angular i18n(国际化方案)

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目