ajax({
    type:"post",//post或者get，非必須
    url:"test.jsp",//必須的
    data:"name=dipoo&info=good",//非必須
    dataType:"json",//text/xml/json，非必須
    success:function(data){//回撥函式，非必須
        alert(data.name);
    }
});

一、首先實現ajax之前必須要建立一個 XMLHttpRequest 物件的。如果不支援建立該物件的瀏覽器，則需要建立 ActiveXObject，具體方法如下：

var xmlHttp;
function createxmlHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest)
xmlHttp=new XMLHttpRequest();
}

二、下面使用上面建立的xmlHttp實現最簡單的ajax get請求：

function doGet(url){//注意在傳引數值的時候最好使用encodeURI處理一下，防止亂碼
    createxmlHttpRequest();
    xmlHttp.open("GET",url);
    xmlHttp.send(null);
    xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
        alert('success');
        }else{
        alert('fail');
        }
    }
}
 

三、使用上面建立的xmlHttp實現最簡單的ajax post請求：

function doPost(url,data){//注意在傳引數值的時候最好使用encodeURI處理一下，防止亂碼
    createxmlHttpRequest();
    xmlHttp.open("POST",url);
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlHttp.send(data);
    xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
        alert('success');
        }else{
        alert('fail');
        }
    }
}
 

四、下面再分享一個從網上看到的模擬jquery的$.ajax方法的封裝：

var createAjax=function(){
   var xhr=null;
   try{//IE系列瀏覽器
       xhr=new ActiveXObject("microsoft.xmlhttp");
   }catch(e1){
       try{//非IE瀏覽器
           xhr=new XMLHttpRequest();
       }catch(e2){
           window.alert("您的瀏覽器不支援ajax，請更換！");
       }
   }
   return xhr;
};
var ajax=function(conf){
   var type=conf.type;//type引數,可選
   var url=conf.url;//url引數，必填
   var data=conf.data;//data引數可選，只有在post請求時需要
   var dataType=conf.dataType;//datatype引數可選
   var success=conf.success;//回撥函式可選
   if(type==null){//type引數可選，預設為get
       type="get";
   }
   if(dataType==null){//dataType引數可選，預設為text
       dataType="text";
   }
   var xhr=createAjax();
   xhr.open(type,url,true);
   if(type=="GET"||type=="get"){
       xhr.send(null);
   }else if(type=="POST"||type=="post"){
       xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
       xhr.send(data);
   }
   xhr.onreadystatechange=function(){
       if(xhr.readyState==4&&xhr.status==200){
           if(dataType=="text"||dataType=="TEXT"){
               if(success!=null){//普通文字
                   success(xhr.responseText);
               }
           }else if(dataType=="xml"||dataType=="XML"){
               if(success!=null){//接收xml文件
                   success(xhr.responseXML);
               }
           }else if(dataType=="json"||dataType=="JSON"){
               if(success!=null){//將json字串轉換為js物件
                   success(eval("("+xhr.responseText+")"));
               }
           }
       }
   };
};

五、該方法使用也很簡單，和jquery的$.ajax方法一樣，不過沒那麼多的引數。僅僅是簡單的實現了一些基本的ajax功能。使用方法如下：

ajax({
    type:"post",//post或者get，非必須
    url:"test.jsp",//必須的
    data:"name=dipoo&info=good",//非必須
    dataType:"json",//text/xml/json，非必須
    success:function(data){//回撥函式，非必須
        alert(data.name);
    }
});

以上這幾種javascript實現原生ajax的方法你們學會了嗎？