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