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