XMLHttpRequest是什么?是浏览器内置的一个构造函数。简称XHR。 XMLHttpRequest作用：基于new出来的XMLHttpRequest实例对象，可以发起ajax的请求。
可以用axios封装ajax函数发起请求，也可以直接基于XMLHttpRequest发起ajax请求。 axios.get()、axios.post()、axios().delete()、axios.put()、axios.patch()等方法，是基于XMLHttpRequset封装出来的。
XMLHttpRequest发起get无参请求(原生方式)
主要实现步骤：
1、创建异步对象 2、调用open函数 3、调用send函数 监听load事件
//创建异步对象 let xhr = new XMLHttpRequest(); //设置请求报文 //请求行 xhr.open("get", "http://www.itcbc.com:3006/api/getbooks"); //请求头 //get的Content-Type的值是UTF-8，请求头默认xhr.setRequsetHeader("Content-Type",'UTF-8') //请求体 //get传递参数给服务器只能设置参数为null或者不写任何参数，写了也没效果。在url拼接 xhr.send(); //设置接收响应 xhr.addEventListener("load", function () { //发送给服务器的数据类型为json对象 //response响应 console.log(JSON.parse(xhr.response)); });
XMLHttpRequest发起get带参请求(原生方式)
主要实现步骤：
1、创建异步对象 2、调用open函数 3、调用send函数 监听load事件
let btn = document.querySelector("button"); btn.addEventListener("click", function () { //创建异步对象 let xhr = new XMLHttpRequest(); //设置请求报文 //请求行 xhr.open("get","http://www.itcbc.com:3006/api/getbooks?bookname=法外狂徒"); //请求头 //请求体 xhr.send(); //设置接收响应 xhr.addEventListener("load", function () { console.log(JSON.parse(xhr.response)); }); });
效果前图
效果后图
