一、Axios使用get/post的请求

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

Axios特性：

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

Axios:

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

Axios发送get请求的语法:

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/axios.min.js"></script>
</head>

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

</html>

student.json代码：

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

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

                        document.querySelector("#div1").classList.remove("gcolor")
                        document.querySelector("#div1").classList.add("rcolor")
                        document.querySelector("#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/myAjax.js"></script>
</head>

<body>
    <input type="button" value="提交" id="btn1">
    <div id="div1"></div>
    <script>
        document.getElementById("btn1").onclick = function() {
                myAjax({
                    requestType: 'get',
                    url: 'data/student.json',
                    async: true,
                    cache: false,
                    data: {
                        username: "admin",
                        pwd: "123456"
                    },
                    success: function(data) {
                        console.log(data);
                        //将返回的数据封装成json
                        myFunction(JSON.parse(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 < data.length; i++) {
                table += "<tr><td>" + data[i].stuID + "</td><td>" + data[i].stuName + "</td><td>" + data[i].stuAge + "</td></tr>"
            }
            table += "</table>"
            document.getElementById("div1").innerHTML = table
        }
    </script>
</body>

</html>

封装的ajax代码：

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

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

    if (type.toUpperCase() == 'GET') { //如果是get请求
        if (cache == false) { //如果get请求不使用缓存
            xmlHttp.open('get', url + '?' + data + '&random=' + Math.random(), async)
            xmlHttp.send('null')
        } else { //如果get请求使用缓存
            xmlHttp.open('get', url + '?' + data, async)
            xmlHttp.send('null')
        }
    } else if (type.toUpperCase() == 'POST') //如果是post请求
    {
        xmlHttp.open('post', url, async)
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
        xmlHttp.send(data)
    } else {
        throw new Error('您的请求方法有误！')
    }
    //创建XMLHttpRequest对象
    function createXMLHttpRequest() {
        if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")
        } else {
            try {
                xmlHttp = new XMLHttpRequest()
            } catch (error) {
                xmlHttp = false
            }
        }
    }
}

function myAjax(obj) {
    var myAjax
        //创建一个请求对象xmlhttp
    createxmlhttp()
        // xmlHttp.open()
    if (obj.type.toUpperCase() == "GET") {
        xmlHttp.open(obj.type, obj.url + "?" + obj.data, obj.async)
        xmlHttp.send()
    } else if (obj.type.toUpperCase() == "POST") {
        xmlHttp.open(obj.type, obj.url, obj.async)
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlHttp.send(data) //post请求通过send()将参数传递到服务器端
    }
    // 事件处理
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.status == 200 && xmlHttp.readyState == 4) {
            obj.succss(xmlHttp.responseText)
        }
    }
}

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

student.json代码：

[{
    "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.0.min.js"></script>
</head>

<body>
    <script>
        $(function() {
            $.ajax({
                method: "get",
                url: "https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=success",
                data: {
                    uname: "admin",
                    pwd: "123456"
                },
                success: function(res) {
                    console.log(res)
                }
            })
        })
    </script>
</body>

</html>

实现跨域的代码：

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

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

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

一、Axios使用get/post的请求

Axios特性：

Axios:

Axios发送get请求的语法:

Axios 发送post请求的语法:

student.json代码：

案例：2

二、封装

封装的ajax代码：

student.json代码：

三、发起跨域请求

实现跨域的代码：

猜你喜欢