js原生ajax封装(第一版)

说明: ajax代码封装不知道这是第几次亲手写了,但那个时候还在为IE7,IE8做恶心的兼容处理,现在前端快速发展,浏览器更新迭代也是很快,所以我个人觉得没有必要再去写那些恶心的代码,怎么简单怎么写,就是我想要的写代码方式,所以下面是我觉得比较满意的一次简单的封装了ajax请求方法(参数部分没有做太多的逻辑判断)。后续打算再完善

(function(win){
  var myajax = function(opts) {
          opts = opts || {};
           // 默认参数设置
           var settings = {
                 url: 'test.txt1',
                 type: 'GET',
                 async: true,
                 data: null
           };
              // 简单的对象属性扩展
         function extend(source, target) {
                  if (!source) return;
                  if (arguments.length === 1) return source;
                  for (var attr in target) {
                      source[attr] = target[attr];
                  }
                  return source;
              }
              extend(settings, opts);
              // 创建xhr对象(IE已死不做兼容性处理)
              var xhr = new XMLHttpRequest();
              // ajax请求成功后的回调方法
              var fnSucc = function(obj) {
                  console.log('obj.status:' + obj.status);
              };
              // ajax请求失败后的回调方法
              var fnError = function(obj) {
                  console.log('obj.status:' + obj.status);
              };
              // 注册事件监听
              xhr.onreadystatechange = function() {
                  if (xhr.readyState === 4) {
                      if (xhr.status === 200) {
                          fnSucc(xhr);
                      } else {
                          fnError(xhr);
                      }
                  }
              };
              // 建立请求连接
              xhr.open(settings.type, settings.url, settings.async);
              // 请求发送
              xhr.send(settings.data);
              return {
                  // 请求成功后的回调方法
                  done: function(f) {
                      fnSucc = f || fnSucc;
                  },
                  // 请求成功和请求失败执行的方法
                  then: function(f1, f2) {
                      fnSucc = f1 || fnSucc;
                      fnError = f2 || fnError;
                  }
              };
          };
          win.myajax = myajax;
      })(window);
      // 调用方式说明:

  1.当执行myajax方法时,如果只调用done方法那么执行的是成功后的回调,如果
      调用then方法时,当只传人一个方法时默认执行的也是成功的回调,如果传人两个参数
      则第一个参数是成功时的回调,第二个参数是失败时的回调*/
      /*myajax().done(function(obj){
          console.log('成功执行到我....');
          console.dir(obj);
      });*/
      myajax().then(function(obj){
          console.log('成功执行到我....');
          console.dir(obj);
      }, function(obj){
          console.log('进入到错误的方法...');
          console.dir(obj);
      });

posted @ 2017-06-26 10:26  大饼脸闹闹  阅读(127)  评论(0)    收藏  举报