ajax请求和jQuery封装ajax

1.get和post请求是什么?

    HTTP协议中的两种发送请求的方法。

2.http请求中get和post方法区别。

（1）get的数据可以在url中看到，post请求不显示在url中的；
（2）get请求有url长度限制，而post请求长度没有限制的；
（3）get请求的数据可以收藏为书签，post请求到的数据不可收藏为书签；
（4）get请求后，按后退按钮、刷新按钮无影响，post数据会被重新提交；
（5）get的编码类型：application/x-www-form-url，但post有多种编码类型；
（6）get历史参数会被保留在浏览器里，post不会保存在浏览器中的；
（7）get只允许ASCII.post没有编码限制，允许发二进制的；
（8）get与post相比，GET安全性较差，因为所发的数据是URL的⼀部分。
参考网站：https://segmentfault.com/a/1190000037744412

3.实现ajax请求的方式

    (1) 无参的get请求

	//1.创建实例对象
      var xhr =new XMLHttpRequest();
    //2.打开一个链接  第一个参数get是请求方式  第二个参数URL是一个接口地址
      xhr.open('get','url');
    //3.发送请求  
      xhr.send();
    //4.接受响应
      xhr.onreadystatechange=function(){
        // xhr.readyState===4&&xhr.status===200  表示请求发送成功
         if(xhr.readyState===4&&xhr.status===200){
             //发送成功打印请求响应 
             console.log(xhr.responseText);
         }
         else if(xhr.readyState===4&&xhr.status===500){
             //未发送成功打印请求响应 
             console.log(xhr.responseText);
         }
     }

      (2) 带有参数的get请求

<title>有参的get请求</title>
	//在BootCDN中引入  Qs.stringify(obj) 
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
    <script>
       var qs =Qs;
     // get 请求要携带参数  参数携带在地址栏上--》不安全  显示的
     // post参数携带请求体重  安全 隐式的
     // 1.创建实例对象
       var xhr = new XMLHttpRequest();
     //2.打开一个链接
       let obj={
           page:1,
           pageSize:10
       }
       console.log(qs.stringify(obj));
     //转换为查询字符串 
       xhr.open('get','url' + '?'+qs.stringify(obj));
     //3.发送请求
       xhr.send();
     //4.接受响应
       xhr.onreadystatechange=function(){
           if(xhr.readyState===4&&xhr.status ===200){
               console.log(xhr.responseText);
           }
       }
    </script>

      (3) 带有参数的post请求

    //声明一个obj对象  'javascript对象'--》转换为JSON格式
      let obj={
          username:"admin1",
          password:"123321"
      }
    // 1.创建实例对象
      var xhr = new XMLHttpRequest();
    //2.打开一个链接
      // console.log(qs.stringify(obj));
      //转换为查询字符串   
      xhr.open('post','url');
      //设置请求头  
      xhr.setRequestHeader('Content-Type','application/json')
    //3.发送请求  
      // 登录接口--需要携带一个json格式的参数  “属性值”：“属性名”
      xhr.send(JSON.stringify(obj));//转换成JSON格式的字符串
    //4.接受响应
      xhr.onreadystatechange=function(){
          if(xhr.readyState===4&&xhr.status === 200){
              console.log(xhr.responseText);
          }
      }

4.jQuery封装的ajax

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
 <script>
    // 入口函数
    $(function(){
        // 给登录按钮绑定事件
        $('.button').click(function(){
            //声明对象
            let obj ={
                username:"admin1",
                password:123321
            }
            // 检验是否绑定成功
            // alert('1');
            $.ajax({
                //配置对象
                // 请求路径
                url:"",
                //请求方式
                methods:"post",  //或者使用type
                //请求携带的参数
                data:JSON.stringify(obj),
                //请求头设置
                headers:{
                    'Content-Type':'application/json'
                },
                //成功回调函数
                success:function(res){
                    // console.log(res);
                    sessionStorage.setItem('token',res.data.token);
                    //设置全局变量
                    $.ajaxSetup({
                        headers:{
                            //1.认证 2.查询
                            'Authorization':sessionStorage.getItem('token')
                        }
                    })
                },
                //成功回调函数
                error:function(err){
                    // console.log(err);
                }
            })
        })
    
    //给加载按钮绑定事件
    $('#load').click(function(){
        $.ajax({
            //请求接口
            url:"url",
            //请求方式
            methods:"get",
            //成功回调
            success:function(res){
                // console.log(res);
            },
            //失败回调
            error:function(err){
                // console.log(err);
            }
        })
    })
    })
</script>
<body>
    <button>登录</button>
    <button id="load">加载数据</button>
</body>