ajax原生js封装

ajax用jquery使用确实方便，但如果只用ajax，难道我们还会为了使用而引入jquery吗？不仅如此，用原生js实现ajax，对理解其调用过程也有帮助。下面就简单封装一个ajax.

/* 封装ajax函数
 * @param {string} obj.method http连接的方式，包括POST和GET两种方式
 * @param {string} obj.url 发送请求的url
 * @param {boolean} obj.async 是否为异步请求，true为异步，false为同步的
 * @param {object} obj.data 发送的参数，格式为对象类型
 * @param {function} obj.success ajax发送并接收成功调用的回调函数
 */

function ajax(obj) {
  //初始化
  obj = obj || {};
  obj.method = obj.method.toUpperCase() || 'POST';
  obj.url = obj.url || '';
  obj.async = obj.async || true;
  obj.data = obj.data || null;
  obj.success = obj.success || function(){};

  //创建一个异步调用对象
  var xmlHttp = null;
  if(XMLHttpRequest) {
      xmlHttp = new XMLHttpRequest();
  }else{
      xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
  }

  //参数处理
  var params = [];
  for(var key in obj.data) {
      params.push(key + '=' + obj.data[key]);
  }
  var postData = params.join('&');

  //发送http请求
  if(obj.method.toUpperCase() ==='POST') {
      xmlHttp.open(obj.method, obj.url, obj.async);
      xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset= utf-8')
      xmlHttp.send(postData);
  }else if(obj.method.toUpperCase() === 'GET') {
      xmlHttp.open(obj.method, obj.url + '?' + postData, obj.async);
      xmlHttp.send(null);
  }

  //响应http状态变化函数，成功后回调
  xmlHttp.onreadystatechange = function() {
      if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
          obj.success(xmlHttp.responseText);
      }
  }
}