Ajax XHR2详解
来源:互联网 发布:js数组对象排序函数 编辑:程序博客网 时间:2024/06/08 08:24
http://blog.csdn.net/jlin991/article/details/61917147
AJAX
原生ajax的四个过程:
实例化,open,send,onreadystatechange,然后是req,readyState和status。
那么问题是通过哪个属性得到data?
jQuery里是success回调里面的形参。
responseText和responseXML,后者是XML解析了的。
Ajax的定义
Ajax是一种技术方案,不是一种新技术。 它依赖浏览器提供的XMLHttpRequest对象,这个对象使得浏览器
可以发出HTTP请求和接收HTTP响应。
XHR1 VS XHR2
跨域:
XHR1受同源策略限制不能跨域, XHR2可以,CORS
XHR1 不能发送二进制文件(图片,视频等),XHR2可以发送接收
XHR1 无法实时获取进度信息,只能判断是否完成 XHR2发送和获取数据可以获取进度信息
XHR2可以设置请求的超时时间,新增forData对象支持发送表单数据!
如何设置request header
发送ajax请求实质是一个HTTP请求, 我们设置请求头部信息。 比如 content-type connection cookie等
void setRequestHeader(DOMString header, DOMString value);
- 1
- 1
注意必须在open方法之后,send()方法之前调用这个方法。
如何获取response header
DOMString getAllReponseHeaders()DOMString getResponseHeader(DOMString header);
- 1
- 2
- 1
- 2
客户端无法获取response 中的set-cookie set-cookie这2个字段。
xhr.overrideMimeType('text/xml; charset = utf-8')
- 1
- 1
xhr 指定 xhr.response 返回类型
我们希望xhr返回的就是我们想要的数据类型:
比如返回的数据是存JSON字符串,
我们希望拿到直接的js对象。
xhr1 提供 overrideMimeType() xhr2 xhr.responseType
用来重写response 的content-type
获取response数据
xhr 提供了3个属性 :
xhr.response xhr.responseText xhr.responseXML
xhr.response 默认值:空字符串 ,请求完成时才有正常值。 未完成时,可能是”“或null
xhr.responseText 默认空字符串, responseType为“text”or “”时,xhr对象上才有此属性。
xhr.responseXML 默认值null responseType 为“text” “” “document” 才有此属性。否则抛出错误
Ajax请求的当前状态
xhr.readyState
每次xhr.readyState的值改变都会触发 onreadystatechange这个事件!
请求超时
对于xhr2来说:
xhr.onloadstart 事件触发开始, 即你send()的时候
xhr.onloadend 事件触发 结束。
如何发一个同步请求
xhr默认异步,也支持同步,但是实际尽量用异步
xhr.open 的 async 参数指定。 false时为同步请求
open(method, url [, async = true [, username = null [, password = null]]])
- 1
- 1
但是对于同步请求有以下限制:
1. xhr.timeout必须设置为0
2. xhr.withCredentials 必须为false
3. xhr.responseType必须为””
上面任意一个不满足都会抛出错误。
因为我们无法设置请求超时时间(xhr.timeout为0,即不限时)。在不限制超时的情况下,有可能同步请求一直处于pending状态,服务端迟迟不返回响应,这样整个页面就会一直阻塞,无法响应用户的其他交互。
如何获取上传 下载的进度
利用onpregress事件实时显示进度~ 默认情况下这个事件每50ms触发一次
上传触发的是xhr.upload.onprogress
下载触发 xhr.onprogress
XHR可以发送什么类型的数据
xhr.send(data)的数据类型:
ArrayBuffer
Blob
Document
DOMString
FormData
null
对于GET/HEAD 请求, 一般不传参数,或设置null, 传了也被忽略(设置成null)
data会影响请求头部content-type的默认值
注意一个问题:如果断网调用xhr.send(data) 会抛出错误
所以应该使用try catch来捕获这个错误 uncaught NetworkError:
try{ xhr.send(data) }catch(e) { //doSomething... };
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
xhr.withCredentials 与CORS什么关系
相关内容看 CORS那篇博客, 主要就是规定了浏览器在跨域请求时不能发送任何认证信息。
xhr事件
事件触发顺序
触发xhr.onreadystatechange(之后每次readyState变化时,都会触发一次)
xhr.onloadstart ->
//上传阶段开始:xhr.upload.onloadstart->
xhr.upload.onprogress->
xhr.upload.onload->
xhr.upload.onloadend->
//上传结束,下载阶段开始:
触发xhr.onprogress->
触发xhr.onload->
触发xhr.onloadend
注册回调函数
一般在 onload 或 onreadystatechange中注册
判断2XX
xhr.onload = function () { //如果请求成功 if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ //do successCallback } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
XHR兼容性
对于XHR1 所有浏览器都是兼容的, IE7+
IE5,6 使用的是
new ActiveXObject()
- 1
- 1
XHR1 :
onreadystatechange
readystate
response 中的部分
responseText
Before IE 10, the value of XMLHttpRequest.responseText could be read only once the request was complete.
- 1
- 1
responseXML
status
statusText
timeout 属性
设置超时时间
xhr.timeout=2000;
- 1
- 1
abort
getAllResponseHeaders
getResponseHeader
open
overrideMimeType
send
setRequestHeaders
XHR1支持的事件
但是对于XHR2来说,浏览器兼容就非常复杂
基本都是在IE10+ !
如下图所示
- Ajax XHR2详解
- Ajax XHR2详解
- AJAX 利用 XHR2 Progress Event 實作下載進度列
- ajax跨域请求问题中xhr2的解决方案
- ajax跨域请求问题中xhr2的解决方案
- XHR2-XMLHttpRequest
- XHR2.0
- XHR2,请求XML
- xhr2 blob属性兼容性bug
- ajax开发:ajax详解
- ajax 详解
- Ajax详解
- ajax详解
- ajax详解
- Ajax详解
- AJAX 详解
- Ajax详解
- ajax 详解
- 使用MinGW编译wxWidgets
- Eclipse Simultaneous Release
- 数据存储
- bzoj 4028: [HEOI2015]公约数数列 (分块乱搞+map)
- centos7搭建gitlab(二)之gitlab仓库迁移
- Ajax XHR2详解
- CSS元素分类(按照样式属性)
- Activity中finish() onDestroy() 和System.exit()的区别
- 141. Linked List Cycle(C语言版本)
- 线程池编程
- 给eclipse安装反编译
- mysql加索引
- Python备份数据库并定期删除n天前的备份数据(本地)
- IntelliJ Idea 常用快捷键列表