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

Question

我正在尝试创建一个函数，该函数对另一台服务器进行 AJAX 调用并在回调中使用 return 数据。我希望能够多次调用不同的 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，。使用变种。像这样：

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 and/or the shorthand methods $.get() and $.post()

编辑由于两个请求都是异步的，因此引用完整性也可能存在问题。但我对此不太确定。

编辑 2 我所说的参照完整性是指在 js 环境中，而不是在数据库参照完整性方式中，也许 link 可能会产生误导。

Answer 3

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

我在 jquery 方面有一些经验，我正在尝试将我的知识推向纯粹的 javascript。肯定会研究严格模式。

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

How to create a reusable ajax function in Javascript

javascript

ajax

asynchronous