原生封裝Ajax與jQuery實現Ajax
原生封裝Ajax
對比使用JQuery直接封裝好的ajax方法,利用原生封裝AJax在使用的程式碼就要多得多,但是,原生封裝AJax並不難,在剛接觸到AJax時,相信很多人都不明白是什麼東西,下面我舉出兩個例子、分別用原生封裝Ajax實現demo與直接呼叫JQuery封裝好的AJax來實現demo,幫助大家跟進一步的理解。 首先,大家在寫原生AJax時,有下面四個步驟 1. 建立XMLHttpRequest物件,建立連線 var xmlhttp=new XMLHttpRequest(); 2. 向伺服器傳送請求,設定配置引數 xmlhttp.open("GET","test1.txt",true); xmlhttp.send(); 3. 註冊回撥函式,伺服器響應後執行一些基於響應的任務 xmlHttp.onreadystatechange = function () {}; 4. 伺服器響應
Demo1—原生封裝
1,封裝Ajax函式 function Ajax(Obj) { //1,建立XMLHttpRequest物件,建立連線 var xhr; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xhr = new XMLHttpRequest(); } else {// code for IE6, IE5 xhr = new ActiveXObject(“Microsoft.XMLHTTP”); } //2,開啟連線,配置引數 xhr.open(Obj.type, Obj.url, Obj.async); xhr.send(null); //3,註冊回撥函式,伺服器響應後執行一些基於響應的任務 xhr.onreadystatechange = function () { // readyState == 4說明請求已完成 if (xhr.readyState == 4 && xhr.status == 200) { // 4,伺服器響應,從伺服器獲得資料,處理返回資料 var data = JSON.parse(xhr.responseText); Obj.success(data)
}
}
}
接下來,以上簡單的封裝完成,就可以使用了 Ajax({ type: ‘get或者post方法’, async: “是否非同步”, url: ‘介面地址’, success: function (information) { //響應成功後執行你想要的操作 } });
Demo2–JQuery直接使用
.ajax