javascript實現原生ajax的幾種方法

標籤：

自從js有了各種架構之後，比如jquery，使用ajax已經變的相當簡單了。但有時候為了追求簡潔，可能項目中不需要載入jquery這種龐大的js外掛程式。但又要使用到ajax這種功能該如何辦呢？下面和大家分享幾種利用javascript實現原生ajax的方法。

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

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

（1）下面使用上面建立的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‘);}}}

（2）使用上面建立的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‘);}}}

（3）下面再分享一個從網上看到的類比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的幾種方法