如何在Javascript中创建可重用的ajax函数

Question

我正在尝试创建一个函数，该函数对另一个服务器进行AJAX调用，并在回调中使用返回数据。我希望能够多次调用不同的URL并在不同的函数中使用不同的响应。

目前它进行了2次调用，但只检索了一个数据集（战场）。我错过了什么？

如果我只打一个电话（到Treehouse），一切正常。

/*Tests to see if ajax is available then Creates an Ajax request. 
*Params: url - the api url
*        type - the type of request (get, post). Default is get
*        callback - function to process the ajax response
*/
function makeRequest(url, type, callback) {
type = typeof type !== 'undefined' ? type : 'GET';
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
  httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
  try {
    httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
  } 
  catch (e) {
    try {
      httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    catch (e) {}
  }
}

if (!httpRequest) {
  alert('Giving up :( Cannot create an XMLHTTP instance');
  return false;
}
httpRequest.onreadystatechange = function(){
  try {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        //Should just return the json
        var response = JSON.parse(httpRequest.responseText);
        // console.log(response);
        return callback(response);
      } else {
        alert('There was a problem with the request.');
      }
    }
  } catch(e) {
    alert('Caught Exception: ' + e.description);
  }
}
httpRequest.open(type, url);
//httpRequest.setRequestHeader('Content-Type', 'application/xml');
httpRequest.send();
}

以及我如何调用函数

makeRequest('//teamtreehouse.com/davidendersby.json', 'GET', function(treehouseData){
  console.log(treehouseData);
  sortedTreehousePoints = sortObject(treehouseData.points, 'DESC');
  getTotalPoints(treehouseData);
  getPoints();
  getTreehouseBadges(treehouseData);
});

//  //Not Working
 makeRequest('http://api.bf4stats.com/api/playerInfo?plat=xone&name=davetherave2010&output=json','POST', function(battlefieldData){
  console.log(battlefieldData);
});

Answer 1

看起来在全局命名空间中声明了httpRequest。使用var。像这样：

function makeRequest(url, type, callback) {
type = typeof type !== 'undefined' ? type : 'GET';
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
   httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    ...

Answer 2

除了Best Practices之外，我似乎没有发现任何问题 事实上你不止一次得到回应。 （第67行是console.log(battlefieldData);，第58行是console.log(treehouseData);）

我建议您检查您的XAMPP或WAMP或Apache或您正在使用的任何服务器，并尝试使用jQuery Ajax和/或速记方法$.get()和$.post()

修改 参考完整性也可能存在问题，因为两个请求都是ASYNC。但我对此不太确定。

编辑2 通过引用完整性我的意思是在js环境中，而不是数据库引用完整性方式，可能链接可能会产生误导。

Answer 3

感谢大家的帮助。这是一个范围问题，在函数内声明httpRequest变量可以解决问题。

我有一些jquery的经验，我试图用纯粹的javascript推动我的知识。肯定会看到严格的模式。