xhr (xmlhttprequest) 和fetch 是前端实现ajax（asynchronous javascript and xml）的两种方法。 ajax是web 技术发展到ria时期很重要的一项技术。通过ajax 可以向服务端发送请求接收服务端响应，在不刷新整个页面的情况下，实现局部内容的更新。
对象提供了在网页加载后与服务器进行通信的方法
xhr 是的内置对象，提供在网页加载后与服务器进行通信的方法，基于事件机制来实现异步。使用xhr来发送http网络请求时，会经历如下生命周期：
xhr提供了一个属性 readystate 来描述其生命周期的状态。 随着生命周期变化，其状态值变化如下：
当xhr实例刚创建时，状态值会为0:uninitialied；
当xhr实例调用当open方法后，状态值会变为 1:open，表示已为http请求设置好方法，url等信息。
当xhr实例调用了sent方法后，状态值会变为2:sent，表示http请求已经发出；
当xhr接收到http的响应头时，状态值会变为3:receiving， 表示请求响应在接收中，客户端只能操作响应头。
当xhr接收到http全部的响应数据时，状态值会变为4:loaded， 表示响应数据已全部接收完；客户端可以操作响应数据。
当xhr示列调用abort 方法后，http请求会终止，状态值会变为0；
xhr 提供了一个事件 onreadystatechange 来监听其生命周期的变化， 当生命周期的状态值发生变化时，该事件会被触发。这个事件是xhr实现异步的关键。 所有依赖请求数据的异步处理都可以放在这个事件函数里执行。可以在该事件函数里使用xhr的生命周期状态值readystate，来判断http请求的进展。
在xhr的生命周期类，提供的属性和方法如下：
属性：
readystate
responsetext
responsexml
status
statustext
方法：
abort()
getallresponseheaders()
getresponseheader(headerprop)
open(method,url,async,username,password)
send(body)
setresquestheader(name, value)
如对本文有疑问， 点击进行留言回复！！
css深入剖析transform的translate和perspective
HCIE第四天总结（典型组网之一：CSS+Eth-Trunk+iStack）
了解下Apache Elasticsearch 和 Kibana
我要评论
网友评论