本文主要是介绍xhr对象请求的流程，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
xhr，全称为XMLHttpRequest，用于与服务器交互数据
XMLHttpRequest 对象
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及的 GET 请求的能力
属性：
readystate: 0 XHR的当前状态
status: 0 响应消息状态码 只有在xhr.readystate 变为2以后才值
常见的消息状态码： 200 数据成功请求 404 未找到资源，客户端的路径问题等 5xx 服务器上的错误
statusText："" 响应消息中原因消息，只有在xhr.readystate 变为2以后才值
responseText： “”,响应消息的主体内容，只有在xhr.readystate 变为3开始有值，变为4值稳定下来
事件：
onreadystatechange 每一次readystate的值有变化时会触发
方法：
open(method,uri,isAsyn)
send(null/body)
setRequestHeader(name,value); 设置请求消息头部
getResponseHeader(name);获取响应消息头部
getAllResponseHeaders();获取响应消息中的所有头部
xhr数据请求流程：
1.初始化xhr对象
设置请求方法,以及请求接口
开始发送数据到后台
2.后端接收前端发送过来的数据
3.将数据从后台返回给前端
发送数据到前端
4.前端接收后台发送过来的数据
接收部分数据时，
全部数据接收完毕，
// 创建一个数据请求的实例化对象var xhr=new XMLHttpRequest() // 在xhr的准备状态发生改变的时候，调用该方法xhr.onreadystatechange=function () {// 判断xhr的准备状态switch (xhr.readyState) {case 0: {console.log('open方法已经调用，但是send方法没有调用') break;}case 1: {console.log('send方法已经调用，但是服务器没有返回数据') break;}case 2: {console.log('send方法已经调用，服务器开始返回数据') break;}case 3: {console.log('服务器已经返回部分数据') break;}case 4: {console.log('服务器已经返回全部的数据') console.log(xhr.response) console.log(xhr.responseText) console.log(xhr.responseURL) console.log(xhr.status) console.log(xhr.getAllResponseHeaders) break;}}}// open方法里面要放置两个参数，// 参数1：数据请求方式 get post// 参数2：请求的接口，参数在接口后面进行拼接xhr.open('get',”URL“ ) // 发送数据到后端xhr.send()
这篇关于xhr对象请求的流程的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
