封装AJAX

封装前的一些分析

（1）封装的变量提取
1.请求的类型 get 或者 post
2.请求的地址 index.php 或者 login.php等等
3.前端提交的数据
4.请求成功之后做的事情

（2）需要根据type的不同需要处理的问题
1.在open的时候如果是get方式，url需要坠上data,在send的时候发送的null
2.如果是post的时候，url地址不需要坠上data，在send的时候需要传递data，而且需要设置请求头

第一版本

ajax('post',
'demo.php',
'username=feifei&age=18',
function(data) {
    alert('hello')
})

function ajax(type,url,data,fn) {
  //第一步
  // 创建对象
  var xhr = new XMLHttpRequest();

  //第二步
  if(type == 'get' || type == 'GET') {
    // 如果是get方式，需要将data和url组合起来
    url = url + '?' + data;
    // 如果是get请求，直接将data数据设置为null
    data = null;
  }

  xhr.open(type,url,true);

  if(type == 'post' || type == 'POST') {
    // 如果是post的 需要设置请求头
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
  }

  //第三步
  // 发送数据
  xhr.send(data);

  //第四步
  xhr.onreadystatechange = function () {
    if(xhr.readyState == 4 && xhr.status == 200) {
      var data = xhr.responseText;
      // 将一个匿名函数传递进来
            // 如果传递了fn参数，才去调用
      fn && fn(data);
    }
  }
}

第二版本

ajax({
    type : 'post',
    url : 'demo.php',
    data : 'username=feifei&age=18',
    beforeSend : function () {
        alert('开始啦');
    },
    success : function (data) {
        console.log(data);
    },
    error : function (error) {
        console.log('错误状态码是：' + error.status);
    },
    complete : function () {
        console.log('完成');
    }
})

function ajax(obj) {
  var xhr = new XMLHttpRequest();
  if(obj.type == 'get' || obj.type == 'GET') {
    obj.url = obj.url + '?' + obj.data;
    obj.data = null;
  }

  xhr.open(obj.type,obj.url,true);

  if(obj.type == 'post' || obj.type == 'POST') {
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
  }
  // 在AJAX发送之前调用
  obj.beforeSend && obj.beforeSend();
  // 发送数据
  xhr.send(obj.data);
  xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
  // 意味这ajax回到了客户端
      // 在根据状态码觉得是成功还是失败
      if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
        var data = xhr.responseText;
        // 将一个匿名函数传递进来
        // 如果传递了fn参数，才去调用
        obj.success && obj.success(data);
      } else {
        obj.error && obj.error(xhr);
      }
      // 不管是成功还是失败，都调用complete
      obj.complete && obj.complete();
    }
  }
}

第三版本

将data数据用对象的形式传递过去
ajax({
    type : 'post',
    data : {
        name : 'feifei',
        age : 18
    },
    url : 'demo.php',
    beforeSend : function () {
        alert('开始');
    },
    success : function (data) {
        console.log(data);
    },
    error : function (error) {
        console.log(error.status);
    },
    complete : function () {
        console.log('结束');
    }
})

function ajax(obj) {
  var xhr = new XMLHttpRequest();
  if(obj.type == 'get' || obj.type == 'GET') {
    obj.url = obj.url + '?' + params(obj.data);
    obj.data = null;
  } else {
    // 在post的时候，也需要将对象形式的data转换成字符串形式的data
    obj.data = params(obj.data);
  }
  xhr.open(obj.type,obj.url,true);
  if(obj.type == 'post' || obj.type == 'POST') {
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
  }
  obj.beforeSend && obj.beforeSend();
  xhr.send(obj.data);
  xhr.onreadystatechange = function () {
    if(xhr.readyState == 4) {
      if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
        var data = xhr.responseText;
        obj.success && obj.success(data);
      } else {
        obj.error && obj.error(xhr);
      }
      obj.complete && obj.complete();
    }
  }
}
// 这个函数的作用只有一个，将data对象转换成data字符串
// { username : 'feifei',age : 18 }
// 'username=feifei&age=18'
function params(data) {
  var str = '';
  for(var attr in data) {
    str += attr + '=' + data[attr] + '&';
  }
  return str.slice(0,-1);
}

第四版本

添加命名空间
$.ajax({
    type : 'post',
    data : {
        name : 'feifei',
        age : 18
    },
    url : 'demo.php',
    beforeSend : function () {
        console.log('我要开始发送请求了');
    },
    success : function (data) {
        console.log(data);
    },
    error : function (error) {
        console.log(error.status);
    },
    complete : function () {
        console.log('发送成功');
    }
})

var $ = {
  ajax : function (obj) {
    var xhr = new XMLHttpRequest();
    if(obj.type == 'get' || obj.type == 'GET') {
      obj.url = obj.url + '?' + $.params(obj.data);
      obj.data = null;
    } else {
      obj.data = $.params(obj.data);
    }
    xhr.open(obj.type,obj.url,true);
    if(obj.type == 'post' || obj.type == 'POST') {
      xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
    }
    obj.beforeSend && obj.beforeSend();
    xhr.send(obj.data);
    xhr.onreadystatechange = function () {
      if(xhr.readyState == 4) {
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
          var data = xhr.responseText;
          obj.success && obj.success(data);
        } else {
          obj.error && obj.error(xhr);
        }
        obj.complete && obj.complete(xhr);
      }
    }
  },
  params : function (data) {
    var str = '';
    for(var attr in data) {
      str += attr + '=' + data[attr] + '&';
    }
    return str.slice(0,-1);
  }
}