封装自己的ajax函数

最新推荐文章于 2022-07-14 18:19:37 发布

原创最新推荐文章于 2022-07-14 18:19:37 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端基础专栏收录该内容

22 篇文章

订阅专栏

本文档展示了如何封装一个自定义的AJAX函数，包括GET和POST请求的实现。通过示例代码详细解释了函数的内部逻辑，如数据转换成查询字符串、xhr对象的创建和使用、请求状态的监听。同时，提到了$.ajax的结构和注意事项，如GET与POST请求的区别。此教程有助于理解AJAX工作原理并自定义请求处理。

封装自己的ajax函数

效果展示：
在这里插入图片描述代码展示：

<!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 solveData(data) {
            //创建一个arr数组
            var arr = [];
            for (var k in data) {
                arr.push(k + '=' + data[k]);
            }
            return arr.join('&');//将字符数组转化为字符串中间使用&拼接
        }
        //创建之间的ajax函数
        function myfun(options) {
            //创建一个xhr对象
            var xhr = new XMLHttpRequest();
            //将外界传过来的数据转化为查询字符串
            var qs = solveData(options.data);
            //请求方式的判断
            if (options.method.toUpperCase() === 'GET') {
                //发送get请求
                xhr.open(options.method, options.url + "?" + qs);
                xhr.send();
            } else if (options.method.toUpperCase() === 'GET') {
                //发送post请求
                xhr.post(options.method, options.url);
                //setRequestHeader
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                //send()
                xhr.send(qs);
            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    //代码运行到这里,get请求非常成功
                    //注意这里的responseText就是响应回来的数据
                    var res = JSON.parse(xhr.responseText);
                    options.success(res);
                }
            }
        }
    </script>
    <script>
        //函数调用
        myfun({
            method:'GET',
            url:'http://www.liulongbin.top:3006/api/getbooks',
            data:{
                id:1
            },
            success:function (res) {
                console.log(res);
            }
        });
    </script>
</body>
</html>

注意事项：

1，关于发送ajax请求的构成部分

$.ajax({
	//参数配置
	1，method: 请求方式，
	2，url: 请求地址，
	3，data:{
		请求参数
	}，
	4，success:function(res){
		回调函数
	}
	
})

2，怎么样将一个字符串转化为一个查询字符串

//定义一个将字符串转化为查询字符串
        function solveData(data) {
            //创建一个arr数组
            var arr = [];
            for (var k in data) {
                arr.push(k + '=' + data[k]);
            }
            return arr.join('&');//将字符数组转化为字符串中间使用&拼接
        }

3，怎么样进行ajax函数的封装

//创建之间的ajax函数
        function myfun(options) {
            //创建一个xhr对象
            var xhr = new XMLHttpRequest();
            //将外界传过来的数据转化为查询字符串
            var qs = solveData(options.data);
            //请求方式的判断
            if (options.method.toUpperCase() === 'GET') {
                //发送get请求
                xhr.open(options.method, options.url + "?" + qs);
                xhr.send();
            } else if (options.method.toUpperCase() === 'GET') {
                //发送post请求
                xhr.post(options.method, options.url);
                //setRequestHeader
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                //send()
                xhr.send(qs);
            }

注意：toUpperCase();函数的运用。
注意：
parse()，stringify();

//将json转化为js对象
var str = JSON.parse('{"name":"zs"}');
console.log(str);
//将一个js对象转化为json
var str2 = JSON.stringify(str);
console.log(str2);

4，console.log(xhr.responseText);可以拿到xhr请求回来的数据。

5，注意get()和post(请求区别：

get(): 在open阶段接受查询字符串进行具体操作，send阶段不做任何操作。
post(): 在open阶段不传入查询字符串，在send阶段传入查询字符串。