几种ajax请求方式

顺便把之前写的原生的也记录下
参考博客 https://blog.csdn.net/gty204625782/article/details/120538711

1.原生AJAX

1.1 get请求

<!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>ajax</title>
</head>
<body>

    <button>点击发送请求</button>

    <script>
        const btn = document.getElementsByTagName('button')[0];

        btn.onclick = function () {
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和url
            xhr.open('GET', 'http://wthrcdn.etouch.cn/weather_mini?city=巢湖');
            //3. 发送
            xhr.send();
           //4. 事件绑定 处理服务端返回的结果
            xhr.onreadystatechange = function () {
                //readyState:
                // 0: 请求未初始化
                // 1: 服务器连接已建立
                // 2: 请求已接收
                // 3: 请求处理中
                // 4: 请求已完成，且响应已就绪
                if (xhr.readyState === 4) {
                    //判断响应状态码 200  404  403 401 500
                    // 2xx 成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理结果  行 头 空行 体
                        //响应 
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体
                        //设置 result 的文本

                        alert(xhr.response)
                    } else {

                    }
                }

            }
        }

    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

1.2 post请求

<body>
    <button>点击发送请求</button>

    <script>
        const btn = document.getElementsByTagName('button')[0];

        btn.onclick = function () {
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和url
            xhr.open('POST', 'https://api.apiopen.top/api/login');

            //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // xhr.setRequestHeader('token', '');
            //xhr.send('a=100&b=200&c=300');

            xhr.responseType = 'json';

            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            xhr.onreadystatechange = function () {
                //readyState:
                // 0: 请求未初始化
                // 1: 服务器连接已建立
                // 2: 请求已接收
                // 3: 请求处理中
                // 4: 请求已完成，且响应已就绪
                if (xhr.readyState === 4) {
                    //判断响应状态码 200  404  403 401 500
                    // 2xx 成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理结果  行 头 空行 体
                        //响应 
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体
                        //设置 result 的文本

                        alert(JSON.stringify(xhr.response))
                    } else {

                    }
                }

            }
        }

    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

1.3 ie缓存信息

xhr.open('GET', 'http://wthrcdn.etouch.cn/weather_mini?city=巢湖&t' + Date.now());

1
2

1.4 超时回掉

            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //超时设置 2s 设置
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function () {
                alert("网络异常, 请稍后重试!!");
            }
            //2. 初始化 设置请求方法和url
            xhr.open('GET', 'http://wthrcdn.etouch.cn/weather_mini1city=巢湖&t' + Date.now());
            //3. 发送
            xhr.send();
1
2
3
4
5
6
7
8
9
10
11
12

2. jQuery 发送 AJAX 请求

引入js

<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
1

2.1 get请求

<!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>ajax</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <button>点击发送请求</button>

    <script>
  $('button').eq(0).click(function() {
    $.get('http://wthrcdn.etouch.cn/weather_mini?city=巢湖', function(data) {
         alert(JSON.stringify(data))
        }, 'json');
    })
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2.2 post请求

    <script>
        $('button').eq(0).click(function () {
            $.post('https://api.apiopen.top/api/login', {
                account: "1299828500@qq.com",
                password: "123456"
            }, function (data) {
                alert(JSON.stringify(data));
            });
        });
    </script>
1
2
3
4
5
6
7
8
9
10

2.3 通用方法

选择器我们用id选择器，之前两个用的是标签选择器
get方式

<!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>ajax</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <button id="button">点击发送请求</button>

    <script>
        $('#button').click(function () {
            $.ajax({
                //url
                url: 'http://wthrcdn.etouch.cn/weather_mini?city=巢湖',
                //请求类型
                type: 'GET',
                //响应体结果
                dataType: 'json',
                //成功的回调
                success: function (data) {
                   alert(JSON.stringify(data))
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function () {
                    alert("出错啦")
                },
                //头信息
                headers: {
                   
                }
            });
        });
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

post请求

<!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>ajax</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <button id="button">点击发送请求</button>

    <script>
        $('#button').click(function () {
            $.ajax({
                //url
                url: 'https://api.apiopen.top/api/login',
                //参数
                data: {
                    account: "1299828500@qq.com",
                    password: "123456"
                },
                //请求类型
                type: 'post',
                //响应体结果
                dataType: 'json',
                //成功的回调
                success: function (data) {
                    alert(JSON.stringify(data))
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function () {
                    alert("出错啦")
                },
                //头信息
                headers: {

                }
            });
        });
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

相关阅读:
mysql进阶学习 - concat函数
 arthas查看spring bean及调用其方法
 【Python】了解二分类：机器学习中的基础任务
 医者无疆 | AI赋能大医精诚，医疗&制药的进阶与突破
 P1038 [NOIP2003 提高组] 神经网络 ( 拓扑
 如何舒适的使用VScode
数据好合: Argilla 和 Hugging Face Spaces 携手赋能社区合力构建更好的数据集
 如何从单体架构迁移到微服务架构
 管理多个项目的 Git 配置文件
 新加坡国际学校IB课程详解
原文地址：https://blog.csdn.net/weixin_44480609/article/details/125539250