javascript 封装ajax（多版本）

javascript 封装ajax（多版本）

版本一（推荐的写法)

ajax的过程

1.创建XMLHttpRequest对象，也就是创建一个异步调用对象。

2.创建一个新的Http请求，并制定该Http请求的方法，url以及验证信息。

3.设置响应http请求状态的变化。

4.发送http请求。

5.获取异步调用返回的数据。

6.利用javascript或者dom实现局部刷新操作。

 var AjaxUtil={
      //基础选项
      options:{
           method:"get",
           url:"",
           params:{},
           type:"text", // xml json
           callback:function() {
               
           }  
      },//创建xmlHTTPrequest对象；
      createRequest:function (){
      var xmlhttp;
      try{
             xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");  
      }catch(e){
          try{
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
          }catch(e){
           try{
               xmlhttp=new XMLHttpRequest();
               if(xmlhttp.overrideMimeType){
                  xmlhttp.overrideMimeType("text/xml");
               }
           }catch(e){
              alert('你额浏览器不支持Ajax');   
           }
          }
        }
       return xmlhttp;
     },//设置基础选项；
     setOptions:function(newOptions){
        for(var pro in newOptions){
          this.options[pro]=newOptions[pro];    
        }
     },//格式化参数
     formateParameters:function (){
         var paramsArray=[];
         var params=this.options.params;
         for(var pro in params){
             var paramValue=params[pro];
             if(this.options.method.toUpperCase()==="GET"){
                paramValue=encodeURIComponent(params[pro]); 
             }
             paramsArray.push(pro+'='+paramValue);
         }
         return paramsArray.join('&');
      },//状态改变的处理滴
      readystatechange:function (xmlhttp){
        var returnValue;
        if(xmlhttp.readyState==4 && (xmlhttp.status==200)){
          switch(this.options.type){
             case 'xml':
             returnValue=xmlhttp.responseXML;
             break;
             case 'json':
             var jsonText=xmlhttp.responseText;
             if(jsonText){
               returnValue = eval("(" + jsonText + ")");
             }
             break;
             default:
             returnValue=xmlhttp.responseText;
             break;
          }
       if(returnValue){
              this.options.callback.call(this,returnValue); 
        }else{
                this.options.callback.call(this);
             }
        }
      },//发送ajax请求
      request:function(options){
         var ajaxObj=this;
         //设置参数
         ajaxObj.setOptions.call(ajaxObj,options);
         //创建XMLHTTPRequest对象
         var xmlhttp=ajaxObj.createRequest.call(ajaxObj);
         //设置回调函数;
         xmlhttp.onreadystatechange=function (){
            ajaxObj.readystatechange.call(ajaxObj,xmlhttp); 
         }
         //格式化参数
         var formateParams=ajaxObj.formateParameters.call(ajaxObj);
         //请求方式
         var method=ajaxObj.options.method;
         var url=ajaxObj.options.url;
         
         if("GET"===method.toUpperCase()){
             if(formateParams){
               url+="?"+formateParams+"random="+Math.random();//使用get的方式容易出现缓存的干扰滴呀
             }else{  //这里应该考虑考虑到缓存的问题
              url+='?random='+Math.random();
             }
         }
         //建立连接;
         xmlhttp.open(method,url,true);
         
         if("GET"===method.toUpperCase()){
            xmlhttp.send(null); 
         }else if("POST"==method.toUpperCase()){
            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xmlhttp.send(formateParams);
         }
         
      }
   }
   
   function test(){
      AjaxUtil.request({
         method:'get',
         url:'data/json.txt',
         type:"json",
         callback:function (json){
             alert(json.name);
         }
          
      })
   }

版本二

  这个方法没有前面的封装的好，单也可以用来练练手滴呀

  

   function createXHR(){
     if(typeof XMLHttpRequest !="undefined"){  //非IE6浏览器
        return new XMLHttpRequest(); 
     }else if(typeof ActiveXObject !='undefined'){
        var version=[
              "MSXML2.XMLHttp.6.0",
              "MSXML2.XMLHttp.3.0",
              "MSXML2.XMLHttp"
        ];
        for(var i=0;i<version.length;i++){
           try{
             return new ActiveXObject(version[i]);   
           }catch(e){
             
           }
        }
     } else{
         throw new Error("你的系统部或浏览器不止XHR对象");
     }
   }
  
  //转义字符
  function params(data){
     var arr=[];
     for(var i in data){
        arr.push(encodeURIComponent(i)+"="+encodeURIComponent(data[i])); 
     }
     return arr.join("&");
  }
  //封装ajax
  function show_ajax(obj){
    var xhr=createXHR();
    obj.url=obj.url+"?random="+Math.random();//主要用来清楚缓存
    obj.data=params(obj.data);
    if(obj.method.toUpperCase()==="GET"){
      obj.url+=(obj.url.indexOf("?")==-1)?"?"+obj.data:"&"+obj.data;
    }
    //异步
    if(obj.async===true){
     xhr.onreadystatechange=function (){
        //执行完成
        if(xhr.readState==4){
          callBack();
        }
     }
    }
     xhr.open(obj.method,obj.url,obj.async);
    if(obj.method.toUpperCase()==="POST"){
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(obj.data);
    }else{
      xhr.send(null);    
    }
    if (obj.async==false){
        callBack();
    }
    function callBack(){
      //
      if(xhr.status==200){
          obj.success(xhr.responseText)
      }else{
         obj.Error("获取数据失败"+xhr.status);
      }
    }
  }
  function testInfo(){
      show_ajax({
        "method":"get",
        "url":"",
        "success":function (data){
        
        },
        "Error":function (data){
        
        },
        "async":false
      })
  }