Ajax之原生请求---XMLHttpRequest对象的使用（超详细）

开始前，先简单拿网上的资料介绍下XMLHttpRequest对象：

什么是 XMLHttpRequest 对象？

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想，因为您能够：

• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据 

随便说下，axios请求内部就是用该原生请求实现的，学会这个后，可以自己尝试封装类似axios请求的代码。

介绍结束，使用开始！

 基础使用：（无参请求）

 步骤一：通过XMLHttpRequest构造函数创建一个XHR（XMLHttpRequest）对象。（代码如下）

const xhr=new XMLHttpRequest();

步骤二：通过步骤一创建好的XHR对象的open函数配置请求方法和请求url地址。第一个形参是请求方法，第二个形参是URL地址（后端数据接口），这两个参数都是字符串类型。

注意：如果缺少后端接口，我在网上随便找了个获取名言警句数据的接口可供练习：https://api.quotable.io/random

xhr.open("get","xxxxx");//我这个URL地址（xxx）是随便写的，实际用的时候要找后端要接口地址，或者自己写后端接口

步骤三：在之前创建好的XHR对象上增加监听loaded事件，在该事件的回调函数上写好请求成功后的逻辑代码。XHR对象的response成员变量是请求成功后获得的数据。(请求失败之类的处理，后面进阶使用再讲）

xhr.addEventListener("loadend",()=>{
//这里写请求成功后的逻辑代码
console.log(xhr.response);
})

 步骤四：通过XHR对象的send函数发送请求。

xhr.send();

步骤五：通过以上方法就可以简单获得接口的数据了，基础使用完！

进阶使用：（post和get请求）

首先看有参get请求：

有两个方法：

第一个方法：是通过改变open配置url地址，也就是将URL地址拼接需要传递的键值对就行了，过于简单，不详讲，主看第二个方法。（实在不懂找时间在开个帖子）

第二个方法：步骤一：在使用XHR对象的open配置函数之前，通过URLSearchParams构造函数创建一个URLSearchParams对象。构造函数里的参数传递一个对象，该对象内的键值对就是需要传递的参数。

const xhr=new XMLHttpRequest();
let url=new URLSearchParams({/*对象这里写需要需要传后端的键值对（传递的参数）*/});

步骤二：通过调用创建好的URLSearchParams对象的toString函数返回一个待会需要拼接的字符串（该字符串本质就是之前传入对象键值对的格式化，不理解可以输出到控制台看看，或者就别管，直接用）。

url=url.toString()

步骤三：回到XHR对象的open配置函数里面，把本来要传入url地址字符串拼接个＂？＂字符串，同时再拼接步骤二返回的字符串，把这个拼接两次后的字符串放进open函数的URL配置参数里面即可。

xhr.open("get","接口的url地址"+"?"+url);

步骤四：后面跟之前发送请求一样，配置好回调函数和调用send发送函数就行了。（这部分就不放代码了，跟基础上面用法一样)

注意：这两个方法前提都要在open函数里面设置get请求方式。

有参的post请求：

步骤一：在open函数里面设置post请求方式和请求的的URL地址。

const xhr=new XMLHttpRequest();
xhr.open("post","接口的url地址");

步骤二：在发送请求的send函数前，调用XHR对象（如果不知道这对象哪来的，请从基础使用开始看起）的setRequestHeader函数设置请求头内容，（说下原理，因为post传递的参数，是一个JSON字符串格式，所以要通过请求头告诉下浏览器你传的是内容类型，让后台可以正确接收你的内容。）函数第一个参数是固定的字符串："Content-type"，第二个参数一样是固定的字符串："application/json"，记不住的话，直接复制用，反正都是一个套路。

xhr.open("post","接口的url地址");
xhr.setRequestHeader("Content-type","application/json");

步骤三：随便创建个对象，然后在对象里面写好你要传给后台的键值对。同时通过JSON内置对象的stringify函数把刚刚创建的键值对对象转成我们需要的JSON字符串。

let content={/*写你要传后端的键值对*/};
content=JSON.stringify(content);

步骤四：把我们转好的json字符串当做参数传入send函数发起请求即可。（记住发送前，通过loaded事件，设置好回调函数）

xhr.send(content)

基础用法就先到这里，后面再写Pomise异步任务管理，捕捉请求错误信息之类的用法。