分享個自己的ajax封裝

      工作了也兩年了，因為認真研讀過  professional javascript for web developers 一書的翻譯版，一直自以為自己js水平可以，因此工作中對於很多的js架構很不感冒，儘管也研究過這些架構，也認為確實很強大。自己工作中的遇到的就弄個自己的簡單的實現，這個ajax的封裝也主要代碼是來自 professional javascript for web developers ，只是做了一些處理，對於應付自己工作的需求已是足夠了。

 

       首先，先展示一下怎樣調用

//定義回呼函數 function handleresponse(XMLHTTP) {  if (XMLHTTP.readyState == 4) {     var response = XMLHTTP.responseText;        //  這裡寫自己的處理常式     }   } }  function checktext(obj)  {      var url = "../Ashx/test.ashx";     customAjax("get",url,["title"],[obj.value],handleresponse);  }

       說明一下，customAjax就是封裝的對外提供的調用方法，第一參數是提交資料的方式，get或者post；第二個是提交的地址；第三個和第四個是數組，是要提交資料，第一個數組裝鍵，後一個裝值，必須相對應；最後一個就是回呼函數了，自己定義。

       調用還不算太麻煩，可能看來不太物件導向而已，不太習慣。

      下面上代碼：

//  建立xmlhttp對象function CreateXMLHTTP(){   var XMLHTTP;   if(window.ActiveXObject)   {       var arrSignature = ["MSXML2.XMLHTTP.6.0",“MSXML2.XMLHTTP.5.0",”MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsot.XMLHTTP"];       for(var i=0;i<arrSignature.length;i++)         {             try             {             XMLHTTP = new ActiveXObject(arrSignature[i]);             return XMLHTTP;             }             catch(oException)             {             }        }       throw new Error("MSXML is not installed on your IE.");   }   else if(window.XMLHttpRequest)   {        XMLHTTP = new XMLHttpRequest();        return XMLHTTP;   }} function addGETParam(sUrl,sParamName,sParamValue){   sUrl += ( sUrl.indexOf("?") == -1 ? "?" : "&");   sUrl += escape(sParamName) + "=" + escape(sParamValue);   return sUrl;}function addPOSTParam(sParams,sParamName,sParamValue){   sParams += ( sParams.length > 0 ? "&" : "" );   sParams += escape(sParamName) + "=" + escape(sParamValue);   return sParams;}//  主要的方法function customAjax(sType,sUrl,arrParamName,arrParamValue,funStateChange){    var XMLHTTP = CreateXMLHTTP();       var sParams = "";    if( arrParamName instanceof Array && arrParamValue instanceof Array)    {       if(arrParamName.length == arrParamValue.length)       {            if(sType.toLowerCase() == "get")            {               sParams = null;              for(var i=0;i<arrParamName.length;i++)                 sUrl = addGETParam(sUrl,arrParamName[i],arrParamValue[i]);            }            else if(sType.toLowerCase() == "post")            {                for(var i=0;i<arrParamName.length;i++)                     sParams = addPOSTParam(sParams,arrParamName[i],arrParamValue[i]);            }         }          else       {          throw new Error("Two parma Array's length is not same.");       }    }    else    {       throw new Error("The third and fourth param must be Array.");    }    XMLHTTP.open(sType.toUpperCase(),sUrl,true);    if(funStateChange instanceof Function)   {        XMLHTTP.onreadystatechange =  function(){funStateChange(XMLHTTP);}  }    else    { throw new Error("the last param must be Function."); }    XMLHTTP.send(sParams);            }

     就是這麼多，還不少，有一點要說是

["MSXML2.XMLHTTP.6.0",“MSXML2.XMLHTTP.5.0",”MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsot.XMLHTTP"]

     在支援ie標準的瀏覽器上，有的電腦有可能會彈出讓你載入MSXML2.XMLHTTP.6.0的提示，因為你的瀏覽器可能沒有載入這個控制項；如果你對自己的網站在使用者電腦上這個提示不能容忍，那就把這個版本的檢測從這個數組中刪除，一般情況下，刪除到4.0時，IE瀏覽器就不會有載入的提示了。如果你還不放心，仍可以繼續刪除到只剩下Microsot.XMLHTTP，其中jquery-1.3.2就是這樣，以下是這個版本的jquery代碼：

xhr:function(){return window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();},

當然你如果嫌上面的建立過程太煩瑣，也可以採用jquery這種方式。