AJAX封装

2019-05-24 06:11:32来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

封装的一般套路

  1. 使用全局代码写一个比较完整的用例
  2. 然后写一个空函数,没有形参,没有返回值,将这个完整地放到这个空函数中
  3. 最后根据使用过程中的需求(即需要变更的数据)抽象参数

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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:TopJUI可编辑表格的列根据返回数据判断是使用 combobox 还是 num

下一篇:小窥React360——用React创建360全景VR体验