原生js创建get/post请求以及封装方式、axios的基本使用

最新推荐文章于 2024-09-29 10:05:19 发布

烧脑的小白

最新推荐文章于 2024-09-29 10:05:19 发布

阅读量4.8k

点赞数

文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/tangtanglinli/article/details/129460509

版权

原生js创建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>Document</title>
</head>
<body>
    <div id="box"></div>
    <script>
        //创建ajax引擎对象
        let xhr = new XMLHttpRequest();

        //配置请求方式和请求地址
        xhr.open("get","http://ajax.h5.itsource.cn:5000/api/testGet?name=张三");

        // 监听响应码和状态码
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                // 处理数据
                let res = JSON.parse(xhr.responseText);
                console.log(res);

                //判定再渲染
                if(res.code == 200){
                    box.innerHTML = res.data; 
                }
            }
        }
        // 发送请求
        xhr.send();
    </script>
</body>
</html>

原生js创建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>Document</title>
</head>
<body>
    <div id="box"></div>
    <script>
        //创建ajax引擎对象
        let xhr = new XMLHttpRequest();

        //配置请求方式和请求地址
        xhr.open("post","http://ajax.h5.itsource.cn:5000/api/testPost");

        // 监听状态变化和接收数据
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                // 处理数据
                let res = JSON.parse(xhr.responseText);
                console.log(res);

                //判定再渲染
                if(res.code == 200){
                    box.innerHTML = res.data; 
                }
            }
        }

        //请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        // 发送请求
        xhr.send("name=李四");
    </script>
</body>
</html>

原生get和post封装方式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>
</head>

<body>
    <script>
        function ajax(type, url, parmas, callback) {

            //创建ajax引擎对象
            let xhr = new XMLHttpRequest();
            //处理参数,定义一个空数组
            let arr = [];
            //遍历对象，拼接到数组中
            for (const key in parmas) {
                if (Object.hasOwnProperty.call(parmas, key)) {
                    arr.push(key + "=" + parmas[key]);                   
                }
            }
            parmas = arr.join("&");

            if (type == "get") {
                //配置请求方式和请求地址
                xhr.open(type, url + "?"+ parmas);
                // 发送请求
                xhr.send();
            } else {
                //配置请求方式和请求地址
                xhr.open(type, url);
                //请求头
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                // 发送请求
                xhr.send(parmas);
            }

            // 监听状态变化和接收数据
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 处理数据
                    callback(JSON.parse(xhr.responseText));
                }
            }

        }

        ajax("get","http://ajax.h5.itsource.cn:5000/api/testGet",{
            name:"张三"
        },function(res){
            console.log(res);
        })

        ajax("post","http://ajax.h5.itsource.cn:5000/api/testPost",{
            name:"李四"
        },function(res){
            console.log(res);
        })
    </script>
</body>

</html>

原生get和post封装方式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>
</head>

<body>
    <script>

        // //方式二:
        function ajax(obj) {
            //处理参数
            let type = obj.type;
            let url  = obj.url;
            let parmas = obj.params;
            let callback = obj.callback;

            //创建ajax引擎对象
            let xhr = new XMLHttpRequest();
            //处理参数,定义一个空数组
            let arr = [];
            //遍历对象，拼接到数组中
            for (const key in parmas) {
                if (Object.hasOwnProperty.call(parmas, key)) {
                    arr.push(key + "=" + parmas[key]);
                }
            }
            parmas = arr.join("&");

            // 判定
            if (type == "get") {
                //配置请求方式和请求地址
                xhr.open(type, url + "?" + parmas);
                // 发送请求
                xhr.send();
            } else {
                //配置请求方式和请求地址
                xhr.open(type, url);
                //请求头
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                // 发送请求
                xhr.send(parmas);
            }

            // 监听状态变化和接收数据
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 处理数据
                    callback(JSON.parse(xhr.responseText));

                }
            }

        }

        // 调用
        ajax({
            type: "get",
            url: 'http://ajax.h5.itsource.cn:5000/api/testGet',
            params: {
                name: '张三'
            },
            callback: function (res) {
                console.log(res)
            }
        })

        ajax({
            type: "post",
            url: 'http://ajax.h5.itsource.cn:5000/api/testPost',
            params: {
                name: '李四'
            },
            callback: function (res) {
                console.log(res)
            }
        })


    </script>
</body>

</html>

axios的基本使用

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

<body>
    <script>
        // 为给定 ID 的 user 创建请求
        axios.get('http://ajax.h5.itsource.cn:5000/api/testGet?name=张三')
            .then(function (response) {
                console.log(response.data);
            })
            .catch(function (error) {
                console.log(error);
            });

        // 上面的请求也可以这样做
        axios.get('http://ajax.h5.itsource.cn:5000/api/testGet', {
            params: {
                ID: 12345
            } 
        })
            .then(function (response) {
                console.log(response.data);
            })
            .catch(function (error) {
                console.log(error);
            });
    </script>
</body>

</html>