JavaScript AJAX調用OnComplete函數

Question

我必須構建一個不使用JQuery的ajax站點（這很痛苦），因此我一直試圖以類似的方式構建ajax請求。

目前我有這個：

function $ajax(json) {
    var xmlhtml;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhtml = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhtml = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhtml.onreadystatechange = function () {
        if (xmlhtml.readyState == 4) {
            if (xmlhtml.status == 200) {
                alert(xmlhtml.responseText);
            }
            else if (xmlhtml.status == 400) {
                alert('There was an error 400');
            }
            else {
                alert('something else other than 200 was returned');
            }
        }
    };

    xmlhtml.open(json.type, json.url, true);
    xmlhtml.send();
};

我這樣稱呼它：

(function () {
    $ajax({
        type: "GET",
        url: "/api/stock"
    });
})();

很好，它返回我的記錄。 我需要做的是為完成（狀態== 200）和錯誤（狀態！= 200）創建回調函數。 我怎樣才能做到這一點？

請注意，我不能使用jQuery。

Answer 1

好吧，最簡單的方法是讓您的函數接受另一個參數，即函數：

function $ajax(json, callback) {
    var xmlhtml;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhtml = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhtml = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhtml.onreadystatechange = function () {
        if (xmlhtml.readyState == 4) {
            if (xmlhtml.status == 200) {
                callback(xmlhttp.responseText)
            }
            else if (xmlhtml.status == 400) {
                // don't ignore an error!
            }
            else {
                alert('something else other than 200 was returned');
            }
        }
    };

    xmlhtml.open(json.type, json.url, true);
    xmlhtml.send();
}

那會讓你做

$ajax({...}, function(response){
    // done here
})

至於您的功能本身，如果您可以使用現代的 Web瀏覽器，那么我將使用promise進行一些稍有不同的操作。 像上面的代碼一樣，這不需要外部引用，但是需要現代的瀏覽器：

function xhr(params){
   var xhr = new XMLHttpRequest()
   xhr.open(params.type || "GET", params.url);

   return new Promise(function(resolve, reject){ 
       xhr.onload = function(e){
          if(xhr.status === 200) return resolve(xhr.responseText);
          return reject(new Error("XHR response not 200 " + xhr.status);
       };
       xhr.onerror = reject;
       xhr.send(params.data)
   });
}