通過XMLHttpRequest和jQuery兩種方式實現ajax

一、XMLHttpRequest實現獲取數據

不使用jQuery實現頁面不刷新獲取內容的方式，我們這里采用XMLHttpRequest原生代碼實現；js代碼如下：

//1.獲取a節點，並為其添加Oncilck響應函數
document.getElementsByTagName("a")[0].onclick = function(){

　　 //3、創建一個XMLHttpRequest();
    var request = new XMLHttpRequest(); //4、准備發送請求的數據url
    var url = this.href; var method = "GET"; //5、調用XMLHttpRequest對象的open方法
 request.open(method,url); //6、調用XMLHttpRequest對象的send方法
    request.send(null); //7、為XMLHttpRequest對象添加onreadystatechange 響應函數
    request.onreadystatechange = function(){ //8、判斷響應是否完成：XMLHttpRequest 對象的readystate的屬性值為4的時候
        if(request.readyState == 4){
 //9、在判斷響應是否可用：XMLHttpRequest 對象status 屬性值為200
            if(request.status == 200){
 //10、響應結果
 alert(request.responseText); } } } //2、取消a節點的額默認行為
           return false; } 

插入HTML代碼：

<a href = "hello.txt">點擊獲取文本內容</a>

 二、jQuery實現ajax獲取信息

這個例子是動態的從后台獲取數據來改變下拉按鈕的內容；

js代碼如下：

function bindCarteam0(){
         //通過URL請求數據
         var URL = <select:link page="/xiaoshouwl.do?method=getCarteamList"/>;
            $.ajax({
                url:URL,
                type:'GET',
                dataType: "json",
                success:function(html){
                    var str="<option value='-1'>全部</option>";
                    for(var i=0;i<html.length;i++){
                        str+="<option value='"+html[i].id+"'>"+html[i].name+"</option>";
                    }
                    $("#carteam_code").empty().html(str);
                }
            });
     }

HTML代碼如下：

<select:select property="carteam_code" styleId="carteam_code" style="width:150px">
                                         <select:option value="-1">全部</select:option>
                                </select:select>

其中type類型有get和post兩種；

post 可以傳輸的數據量比較大，get有字節限制；