JavaScript:使用原生JS封裝一個ajax相容性方法
阿新 • • 發佈:2018-12-15
ajax請求過程:
- 需要有個裝置的支援,就是瀏覽器,沒瀏覽器ajax是發不出去的。
- 需要有一個ajax物件。
- 規定請求的方式,獲取誰家的資料。
ajax.open(method,url,true)初始化請求方式、請求資料地址、選擇非同步(true)還是同步(false)方式。 - ajaxSend()方法,將請求傳送到伺服器,為了拿資料。
語法: $(document).ajaxSend(function(event,xhr,options))
event: 包含 event物件
xhr: 包含 XMLHttpRequest 物件
options: 包含 AJAX 請求中使用的選項 - 監聽資料的狀態,是否已經回到瀏覽器。 可用onreadystatechange()方法,監聽readystate的變化,從0開始往4變化,0是最開始的數值,4代表資料響應成功,已獲取回來,可以使用。
- 拿到資料後進行判斷,看是不是想要的資料,或是錯誤的資訊, 因為任何一個請求都會對應一個響應,即使是錯誤的響應。
狀態碼:
200 成功處理了請求,一般情況下都是返回此狀態碼;
403 伺服器拒絕請求。
404 為伺服器無法正常提供資訊,或是伺服器無法迴應,且不知道原因所返回的頁面。
503 (服務不可用)狀態碼:
按照上面所述的ajax的六個請求步驟來進行方法編寫,IE沒有XMLHttpRequest方法,所以要做相容。
function ajaxFunc(method,url,data,callback,flag) {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//相容IE瀏覽器
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//防止請求方式輸入小寫
method = method.toUpperCase ();
if (method == "GET") {
//初始化
xhr.open(method, url + "?" + data, flag);
//傳送請求
xhr.send();
} else if (method == "POST") {
xhr.open(method, url, flag);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
//判斷資料是否回來,請求是否成功
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status == 200) {
var backData = xhr.responseText;
callback(backData);
}
}
}
}