当前位置: 萬仟网 > IT编程>网页制作>CSS > XHR和Fetch解析

XHR和Fetch解析

2019年06月12日 21:31  | 萬仟网IT编程  | 我要评论

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)

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com