AJAX封装
程序员文章站
2022-05-25 21:03:45
封装的一般套路 AJAX封装步骤 1.写出 AJAX 发送请求与接收响应的模板 2.写一个空函数然后将这个模板放进去 3.最后根据变化量抽象参数,以及使用返回值 回调函数 回调:将函数作为参数传递,就好比是将一件事情交给另一个人做(也可以理解为委托) 在这个例子中,ajax异步请求由于函数内部包含返 ......
封装的一般套路
- 使用全局代码写一个比较完整的用例
- 然后写一个空函数,没有形参,没有返回值,将这个完整地放到这个空函数中
- 最后根据使用过程中的需求(即需要变更的数据)抽象参数
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);