欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

XHR和Fetch解析

程序员文章站 2022-03-02 11:01:36
xhr (xmlhttprequest) 和fetch 是前端实现ajax(asynchronous javascript and xml)的两种方法。 ajax是web 技术发展...

xhr (xmlhttprequest) 和fetch 是前端实现ajax(asynchronous javascript and xml)的两种方法。 ajax是web 技术发展到ria时期很重要的一项技术。通过ajax 可以向服务端发送请求接收服务端响应,在不刷新整个页面的情况下,实现局部内容的更新。

对象提供了在网页加载后与服务器进行通信的方法

xhr 是的内置对象,提供在网页加载后与服务器进行通信的方法,基于事件机制来实现异步。使用xhr来发送http网络请求时,会经历如下生命周期:

XHR和Fetch解析

xhr提供了一个属性 readystate 来描述其生命周期的状态。 随着生命周期变化,其状态值变化如下:

XHR和Fetch解析

当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)