XMLHttpRequest level2

2016-11-16 10:19:31来源:作者:好JSER人点击

HTML5 更新了很多API,XMLHttpRequest 就是其中一个。level 2 的XMLHttpRequest 更加强大了。

新建对象

var xhr = new XMLHttpRequst() 和之前一样

属性

先看老几样属性

onreadystatechange同步ajax不可用此事件回调,abort() 也不会触发此事件,open() 之前设置

readyState只读

responseText只读

responseXML responseURL status statusText

新属性

responseType设置响应类型,可以是 arraybuffer / blob / document / json / text ,默认是 text

response响应内容

timeout超时毫秒数,同步请求不可用。默认是0,永不超时。在 open() 和 send() 之间设置,超时会触发 xhr 的 timeout事件

upload只读,ajax 上传对象,后面详细讲

withCredentialsBoolean,是否允许跨域响应设置cookie,默认是 false

方法

abort()触发 abort 事件

getAllResponseHeaders()返回所有响应头部组成的字符串

getResponseHeader(key)

open(method, url)

overrideMimeType(mimetype)重写响应类型,如果需要的话,在 send() 之前调用

send()可以发送 FormData / Blob / Buffer / String / Document,不发送数据的话,建议使用 xhr.send(null)

setRequestHeader(key, value)设置请求头,在 open() 和 send() 之间调用。如果没有设置 Accept, 则默认是 */*

事件

loadstartsend() 之后触发,只触发一次

progress进度事件,会不断被触发

xhr.addEventListener('progress', ev => { if (ev.lengthComputable) { console.log(ev.loaded / ev.total); }});ev.lengthComputable 长度可计算ev.loaded 接收的字节数ev.total 总字节数// 可以使用 'onprogress' in xhr 判断浏览器是否支持 progress 事件

load响应完成时触发。使用此事件就没必要再通过检查 xhr.readyState === 4 来确认响应完成了。不过 load 事件只是表示接收到服务器的响应,还需要通过 xhr.status 来判断响应是否成功。

error

abortxhr.abort() 触发

timeout设置 xhr.timeout 之后,响应超时时触发

upload

xhr.upload 是 ajax 上传对象

xhr.upload 也有以下事件

progress load error abort

xhr.upload.onprogress 和 xhr.onprogress 使用差不多,只是一个针对文件上传过程,一个针对从服务器获取响应的过程

FormData

表单数据类型

var form = new FormData();form.append('username', 'xiaoming');或者var form = new FormData(document.getElementsByTagName('form')[0]);// 使用 FormData,不用设置请求的 Content-Type,xhr 能够自动识别并设置// 如果不使用 FormData,发送表单需要先设置 Content-Type 为 `application/x-www-form-urlencoded`, 如果表单中有文件需要上传,则 Content-Type 为 `multipart/form-data`xhr.send(form);// 如果只是上传文件,可以直接使用 `xhr.send(file)`

综上所述,使用 ajax 时,步骤如下:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {}; level2 几乎可以不用了

xhr.open();

xhr 的相关设置,比如 事件监听,请求头设置,响应头改写等

xhr.send();

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台