Ajax，Ajax-get有参无参、post有参三种实例，jQuery封装Ajax

1-Ajax

1.ajax介绍

AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML语言），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。

2-Ajax三种实例：get无参、get携带参数、post携带参数

get    参数携带在地址栏上 不安全  显示的

post  参数携带在请求体重  安全  隐式的

这三种实例都对应以下4个步骤：

        1--创建一个实例

        2--打开一个连接

        3--发送请求

        4--接收响应

1.get 无参数

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

2.get携带参数

//1.创建实例对象
var xhr = new XMLHttpRequest();
//2.打开连接
let obj={
"对应传参"
};
//转换为查询字符串 Qs.stringify(obj)
xhr.open('get','ip'+' ? ' + Qs.stringify(obj))
//3.发送请求
xhr.send();
//4.接收响应
xhr.onreadystatechange=function(){
    if(xhr.readyState===4 & xhr.status===200){
        console.log(xhr.responseText);
    }
    if(xhr.readyState===4 & xhr.status===500){
        console.log(xhr.responseText);
    }
}

3.post携带参数

let obj={
"参数"
}
//1.创建实例对象
var xhr = new XMLHttpRequest();
//2.打开连接
xhr.open('post','ip');
//设置请求头
xhr.setRequestHeader('content-type','application/json');
//3.发送请求
xhr.send(JSON.stringify(obj)); //转换JSON类型字符串
//4.接收响应
xhr.onreadystatechange=function(){
    if(xhr.readyState===4 & xhr.status===200){
        console.log(xhr.responseText);
    }
    if(xhr.readyState===4 & xhr.status===500){
        console.log(xhr.responseText);
    }
}

3-JQuery封装的Ajax

对应以下几个步骤：

        1.后台接口的请求方式get/post

        2.后台接口的路径 url

        3.请求的参数数据格式

        4.请求头的设置

        5.响应数据的获取

示例：

<button >登录</button>
<button id="load">加载数据</button>

//先在BootCDN上引入jQuery库
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$(function(){
    //给登录按钮绑定事件
    $('button').click(function(){
        let obj={
            username:"admin",
            password:123456
             }
        $.ajax({//配置对象
            //请求路径
            url:"对应接口",
            //请求方式   或者使用type
            method:"post",
            //请求携带的参数
            data:JSON.stringify(obj),
            //请求头设置
            headers:{
                'Content-Type':'application/json'
            },
            //成功回调函数
            success:function(res){
                console.log(res);  //res就是后台响应的数据
                //存储token
                sessionStorage.setItem('token',res.data.token);
                //配置全局变量
                $.ajaxSetup({
                    headers:{
                        'Authorization':sessionStorage.getItem('token')
                    }
                })
            },
            //失败的回调函数
            error:function(err){
                console.log(err);  //err就是后台响应的错误数据
            }
        })
    })
        
    //给加载按钮绑定事件
    $('#load').click(function(){
        $.ajax({
            //请求接口
            url:"对应接口",
            //请求方式
            method:"get",
            //成功回调函数
            success:function(res){
                console.log(res);
            },
            //失败回调函数
            error:function(err){
                console.log(err);
            }
        })
    })
})
    </script>