原生javascript對ajax的封裝程式碼例項

本章節分享一段程式碼，它是對原生的ajax的封裝，因為在預設狀態下具有一定的相容性問題，所有良好的封裝還是非常有必要的，希望下面的程式碼能夠給需要的朋友帶來幫助，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function Ajax(url,data){
  this.url=url;
  this.data=data;
  this.browser=(function(){  
    if(navigator.userAgent.indexOf("MSIE")>0){  
      return "MSIE";//IE瀏覽器
    }
        else{
      return "other";//其他
    }
  })()
}
Ajax.prototype={
  get:function(){
    var result;
    var xmlhttp;
    if(this.browser=='MSIE'){
      try{
        xmlhttp=new ActiveXObject('microsoft.xmlhttp');
      }
          catch(e){
        xmlhttp=new ActiveXObject('msxml2.xmlhttp');
      }
    }
        else{
      xmlhttp=new XMLHttpRequest();
    };
    xmlhttp.onreadystatechange=function(){
      result = xmlhttp.responseText;//閉包，不能採用this.屬性
    };
    xmlhttp.open('GET',this.url+'?'+this.data,false);//true無法抓取資料，why?
    mlhttp.send(null);
    return result;
  },
  post:function(){
    var result;
    var xmlhttp;
    if(this.browser=='MSIE'){
      xmlhttp=new ActiveXObject('microsoft.xmlhttp');
    }
        else{
      xmlhttp=new XMLHttpRequest();
    };
    xmlhttp.onreadystatechange=function(){
      result = xmlhttp.responseText;//閉包，不能採用this.屬性
    };
    xmlhttp.open('POST',this.url,false);//需設為false,否則無法抓取responseText
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//POST中，這句必須
    xmlhttp.send(this.data);
    return result;
  }
};
 
 
window.onload=function(){
  document.getElementById("btn").onclick=function(){
    var p=document.getElementById("t").value;
    var a=new Ajax("phpOOP/getPage.php","page="+p);
    document.getElementById("box").innerHTML=a.get();
  }
}