设为首页 加入收藏

TOP

XHR 对象实例所有的配置、属性、方法、回调和不可变值(二)
2019-09-17 18:48:32 】 浏览:70
Tags:XHR 对象 实例 有的 配置 属性 方法 调和 可变
肯定就会有http的状态码,status就是代表了状态码,当一个请求成功的时候那么状态码就是2XX或者是304,2XX代表的是服务器成功响应了,304代表是从浏览器缓存中读取了内容。
java script
if(xhr.readyState==4){ if(xhr.status>=200&&xhr.status<300 ||="" xhr.status="=304){" console.log(xhr.response);="" }="" }<="" code=""></300>
③ statusText
这个属性的作用其实不大,就是对上面的http状态码status进行一个描述,比如说200状态码的描述就是OK。
④ response
字面意思是响应,就是响应的主体,这个值依赖于responseType,不同的responseType就会使得response的类型不同。
下面是不同的responseType和response类型对照
① "" :空值代表response是一个 DOMString 类型的值。
② arraybuffer:response是一个 ArrayBuffer 类型的值。
③ blob:response是一个 Blob 类型的值。
④ document:response是一个 Document 类型的值。
⑤ json:response是一个JSON类型的值。
⑥ text:response是一个DOMString类型的值,与responseType是空值相同。
另外还有一些浏览器独有的值,如moz-chunked-text,moz-blob等等,这些都是某种浏览器没有标准化的内容,所以这里也就不赘述了,如果有兴趣可以阅读MDN的此篇文章-》 传送门
⑤ responseType
这就是响应的类型,在上面已经说过它与response的关系了,默认值就是为空。
⑥ responseURL
返回响应序列化的URL地址,如果URL是null就返回空字符串。如在上面最开始说withCredentials的时候的代码中的responseURL的值就是
“http://127.0.0.1/withCredentials.php”。
⑦ responseText
如果请求成功就是一个带有响应数据文本的DOMString,如果请求不成功那么这个值就是null。
⑧ responseXML
是一个包含响应数据的文档(document),如果请求失败或者是请求返回的内容不能解析为一个xml或者是html,那么这个值就是null。
⑨ upload
这是一个新的api,返回一个XMLHttpRequestUpload对象,表示上传过程。这个对象包含与xhr类似的回调函数,可以使用这些回调函数来监听数据发送过程中的进度(onprogress)、错误(onerror)、中断(onabort)等等。
可以使用这个对象来创建一个上传内容的进度监测:
java script
var xhr = new XMLHttpRequest(); var onProgressHandler = function(event) { if(event.lengthComputable) { console.log((event.loaded / event.total) * 100); } else { console.log("Can"t determine the size of the file."); } } xhr.upload.addEventListener("progress", onProgressHandler, false); xhr.open("POST","http://iwenku.net"); xhr.send(data);
三、方法项

① open
用于初始化一个请求,所有ajax请求的第一步都是要构建这么一个请求。在open方法之前xhr的readyState是UNSENT,当调用open方法之后就会变为OPENED。
open方法有5个参数,前两个是必须的,后面三个是可选的参数。
第一个是用的HTTP方法:可以传入“GET”、“POST”、“HEAD”等方法。
第二个参数是请求的地址。
第三个参数代表是不是异步(async),默认值为true,也就是使用异步的方式不阻塞主线程,如果值为false,则不使用异步的方式,在主线程知道xhr的请求结束之后才会继续执行后面的语句。下面有一段xhr的open方法异步和同步的示例:
java script
var xhr=new XMLHttpRequest(); xhr.open("GET","http://127.0.0.1/openTest.php"); xhr.send(null); xhr.onreadystatechange=function(){ if(xhr.readyState===xhr.DONE){ console.log("done"); } } console.log("response"+xhr.responseText); for(var i=0;i<3;i++){ console.log(i);="" }<="" code=""></3;i++){>
上面open方法没有传入第三个参数,也就是使用了默认值true,代表这是一个异步的请求,最后程序的输出为:
response:
0
1
2
done
如果在上面的代码中把open的第三个参数设置为false,那么就是使用同步的方式,程序的输出结果是:
response:ok
0
1
2
可以看出来不仅仅是在主线程中顺序执行了,而且readystatechange事件也没有侦听到。
② setRequestHeader
给指定的HTTP请求头赋值,这个方法如果要使用的话需要在open方法执行之后并且还没有执行send方法。
语法:setRequestHeader(请求头名称,要赋予的值)
这个方法其实很简单,之前在一个前端中级交流群里有个朋友提出来怎么来设置多个请求头,我和他说多次调用这个方法不就行了,其实自己偷偷的去查了一下能不能调用一次这个方法同时改变多个值,事实证明是不行的~。
③ send
发送请求. 如果在open中没有设置async参数,或者是这个参数设置为了true,那么在调用send方法后send方法会立即返回,不会阻塞主线程,然后继续执行后面的代码。如果在open的时候采用的是同步的方式,也就是把第三个参数设置为了false,那么send方法就会阻塞主线程,只有当请求结束的时候才会返回。
send方法可以不传入数据,也可以传入ArrayBuffer、Blob、Document、DOMString或者是FormData等类型的
首页 上一页 1 2 3 下一页 尾页 2/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇HTTP缓存字段总结 下一篇Angular i18n(国际化方案)

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目