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);
    }
});