封装自己的ajax函数

最新推荐文章于 2022-12-03 19:05:48 发布

晓晓2022

最新推荐文章于 2022-12-03 19:05:48 发布

阅读量1k

点赞数

分类专栏：前端基础文章标签：前端

本文链接：https://blog.csdn.net/qq_45911604/article/details/123711200

版权

前端基础专栏收录该内容

22 篇文章 1 订阅

订阅专栏

封装自己的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阶段传入查询字符串。

晓晓2022

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
封装自己的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"&
复制链接

扫一扫