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