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

2024-04-27 15:00:54

字體：大中小

來源：轉載

供稿：網友

一、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>