Axios使用get/post的请求、封装、发起跨域请求、

时间：2025-04-28 07:59:51

一、Axios使用get/post的请求

        Axios是一个基于promise 网络请求库，作用于和浏览器中。它是isomorphic 的(即同一套代码可以运行在浏览器和中)。在服务端它使用原生 http模块,而在客户端(浏览端)则使用  XMLHttpRequests。

 Axios特性：

  • 从浏览器创建XMLHttpRequests
  • 从 创建http请求
  • 支持Promise APl
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF

Axios:

  •         Axios是专注于网络数据请求的库。
  •         相比于原生的XMLHttpRequgs对象，axios简单易用。
  •         相比于jQuery，axios更加轻量化，只专注于网络数据请求。

Axios发送get请求的语法:

        (‘url’,{ params :{/*参数*} } ).then(callback)其中在 then中函数执行成功后的回调

Axios 发送post请求的语法:

        Axios. get(‘url',{{/*参数*/} } ).then(callback)其中在 then 中执行成功后的回调函数.

案例：1

<!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>
    <!-- 引入axios的文件 -->
    <script src="js/"></script>
</head>

<body>
    <input type="button" value="发送get请求" >
    <div ></div>
    <script>
        ("#btn1").onclick = function() {
                ("data/")
                    .then(function(res) {
                        //:服务器端返回的数据
                        //()
                        jsonData()
                    })
            }
            //处理数据
        function jsonData(data) {
            var table = "<table border='1' bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>";
            for (var i = 0; i < ; i++) {
                table += "<tr><td>" + data[i].stuID + "</td><td>" + data[i].stuName + "</td><td>" + data[i].stuAge + "</td></tr>"
            }
            table += "</table>"
            ("#div1").innerHTML = table
        }
    </script>
</body>

</html>

代码：

[{
    "stuID": "1001",
    "stuName": "张三",
    "stuAge": 20
}, {
    "stuID": "1002",
    "stuName": "李四",
    "stuAge": 19
}, {
    "stuID": "1003",
    "stuName": "李梅",
    "stuAge": 21
}, {
    "stuID": "1004",
    "stuName": "Rose",
    "stuAge": 19
}, {
    "stuID": "1005",
    "stuName": "Tom",
    "stuAge": 20
}]

案例：2

<!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/"></script>
    <style>
        .gcolor {
            color: green;
        }
        
        .rcolor {
            color: red;
        }
    </style>
</head>

<body>
    用户名：<input type="text" > 密码：
    <input type="password" >
    <hr />
    <input type="button" value="发送get请求" >
    <div ></div>
    <script>
        ("#btn1").onclick = function() {
            var uname = ("#uname").value
            var pwd1 = ("#pwd").value
            var obj = {
                username: uname,
                pwd: pwd1
            }
            ("http://127.0.0.1:8089", (obj))
                .then(function(res) {
                    //:服务器端返回的数据
                    if ( == 1) {
                        ("#div1").("rcolor")
                        ("#div1").("gcolor")
                        ("#div1").innerHTML = "用户名可用"
                    } else {

                        ("#div1").("gcolor")
                        ("#div1").("rcolor")
                        ("#div1").innerHTML = "用户名已存在"
                    }
                })
        }
    </script>
</body>

</html>

二、封装

<!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/"></script>
</head>

<body>
    <input type="button" value="提交" >
    <div ></div>
    <script>
        ("btn1").onclick = function() {
                myAjax({
                    requestType: 'get',
                    url: 'data/',
                    async: true,
                    cache: false,
                    data: {
                        username: "admin",
                        pwd: "123456"
                    },
                    success: function(data) {
                        (data);
                        //将返回的数据封装成json
                        myFunction((data))
                    },
                    error: function(statusText) {
                        alert("请求失败了，以下是具体信息：" + statusText)
                    }
                })
            }
            //处理数据
        function myFunction(data) {
            var table = "<table border='1' bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>";
            for (var i = 0; i < ; i++) {
                table += "<tr><td>" + data[i].stuID + "</td><td>" + data[i].stuName + "</td><td>" + data[i].stuAge + "</td></tr>"
            }
            table += "</table>"
            ("div1").innerHTML = table
        }
    </script>
</body>

</html>

封装的ajax代码：

function myAjax(obj) {
    var xmlHttp; //保存xmlHttpRequest对象
    var type = ; //保存请求方式
    var cache =  || false; //get时是否使用缓存,默认否
    var success = ; //数据请求成功的回调方法
    var error = ; //发生错误的回调方法
    var async =  || false; //是否异步，默认否
    var data = []; //存储用户发来的数据
    var url = ;

    createXMLHttpRequest() //调用
        //定义状态监听函数
     = function() {
            switch () {
                case 1:
                    ("open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。");
                    break;
                case 2:
                    ("Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。");
                    break;
                case 3:
                    ("所有响应头部都已经接收到。响应体开始接收但未完成。");
                    break;
                case 4:
                    if ( == 200) {
                        ("HTTP 响应已经完全接收。");
                        success(); //调用回调函数
                    }
                    break;
                default:
                    error();
                    break;
            }
        }
        //把用户传来的数据转换成字符串
    for (var i in ) {
        (i + '=' + [i]);
    }
    data = ('&');

    if (() == 'GET') { //如果是get请求
        if (cache == false) { //如果get请求不使用缓存
            ('get', url + '?' + data + '&random=' + (), async)
            ('null')
        } else { //如果get请求使用缓存
            ('get', url + '?' + data, async)
            ('null')
        }
    } else if (() == 'POST') //如果是post请求
    {
        ('post', url, async)
        ("Content-Type", "application/x-www-form-urlencoded")
        (data)
    } else {
        throw new Error('您的请求方法有误！')
    }
    //创建XMLHttpRequest对象
    function createXMLHttpRequest() {
        if () {
            xmlHttp = new ActiveXObject("")
        } else {
            try {
                xmlHttp = new XMLHttpRequest()
            } catch (error) {
                xmlHttp = false
            }
        }
    }
}
function myAjax(obj) {
    var myAjax
        //创建一个请求对象xmlhttp
    createxmlhttp()
        // ()
    if (() == "GET") {
        (,  + "?" + , )
        ()
    } else if (() == "POST") {
        (, , )
        ("Content-Type", "application/x-www-form-urlencoded");
        (data) //post请求通过send()将参数传递到服务器端
    }
    // 事件处理
     = function() {
        if ( == 200 &&  == 4) {
            ()
        }
    }
}

function createxmlhttp() {
    var xmlhttp
    if () {
        try {
            xmlhttp = new ActiveXObject("")
        } catch (error) {
            xmlhttp = new ActiveXObject("")
        }
    } else if () {
        try {
            xmlHttp = new XMLHttpRequest()
        } catch (error) {
            xmlhttp = false
        }
    }
    return xmlHttp
}

代码：

[{
    "stuID": "1001",
    "stuName": "张三",
    "stuAge": 20
}, {
    "stuID": "1002",
    "stuName": "李四",
    "stuAge": 19
}, {
    "stuID": "1003",
    "stuName": "李梅",
    "stuAge": 21
}, {
    "stuID": "1004",
    "stuName": "Rose",
    "stuAge": 19
}, {
    "stuID": "1005",
    "stuName": "Tom",
    "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/jquery-3.6."></script>
</head>

<body>
    <script>
        $(function() {
            $.ajax({
                method: "get",
                url: "/try/ajax/?jsoncallback=success",
                data: {
                    uname: "admin",
                    pwd: "123456"
                },
                success: function(res) {
                    (res)
                }
            })
        })
    </script>
</body>

</html>

 实现跨域的代码：

var http = require("http");
let queryString = require('querystring');
const server = (function(req, res) {
    //实现跨域
    (200, { "Access-Control-Allow-Origin": "*" });

    //定义变量保存传递过来的参数
    let params = "";
    //注意：在nodejs中post请求的参数我们不能一次性拿到，必须分批获取
    //为req绑定data事件并添加回调函数
    ("data", function(chunk) {
        params += ();
    });
    //绑定一个结束事件
    ("end", function() {
        var names = ["admin", "张三", "李四", "Tom", "Lucy"]
        var obj = (params)
        if (() > -1) {
            result = { "message": "用户名已存在", status: 0 }
        } else {
            result = { "message": "此用户名可用", status: 1 }
        }
        ((result));
    });
}).listen(8089);
//鼠标右键   运行方式-->Node Application 先运行服务器
//再运行html页面

相关文章