XHR的属性、方法和事件

本文详细介绍了XMLHttpRequest(XHR)的属性、方法和事件,包括responseType和response的区别,timeout属性用于设置超时时间,withCredentials属性处理跨域时的cookie携带,以及abort()方法终止请求,setRequestHeader()设置请求头,特别是Content-Type的使用。此外,还讲解了load、error、abort和timeout等关键事件的触发时机。

1. XHR的属性

属性一般放在open()之后,send()之前。

⑴ responseType 和 response (IE10才开始支持)

当responseType没有设置或者’’或 ’text’时使用ResponseText/response都可以获取文本形式的响应内容;

当responseType=’json’时,只能用response获取内容,而且是解析后的内容。

⑵ timeout 属性

设置请求的超时时间(单位是毫秒),超过这个时间就不报错。(IE8开始支持)

⑶withCredentials属性

指定使用Ajax发送请求时是否携带cookie,默认情况下,同域时会携带,跨域时不会。xhr.withCredentials = true;可以实现跨域携带。最终能否成功跨域携带cookie,还要看服务器同不同意。

2. XHR的方法

(1)abort() 终止当前请求,一般配合abort事件一起使用,放在send()后面;

(2)SetRequestHeader():设置头部信息,放在open()之后,send()之前。

xhr.setRequsetHeader(头部字段的名称,头部字段的值)。

get方法不用设置,post方法需要设置。

xhr.setRequsetHeader(头部字段的名称Content-Type,头部字段的值)。

请求头中的Content-Type 字段用来告诉服务器,浏览器发送的数据是什么格式。

头部字段的值有两个:application/x-www-form-urlencoded格式或者application/json格式。setRequestHeader()方法中,Content-Type设置为application/x-www-form-urlencoded,表示要发送名值对格式的数据,send()方法中,写成username=alex&age=18格式。

3. XHR的事件

1)、load事件 (IE9开始支持)

Ajax响应数据可用时触发(也就是readystate === 4,数据接收完成时)

 2)、error 事件 (IE10开始支持)

请求发生错误时触发,放在open()前面。

 

 3)、abort 事件 (IE10开始支持)

设置终止请求属性时触发

终止请求的方法有:axios.cancelToken;abort;延时定时器等

 4)、timeout 事件 (IE8开始支持)

设置超时属性时触发

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值