数据请求的几种方式(ajax、fetch、jQuery、axios)，token过期自动刷新

数据请求的四种方式

1.ajax 数据请求：
原生js提供的(内置)，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。

2.fetch 数据请求：
和ajax一样也是原生js提供的(内置)，和ajax同级，使用promise形式，关注分离思想，但兼容性不太好，所以用的不是很多。

3. jquery数据请求：
封装原生的ajax请求，使用回调形式，可能回调地狱。(使用需要引入第三方库)

4. axios数据请求：
封装原生的ajax请求，使用promise的形式，并且可以在请求和响应阶段进行拦截。(使用需要引入第三方库)

关注点：使用原生ajax请求和使用axios请求

ajax 请求:
优点： 页面无刷新，用户体验好。异步通信，更加快的响应能力等等。
请求方式：get、post
1.get、post不同点:
(1).提交数据存储的位置不同 (安全性)
get请求将提交的数据拼接到URL后面?userName=lnj&userPwd=123456
(任何人可见)
post请求将数据放到请求头中(按f12=》Network=》header=》Form data)
(其他人不可见)
(2).提交数据大小限制不同
get请求对数据有大小限制 (适应于非敏感数据和小数据)
post请求对数据没有大小限制 (适应于敏感数据和大数据)

Ajax使用五个步骤：
   1.创建一个XMLHttpRequest对象
      var xmlhttp=new XMLHttpRequest();
   2.设置请求方式和请求地址（使用open(method,url,async)方法） 
       method：请求方式，get或者post。（默认为get）
          url：请求路径,文件在服务器上的位置
        async：是否为异步请求。（默认为true，异步请求）
   3.发送send() 请求
     若为post方式时需要使用setRequestHeader()来添加http头
   4.监听状态的变化
    每当readyState状态改变时，就会触发 onreadystatechange事件，执行回调函数。
     readyState存有XMLHttpRequest的5种状态。从 0 到 4 发生变化。
      0: 请求未初始化
      1: 服务器连接已建立
      2: 请求已接收
      3: 请求处理中
      4: 请求已完成，且响应已就绪
      
   5.处理返回的结果
     根据请求服务器返回状态码(status)
     大于200，小于300，或等于304，则表示请求成功, 否则服务器请求失败
     
    获取服务器中响应，使用XMLHttpRequest对象的responseText或responseXML属性。
      responseText ： 获得字符串形式的响应数据。
      responseXML ：  获得 XML 形式的响应数据。

 <button>发送请求</button>
 <script>
     window.onload=function () {
   
     var btn =document.querySelector("button");
     btn.onclick=function () {
      
         //get请求
         //1.创建一个异步对象
         var xmlhttp=new XMLHttpRequest();
         //2.设置请求方式和请求地址
         xmlhttp.open("GET","07-Ajax-get.php"+"?userName=lnj&userPwd=123456",true);
         //3.发送请求
         xmlhttp.send();
         //4.监听状态的变化
         xmlhttp.onreadystatechange=function () {
   
                if (xmlhttp.readyState === 4) {
   
                   //5.处理返回的结果
                   if (xmlhttp.status>=200 && xmlhttp.status<300 ||xmlhttp.status===304){
   
                       console.log(xmlhttp.responseText); //输出服务器响应的内容
                    }else{
   
                        console.log("没有接收到服务器的数据");
                    }
                }
             }
         }
               
         //post请求    
         var xmlhttp=new XMLHttpRequest();
         xmlhttp.open("POST","10-Ajax-post.php",true);
         //post方式时需要使用setRequestHeader()来添加http头,将该内容放在设置请求与发送请求之间；
         xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
         //发送请求, 将要提交的数据放在send()中；
         xmlhttp.send("userName=liu&userPwd=654321");
         xmlhttp.onreadystatechange=function () {
   
            if (xmlhttp.readyState === 4) {
     //请求完成时响应；
              if (xmlhttp.status>=200 && xmlhttp.status<300 ||xmlhttp.status===304 ){
   
                        console.log(xmlhttp.responseText);
                    }else{