ajax详解，四种方式发送ajax请求，ajax原生、jQuery封装的ajax、axios封装的ajax、fetch函数

系统管理员 2022-11-30 15:54 259阅读 0赞

## ajax详解，四种方式发送ajax请求 ##

**ajax简介：ajax全称为Asynchronous JavaScript And XML，就是异步的JS和XML  
通过ajax可以在浏览器中向服务器发送异步请求，然后浏览器处理后返回请求内容  
最大的优势 : 无刷新获取数据，  
ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式**

**ajax的优点  
1 . 可以无需刷新页面与服务器端进行通信  
2 . 允许根据用户事件来更新不分页面的内容**

**ajax的缺点  
1 . 没有浏览历史，不能回退  
2 . 存在跨域问题  
3 . SEO（搜索引擎优化）不友好，爬虫爬不到**

**那么我们也要知道什么是XML  
XML :  
XML 指可扩展标记语言  
XML 被设计用来传输和存储数据 (重要)  
XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，  
全都是自定义标签，用来表示一些数据。**  
（最开始ajax返回的数据就是XML字符串，不过现在基本都是JSON格式进行传输）

<student name="孙悟空";age="18";gneder="男"></student>
        
    
        <student>
            <name>孙悟空</name>
            <age>18</age>
            <gneder>男</gneder>
        </student>

在学习ajax之前我们还不得不了解一下HTTP协议  
**HTTP (hypertext transport protocol) ，即超文本传输协议。这个协议详细规定了浏览器和万维网服务器之间互相通信的规则**  
**何为协议？简单一点说就是一种约束，规则，服务器和客户端都要遵守的规则**  
**HTTP就是一个通信规则，通信规则规定了客户端发送给服务器的内容格式，也规定了服务器发送给客户端的内容格式。其实我们要学习的就是这个两个格式！  
客户端发送给服务器的格式叫 "请求协议；  
服务器发送给客户端的格式叫 “响应协议”。**

**请求的内容还有一个专业名词，叫做：“请求报文”  
相应的内容也有一个专业名词，叫做："响应报文"**

**请求报文的格式和参数（包括四部分）：  
1 .（请求）行：  
请求行包括 三 部分：  
（第一部分：请求类型）：GET、POST、PUT…  
（第二部分：url路径）：一个完整的url路径又分为这几个部分：  
\[ 协议名（http）域名（www.baidu.com）端口（80）请求文件（index.html）\]  
\[ http://www.baidu.com:80 \]  
（第三部分：http协议的版本）： 如 \[ 1.1版本(使用最多)，1.0版本，2.0版本 \]  
2 .（请求）头：  
固定的格式内容（都是 key: value），这部分内容太多了  
3 . 空行：（固定格式，必须得有的）  
4 .（请求）体：（可以有内容，也可以没有内容）  
如果是GET请求，请求体是空的  
如果是POST请求，请求体可以不为空（如：name=tom&password=123）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]  
**"响应" 报文的格式和参数（也包括四部分）：  
1 .（响应）行：  
响应 行包括 三 部分：  
（第一部分：HTTP版本）：HTTP/1.1  
（第二部分：响应状态码）：200、404…  
（第三部分：响应字符串）：ok（与状态码对应）  
2 .（响应）头：固定的格式内容（都是 key: value），这部分内容太多了  
3 . 空行：（固定格式，必须得有的）  
4 .（响应）体：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 1]

## 1. 利用原生ajax，创建ajax请求 ##

**（最简单的一个原生ajax请求，所有内容均为最理想状态，不考虑任何网络和服务器因素）**

var xhr = new XMLHttpRequest();
            xhr.open("GET","https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata")
            xhr.send();
            xhr.onreadystatechange = callBack;
            function callBack(){ 
                if(xhr.status === 200 && xhr.readyState ===4){ 
                    console.log(xhr.response)
                }
            }

**ajax详解，比较详细解释每一步的作用**

// 第一步，创建xhr对象
            var xhr = new XMLHttpRequest();
            // 第二步，初始化，这是请求的方式，url，异步还是同步请求
            // 最后一个参数true和false表示同步还是异步，true表示异步，默认为true，false表示同步
            xhr.open("GET", "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata", true)
    
    
            /* GET形式传递参数的请求，在URL的最后加上？和要传递的参数，多个参数之间用&连接 xhr.open("GET", "https://www.baidu.com/s?wd=鬼灭之刃", true) */
    
    
            /* 如果是post传递参数的请求,要在send中传递参数 xhr.send("name=zhangsan&age=14") xhr.send("name:zhangsan&age:14") */
    
    
            // 设置请求头信息，接收两个参数，第一个是请求的名字，第二个是请求的值
            // Content-Type用来设置请求体内容的类型，后面的参数值是固定写法，参数查询字符串的类型
            // setRequestHeader可以添加预定的请求头，也可以添加自定义的
            xhr.setRequestHeader("Content-Type","application/x-www-from-urlencoded")
            // 设置响应体数据的类型,也就是返回回来的数据
            xhr.responseType='json'
            // 第三步，发送请求
            xhr.send()
            // 第四步，设置处理返回结果的回调函数
            xhr.onreadystatechange = callBack;
            function callBack() { 
                // readyState有五个值，分别是0 1 2 3 4 
                // 0 表示未初始化，最开始属性的值就是0
                // 1 表示open方法调用完毕，
                // 2 表示send方法调用完毕
                // 3 表示服务端返回了部分结果
                // 4 表示服务端返回了全部结果
                // status 表示状态码
                if (xhr.readyState === 4 && xhr.status === 200) { 
                    // 满足条件后，处理数据，行、头、空行、体
                    // 1.响应行
                    console.log("响应状态码：" + xhr.status) //状态码
                    console.log("状态字符串：" + xhr.statusText) //状态字符串
                    // 2.响应头
                    console.log("响应头的所有内容：" + xhr.getAllResponseHeaders) //响应头的所有内容
                    // 3.响应体,一般都是拿响应体
                    console.log("响应体：" + xhr.responseText)
                }
            }

**ajax请求超时与网络异常的处理**

**ajax处理重复发送请求问题，用户一直点击一直发送请求会给服务器造成巨大压力，这里设置在没有成功返回数据之前，如果用户还在发送请求，则取消上一次请求**

<button id="btn">点击发送ajax请求</button>
        	<script>
            var btn = document.getElementById('btn');
            // 在前面先定义xhr，要不然下面的xhr.abort会出现未定义的情况
            var xhr = null;
            // 设置一个标识变量，表示是否在发送请求
            // 初始值为false，当开始发送请求时，变为true，接收完数据后再次变成false
            let isSending = false;
            btn.addEventListener("click", function () { 
                if (isSending === true) { 
                    // isSending === true 时表示，正在发送请求
                    // xhr.abort()方法可以手动取消请求
                    xhr.abort();
                }
                xhr = new XMLHttpRequest();
                // 创建ajax请求了，修改标识变量的值
                isSending = true
    
    
                xhr.open("GET", "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata")
                xhr.send();
                xhr.onreadystatechange = function () { 
                    if (xhr.readyState === 4) { 
                        // 当全部都加载完成后，设置isSending = false
                        // 切记不能在xhr.status === 200和xhr.readyState === 4都满足的情况下设置为false
                        // 因为会有请求失败的情况，也就是说xhr.status !== 200的情况
                        isSending = false
                        if (xhr.status === 200) { 
                            console.log(xhr.response)
                        }
                    }
                };
            })
        </script>

## 2 . 使用jQuery封装的ajax（使用jQuery时注意把文件路径引入script标签中） ##

<button id="btn">点击发送ajax请求</button>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            var btn = document.getElementById("btn");
            btn.addEventListener("click",function(){ 
                // jquery中的ajax请求
                // get的请求方法（一般用来获取数据），可以添加参数，但是没必要
                // 第一个参数为url地址，第二个参数为一个无论成功还是失败都会执行的回调函数，第三个参数为设置响应体的数据类型'json'
                // 回调函数里的参数，parmas1表示的是请求返回的数据
                // parmas2 不管成功还是失败都返回success
                // parmas3 表示xhr对象
                $.get("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",function(data,status,result){ 
                    console.log(data)
                    console.log(status)
                    console.log(result)
                },'json')
    
    
                // post会比get多一个参数，也就是要传递给服务器的参数，post一般是用来发送请求
                var data = { 
                    name:"zhangsan",
                    age:"24"
                }
                $.post("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",data,function (data) { 
                    console.log(data)
                })
            })
        </script>

## 3 . 使用axios封装的ajax（使用axios时注意把文件路径引入script标签中） ##

<button id="getBtn">GET</button>
        <button id="postBtn">POST</button>
        <button id="ajaxBtn">axios.all处理并发请求</button>
    
    
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script>
        <script>
            var getBtn = document.getElementById("getBtn")
            var postBtn = document.getElementById("postBtn")
            var ajaxBtn = document.getElementById("ajaxBtn")
    
            getBtn.addEventListener("click", function () { 
                // 几乎和jQuery一样，第一个参数为url，第二个参数{params：{}}要传递的参数
                axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
                    { 
                        params: { 
                            name: "zhangsan",
                            age: "24"
                        }
                    })
                    .then(function (data) { 
                        console.log(data)
                    })
            })
    
            postBtn.addEventListener("click", function () { 
                // post没什么好说的，基本都一样
                axios.post("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
                    { 
                        params: { 
                            name: "zhangsan",
                            age: "24"
                        }
                    })
                    .then((v) => { 
                        console.log(v)
                    })
            })

**axios.all解决并发请求**

ajaxBtn.addEventListener("click", function () { 
                // axios.all
                function getInfo() { 
                    let obj = { 
                        swiper: axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"),
                        logo: axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/catitems")
                    }
                    return obj;
                }
                axios.all([getInfo().swiper, getInfo().logo])
                // 返回的参数为一个数组集合
                    .then((v) => { 
                        console.log(v)
                        console.log(v[0])
                        console.log(v[1])
                        console.log("两个请求都加载好了")
                    })
            })

## 4 . fetch函数实现ajax，fetch是自带的，不需要导入任何外部链接，但是用的比较少，见到能认识就OK ##

var getBtn = document.getElementById("getBtn")
            getBtn.addEventListener("click",function(){ 
                fetch("https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",{ 
                    method:"GET"
                }).then((v)=>{ 
                    return v.text();
                }).then((v)=>{ 
                    console.log(v)
                })
            })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/a5499caf995e4aa78407904aa22c2f6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/a3b7fe6e9e0349c9b5cbe1fd995ddb75.png