1. 程式人生 > >JavaScript:使用原生JS封裝一個ajax相容性方法

JavaScript:使用原生JS封裝一個ajax相容性方法

ajax請求過程:

  1. 需要有個裝置的支援,就是瀏覽器,沒瀏覽器ajax是發不出去的。
  2. 需要有一個ajax物件。
  3. 規定請求的方式,獲取誰家的資料。
    ajax.open(method,url,true)初始化請求方式、請求資料地址、選擇非同步(true)還是同步(false)方式。
  4. ajaxSend()方法,將請求傳送到伺服器,為了拿資料。
    語法: $(document).ajaxSend(function(event,xhr,options))
    event: 包含 event物件
    xhr: 包含 XMLHttpRequest 物件
    options: 包含 AJAX 請求中使用的選項
  5. 監聽資料的狀態,是否已經回到瀏覽器。 可用onreadystatechange()方法,監聽readystate的變化,從0開始往4變化,0是最開始的數值,4代表資料響應成功,已獲取回來,可以使用。
  6. 拿到資料後進行判斷,看是不是想要的資料,或是錯誤的資訊, 因為任何一個請求都會對應一個響應,即使是錯誤的響應。

狀態碼:

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