封装ajax

在之前的学习中，我们只是简单的些原生的ajax或者jqajax，没有考虑传参、默认值等问题

所以，今天来封装一个ajax：

　　

//将数据转换成 a=1&b=2格式放入一个小方法;
function json2url(json){
    //声明一个空的数组，来储存外面传进来的数据
   var arr = [];
   //加随机数[随机因子]防止缓存;
   json.t = Math.random();
   //循环传进来的son数据
   for(var name in json){
       //用等号将name和值连接起来，并传到之前声明的一个空数组       
      arr.push(name+'='+json[name]);
   }
  //因为每个数据之间使用&符链接，所以返回时用&将数组转换成字符串输出；
   return arr.join('&');
}

//这里开始正式封装ajax方法，传入的参数还是外界传进的json数据
function ajax(json){
   //1.首先创建一个ajax对象;用if判断来解决IE兼容问题；
   if(window.XMLHttpRequest){
      var oAjax = new XMLHttpRequest();
   }else{
      var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
   }

   //第二步:考虑默认值
   
   //判断json文件是否传进了URL地址，如果没有，给用户弹出提示框
   if(!json.url){
      alert('请输入合理的请求地址!');
      return;
   }
   //设置默认请求方式
   json.type = json.type || 'get';
   //设置默认超时时间
   json.time = json.time || 5000;
   //设置默认数据
   json.data = json.data || {};

   //第三步：判断用户传递的请求方式是get还是post请求:
   switch (json.type.toLowerCase()){
      case 'get':
         //2.打开请求；
         oAjax.open('get',json.url+'?'+json2url(json.data),true);
         //3.发送数据:
         oAjax.send();
         break;
      case 'post':
         //打开请求;
         oAjax.open('post',json.url,true);
         //设置请求头;
         oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
         //发送数据;
         oAjax.send(json2url(json.data));
   }
   //第四步：获取响应数据
   oAjax.onreadystatechange = function() {
         //判断http响应状态是否等于4
      if (oAjax.readyState == 4) {
         if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
            //如果外边传递了成功的回调函数，那么就执行,
            json.success && json.success(oAjax.responseText);
         } else {
            //如果外边传递了失败的回调函数，那么就执行,
            json.error && json.error(oAjax.status);
         }
         clearTimeout(timer);//规定时间内取到数据后清除定时器;
      }
   };
   var timer;
   timer = setTimeout(function(){//设置网络响应超时;
      alert('网络响应超时,请稍后再试');
      oAjax.onreadystatechange = null;//网络超时后清除事件;
   },json.time);
}

这样酒疯装好了一个ajax，在调用的时候，在使用的时候，首先要引入这个js文件，然后进行传参，调用！！！！

希望可以帮到你们哦！！