阅读量:3
开始前，先简单拿网上的资料介绍下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异步任务管理，捕捉请求错误信息之类的用法。
