当前位置: 首页 > 工具软件 > Ajax Manager > 使用案例 >

Ajax(原生的Ajax、JQuery封装的Ajax)

卞坚成
2023-12-01

目录

原生的Ajax

JQuery封装的Ajax


原生的Ajax

1、创建Ajax实例对象---let xhr = new XMLHttpRequest();

2、打开一个连接---xhr.open(请求方式,请求路径),其中请求方式为必填参数

①get请求:地址栏请求字符串,要用qs转换js对象---Qs.stringify()

②post请求:参数携带在请求体send()中

        设置请求头为表单格式,发送请求时要用qs转换js对象---Qs.stringify()

        设置请求头为JSON格式,发送请求时要用JSON转换js对象---JSON.stringify()

3、发送请求---xhr.send();

4、接收响应---xhr.onreadystatechange = function(){ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入qs -->
    <script src="./js/qs-6.9.4.js"></script>
</head>
<body>
    <script>
        // 1、创建ajax实例对象
        let xhr = new XMLHttpRequest();


        // 2、打开一个连接,参数:请求方式 请求路径,请求方式必须要写

        // 第一种:get有参请求,地址栏查询字符串,使用qs进行转换
        let params={
            page:1,
            pageSize:10
        };
        let qs=Qs;
        let qsObj=qs.stringify(params);
        console.log(qsObj,'查询字符串');
        xhr.open('get','http://121.199.0.35:8888/index/carousel/findAll'+'?'+qsObj);
        // 3、发送请求
        xhr.send();


        // 第二种:post有参请求,参数携带在请求体中
        xhr.open('post','http://121.199.0.35:8888/index/carousel/findAll');

        // post-1:设置请求头---表单格式数据
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        // 3、发送请求
        xhr.send(qs.stringify({id:1,name:'zhangsan'}));

        // post-2:设置请求头---json格式数据
        xhr.setRequestHeader('Content-Type','application/json');
        // 3、发送请求
        xhr.send(JSON.stringify({id:1,name:'zhangsan'}));
        
            
        // 4、接收响应
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.responseText);
            }
        }
    </script>
</body>
</html>

JQuery封装的Ajax

参数:

1、请求路径:url

2、请求方式:method,默认发送get请求

3、携带参数:data

①get请求:要用qs转换js对象---Qs.stringify()

②post请求

        设置请求头为表单格式,发送请求时要用qs转换js对象---Qs.stringify()

        设置请求头为JSON格式,发送请求时要用JSON转换js对象---JSON.stringify()

4、成功回调:success(res){ }

5、失败回调:error(err){ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入jquery -->
    <script src="./js/jquery-3.5.1.js"></script>
    <!-- 引入qs -->
    <script src="./js/qs-6.9.4.js"></script>
</head>
<body>
    <script>
        let qs=Qs;
        $.ajax({
            // 请求路径
            url:'http://121.199.0.35:8888/user/login',
            // 请求方式,默认发的是get请求
            method:'post',
            // 携带参数
            // 表单格式的数据
            data:qs.stringify({username:'admin',password:123321}),
            // json格式的数据
            data:JSON.stringify({username:'admin1',password:123321}),
            // 设置请求头
            headers:{
                // 表单格式
                'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                // json格式
                'Content-Type':'application/json;charset=UTF-8'
            },
            // 成功的回调
            success(res){
                console.log(res);
            },
            // 失败的回调
            error(err){
                console.log(err);
            }
        })
    </script>
</body>
</html>

 类似资料: