Axios的介绍和Ajax的封装

最新推荐文章于 2024-10-06 15:51:50 发布

2764150442

最新推荐文章于 2024-10-06 15:51:50 发布

阅读量294

点赞数

分类专栏： JS 文章标签：前端 javascript ajax

本文链接：https://blog.csdn.net/weixin_70815247/article/details/126359478

版权

JS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Axios的特性，包括Promise API支持、请求和响应的拦截、数据转换等，并详细讲解了如何进行Ajax的封装，重点阐述了封装过程中参数处理和请求状态的管理，通过四个步骤展示了使用Ajax发送请求并获取响应数据的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax

支持的功能：

从浏览器发出 XMLHttpRequests请求。
从 node.js 发出 http 请求。
支持 Promise API。
能拦截请求和响应。
能转换请求和响应数据。
取消请求。
实现JSON数据的自动转换。
客户端支持防止 XSRF攻击。

在这里插入图片描述

[{
    "stuID":"1001",
    "stuName":"张三",
    "stuAge":20
},{
    "stuID":"1002",
    "stuName":"李四",
    "stuAge":20
},{
    "stuID":"1003",
    "stuName":"李梅",
    "stuAge":20
},{
    "stuID":"1004",
    "stuName":"杰克",
    "stuAge":20
},{
    "stuID":"1005",
    "stuName":"汤姆",
    "stuAge":20
}]

<!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>
    <script src="js/axios.min.js"></script>
    <!-- <script src="js/jquery-3.6.0.js"></script> -->
</head>
<body>
    <input type="button" value="发送get请求" name="" id="btn1">
    <div id="div1"></div>
    <script>
        document.querySelector("#btn1").onclick = function(){
            axios.get("data/student.json").then(function(res){
                // console.log(res.data)
                // jsonData(res.data)
                var table = "<table border='1'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"
                    for(var i=0;i<res.data.length;i++){
                        var id = res.data[i].stuID;
                        var uname = res.data[i].stuName;
                        var age = res.data[i].stuAge;
                        table+="<tr><td>"+id+"</td><td>"+uname+"</td><td>"+age+"</td></tr>";
                    }
                    table+="</table>"
                    document.querySelector("#div1").innerHTML=table
            })
            
           
        }
    </script>
</body>
</html>

封装

在封装ajax的时候会使用到参数传递，因此必须写个方法作为对象属性转换为ajax请求数据的方法

下面是ajax封装

function ajax(options){
    var xhr = null;
    var params = formsParams(options.data);
    //创建对象
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 连接
    if(options.type == "GET"){
        xhr.open(options.type,options.url + "?"+ params,options.async);
        xhr.send(null)
    } else if(options.type == "POST"){
        xhr.open(options.type,options.url,options.async);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(params);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            options.success(xhr.responseText);
        }
    }
    function formsParams(data){
        var arr = [];
        for(var prop in data){
            arr.push(prop + "=" + data[prop]);
        }
        return arr.join("&");
    }
 
}
 
ajax({
    url : "a.php",  // url---->地址
    type : "POST",   // type ---> 请求方式
    async : true,   // async----> 同步：false，异步：true 
    data : {        //传入信息
        name : "张三",
        age : 18
    },
    success : function(data){   //返回接受信息
        console.log(data);
    }
})

使用ajax发请求并获取响应数据只需要简单的4步

参数说明：

xhr.status------------------------status ：响应的 HTTP 状态，200表示响应成功

xhr.readyState-----------------readyState该属性表示请求/响应过程的当前活动阶段，这个属性可取的值如下：

0 ：未初始化。尚未调用 open() 方法。
1 ：启动。已经调用 open() 方法，但尚未调用 send() 方法。
2 ：发送。已经调用 send() 方法，但尚未接收到响应。
3 ：接收。已经接收到部分响应数据。
4 ：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

xhr.onreadystatechange----------------------readyState属性状态变化事件，只要 readyState 属性的值由一个值变成另一个值，都会触发一次 readystatechange 事件。可以利用这个事件来检测每次状态变化后 readyState 的值。

xhr.responseText---------------------------------responseText ：作为响应主体被返回的文本。

xhr.responseXML -------------------------------responseXML ：如果响应的内容类型是 "text/xml" 或 "application/xml" ，这个属性中将保存包含着响应数据的 XML DOM 文档