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

至于你的功能本身，如果你可以使用现代网络浏览器，我会使用promises稍微改变一下。与上面的代码一样，这不需要外部引用，但它确实需要一个现代浏览器：

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

JavaScript AJAX调用OnComplete函数

1 个答案: