仿jQuery封装ajax函数【练习题笔记】

代森森

已于 2022-04-26 20:03:00 修改

阅读量1.4k

点赞数

分类专栏：案例向文章标签： javascript 前端 ajax

于 2022-04-26 20:01:39 首次发布

本文链接：https://blog.csdn.net/ovocc/article/details/124435302

版权

案例向专栏收录该内容

15 篇文章 1 订阅

订阅专栏

题目：
1.模仿jquery 的 $.get 发送ajax 请求，后面的数据类型为可选参数，有json 则会将数据进行json解析，没有json 参数则不解析数据，调用后的结果如下图：
2.使用相同的逻辑，完成 post 请求的封装，注意：post请求有请求参数的处理

分析：
1.首先创建一个html文档负责调用函数，js文档封装函数。导入相关的js包
文件放置关系如下：在这里插入图片描述

html放入题目以及导入封装函数的js：

请添加图片描述

2.因为上述题目调用方法可知，可以将get和post方式请求看作对象的调用。所以第一步在Myajax.js文档中将myajax创造为一个对象，里面的放函数。

在这里插入图片描述

3.封装get请求函数，原理是使用xhr发起get请求。

请添加图片描述

4.封装post请求函数，原理是使用xhr发起post请求。

在这里插入图片描述

5.调用结果
请添加图片描述

全部源代码

index.html:

<head>
    <script src="Myajax.js"></script>

</head>

<body>
    <script>
        // get请求
        myajax.get('https://这里输入自己的get地址', function(data) {
            console.log(data);
        });

        // post请求
        myajax.post('https://这里输入自己的post地址', {
            content: '是当过IG地方',
            source: '大师傅',
            author: '时代'
        }, function(data) {
            console.log(data);
        });
    </script>
</body>

Myajax.js:

var myajax = {
    get: function(url, datafn) {
        // console.log(url);
        // console.log(datafn);
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var result = JSON.parse(xhr.responseText);
                return datafn(result);
            }
        }
    },
    post: function(url, dataC, datafn) {
        // console.log(url);
        // console.log(dataC);
        // console.log(datafn);
        var arr = [];
        for (var k in dataC) {
            var str = k + '=' + dataC[k];
            arr.push(str);
        }
        arr = arr.join('&');
        // console.log(arr);
        var xhr = new XMLHttpRequest;
        xhr.open('POST', url);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(arr);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var result = JSON.parse(xhr.responseText);
                return datafn(result);
            }
        }
    }
}