原生ajax封装

梦里梦外; 2022-09-14 02:25 169阅读 0赞

** 引入线上jquery：**

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

** html:**

<button>点击获取数据</button>

** Javascript:**

// 原生ajax封装
            function Http2({
                url,
                method = 'get',
                data = {}
            }) {
                return new Promise((resolve) => {
                    let xhr = new XMLHttpRequest();
                    // 2.打开请求 xhr.open(请求方式,请求地址，是否异步)
                    xhr.open(method, url, true);
                    if (method == 'post') {
                        xhr.setRequestHeader("content-type", "application/json");
                        xhr.send(JSON.stringify(data));
                    } else {
                        xhr.send();
                    }
                    xhr.onreadystatechange = () => {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            resolve(JSON.parse(xhr.responseText));
                        }
                    }
                });
            }

**案例：**

// 案例
            $('button').click(async () => {
                let a = await Http2({
                    url: 'http://localhost:3000/index/banner'
                });
                console.log(a);
            });

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关 promise封装原生ajax $ajax() 以及fetch？

使用Promise封装原生ajax Get 和 Post Promise是异步编程的一种解决方案。比传统的解决方案——————回调函数和事件，Promise更合理和

客官°小女子只卖身不卖艺/ 2022年12月20日 12:58/ 0 赞/ 236 阅读

相关原生js封装ajax方法

jquery框架的ajax方法固然好用，但是假如某天我们的项目不能引入jquery或项目需求很简单，没有很多交互功能，只需要ajax，这时引入jquery库会造成资源浪费，也会

绝地灬酷狼/ 2022年09月26日 00:26/ 0 赞/ 162 阅读

相关原生ajax封装

引入线上jquery： <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

梦里梦外;/ 2022年09月14日 02:25/ 0 赞/ 170 阅读

相关原生js封装Ajax函数

Ajax，是 Asynchronous JavaScript + XML 的简写。指一种创建交互式网页应用的网页开发的技术。通过异步模式，提升了用户体验。优化了浏览器和服

￡神魔★判官ぃ/ 2022年05月23日 04:26/ 0 赞/ 230 阅读

相关原生ajax的封装

原生ajax的封装 get请求 post请求有参无参都可以实现返回数据类型，需要自己处理，返回字符串格式 <!DOCTYPE html> <html

青旅半醒/ 2022年01月23日 06:04/ 0 赞/ 232 阅读

相关原生js封装ajax请求

一个完整的ajax请求封装，适用场景： 1. get 请求 2. post请求 3. 表单提交方式 4. 表单上传文件 function ajax(opti

向右看齐/ 2021年12月14日 06:29/ 0 赞/ 350 阅读

相关不如封装一个原生Ajax

封装原生Ajax 我们常常引用jq就是为了使用上面的ajax,方便又实用。但是jq文件一个高达几十kb,还有近几年jq的发展趋势不容乐观，jq中还迟迟没有改进。于是自己造轮子

清疚/ 2021年09月17日 22:46/ 0 赞/ 310 阅读

相关原生ajax封装

//参数/ url :地址 obj: 参数 callback 回调 //没做容错有时间在写一

深藏阁楼爱情的钟/ 2021年09月16日 23:42/ 0 赞/ 323 阅读

相关原生js 封装ajax

这是自己封装的ajax ，分享一下：直接上代码文件夹 ![70][] index.html ![70 1][] ![70 2][]

不念不忘少年蓝@/ 2021年09月15日 07:50/ 0 赞/ 394 阅读

相关原生JS封装AJAX方法

原生JS封装AJAX方法 Ajax大家每天都在用，jquery库对Ajax的封装也很完善、很好用，下面我们看一下它的内部原理，并手动封装一个自己的Ajax库。一、原理 ...

红太狼/ 2020年06月06日 18:35/ 0 赞/ 847 阅读