AJAX封装
2019-05-24 06:11:32来源:博客园 阅读 ()
封装的一般套路
- 使用全局代码写一个比较完整的用例
- 然后写一个空函数,没有形参,没有返回值,将这个完整地放到这个空函数中
- 最后根据使用过程中的需求(即需要变更的数据)抽象参数
AJAX封装步骤
1.写出 AJAX 发送请求与接收响应的模板
const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsot XMLHTTP"); xhr.open('get', 'test.php'); xhr.send(); xhr.addEventListener('readystatechange', function () { if (this.readyState === 4) { console.log(this.responseText); } }
2.写一个空函数然后将这个模板放进去
function ajax () {
const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsot XMLHTTP");
xhr.open('get', 'test.php'); xhr.send(); xhr.addEventListener('readystatechange', function () { if (this.readyState === 4) { console.log(this.responseText); } }
}
3.最后根据变化量抽象参数,以及使用返回值
// params = null, 这是 ES6 中的语法,即默认参数,也就是:当这里没有参数传递进来的话,就默认为 null,有参数传递进来的话,就使用参数
function ajax (method, url, params = null, done) {
// 统一将方法转换为小写,因为调用,这样调用ajax()函数时 method 写大小写都可以 method = method.toLowerCase(); const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsot XMLHTTP"); // 将 object 类型的数据转换为 key1=value1&key2=value2 这种形式的字符串 if (typeof params === 'object') { let tempArr = []; for (let key in params) { let value = params[key];
// 将元素一个一个的放进这个空数组中 tempArr.push(key + '=' + value); } // console.log(tempArr); // join()方法:把数组中的所有元素放入一个字符串,并通过指定参数进行元素之间的分隔 params = tempArr.join('&'); // console.log(params); }
// 当使用 get 方法传递参数,应该通过 url 传递参数 if (method === 'get') { url += '?' + params; } xhr.open(method, url);
// 当使用 post 方法时,要设置响应头(当传递参数为 urlencoded 形式时)
// urlencoded 形式: key1=valule1&key2=value2 if (method === 'post') { xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); } xhr.send(params); xhr.addEventListener('readystatechange', function () { if (this.readyState !== 4) return; // 不应该在封装的函数中主观的处理响应结果 // console.log(this.responseText); // 无法在内部包含的函数中通过 return 的方式将返回值返回出去
// return this.responseText
// 这里使用了回调函数, // 执行调用者 done(this.responseText); }); }
回调函数
回调:将函数作为参数传递,就好比是将一件事情交给另一个人做(也可以理解为委托)
在这个例子中,ajax异步请求由于函数内部包含返回响应体的函数,所以无法直接返回响应体,
因而,将 返回响应体 这件事委托给了 ondone 这一函数来做。
// 调用者
let ondone = function (res) { console.log('回调开始'); console.log(res); console.log('回调结束'); }
// 测试 ajax('get', 'time.php', {}, ondone);
原文链接:https://www.cnblogs.com/duxiu-fang/p/10914175.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- Javascript Ajax异步读取RSS文档具体实现 2020-02-25
- jquery ajax检测用户名是否存在的方法 2020-02-14
- jQuery Ajax使用FormData对象上传文件的方法 2019-11-10
- 关于ajax异步请求的一个细节问题 2019-08-14
- vue学习【一】vue引用封装echarts并展示多个echarts图表 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash