js Ajax的XMLHttpRequest对象

2018-1-18 23:13:34 2,783 views

Ajax的核心是XMLHttpRequest对象

var xhr=new XMLHttpRequest();

XHR的用法

在使用XHR对象时,要调用的第一个方法是open()方法,接收3个参数,

open()

1.要发送的请求类型(get,post等)
2.请求的URL
3.表示是否异步发送请求的布尔值
例如
xhr.open("get","example.php",true);//这段代码会启动一个example.php的请求

注意*

1.要注意的是第二个参数的路径问题,
2.调用open()方法并不会真正发送请求,而只是启动一个请求以备发送。
注意同源策略
要发送特定的请求,必须像下面这样调用send()方法
xhr.open("get","index.json",true);
xhr.send(null);
这里的send()方法接收一个参数.如果不需要通过请求主题发送数据,则必须传入null,调用send()之后,请求就会被分派到服务器

send()

1.即要作为请求主题发送的数据。
在收到响应之后,响应的数据会自动填充XHR对象的属性
1.responseText:作为响应主体被返回的文本
2.responseXML:如果响应的内容类型是“text/xml”或"application/xml",这个属性中将保存包含着响应数据的XML DOM文档
3.status:响应的HTTP状态
4.statusText:HTTP状态的说明
在接收到相应后,第一步是检查status属性,以确定相应已经成功返回。

检测XHR对象的readyState属性

检测XHR对象的readyState属性,该属性表示请求/响应过程的当前获得阶段
0.未初始化。尚未调用open()方法
1.启动。已经调用open()方法,但尚未调用send()方法。
2.发送。已经调用send()方法,但尚未接收到响应。
3.接收。已经接收到部分响应数据
4.完成。已经接收到全部响应数据,而且已经可以在客户端使用了
只要readyState属性的值由一个值变成另一个值,都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readtState的值。
监听第4 阶段,这个阶段所有数据都已经就绪。
必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性
利用DOM0级方法为XHR对象添加了事件处理程序,原因是并非所有浏览器都支持DOM2级方法。这里没有向其中传递event对象。必须通过XHR对象本身来确定下一步该怎么做。

取消异步事件

xhr,abort();在接收到响应之前还可以调用abort()方法来取消异步请求
调用这个方法后,XHR对象会停止触发事件,而且也不再允许访问任何与响应有关的对象属性。在终止请求后,还应该对XHR对象进行解引用操作。由于内存原因,不再建议重用XHR对象。

0

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。