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

至于你的功能本身，如果你可以使用现代的网页浏览器我会用承诺略微不同。像上面的代码，这不需要外部参考，但它确实需要一个现代浏览器：

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