我有以下代码场景，我从服务器获取一些数据，并根据不同的会话条件显示数据，但它向我抛出一个 引用错误 ajProductDataFromServer 未在 showProduct 中定义 。

似乎 showProduct 没有对数据的引用，但我不知道差距在哪里，请帮助我！在 getAjax 中，我将 ajDataFromServer 传递给回调，在本例中为 getProductData 。那么 showProduct 是否也应该能够访问该数据？

// GLOBAL ARRAY for storing any DATA from the SERVER
var ajDataFromServer = [];

// Main ajax function using callback for getting data from the server
function getAjax(sUrl, callback) {
  var ajax = new XMLHttpRequest();
  ajax.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      ajDataFromServer = JSON.parse(this.responseText);
      callback(ajDataFromServer);
    }
  }

  ajax.open("GET", sUrl, true);
  ajax.send();

}

/************************************************************************/

// INITIALIZE / populate home page with products
document.addEventListener("load", function() {
  getAjax("api_get_products.php", getProductData);
});
getProductData();

/************************************************************************/
// GET ALL PRODUCTS and display them with diffrent features according role
function getProductData(ajProductDataFromServer) {

  if (sSessionRole === "admin") {
    //console.log( "PRODUCTS ARE EDITABLE" );
    showProductAdmin();

  } else if (sSessionRole === "user") {
    //console.log( "PRODUCTS ARE AVAILABLE FOR USER" );
    showProduct();

  } else {
    //console.log( "PRODUCTS AVAILABLE FOR PUBLIC" );
    showProduct();
  }
}

/************************************************************************/

// DISPLAY PRODUCTS for USER / PUBLIC dinamically using a loop and then INSERT into HTML
function showProduct() {
  lblProductList.innerHTML = "";

  for (var i = 0; i < ajProductDataFromServer.length; i++) {

    var lblProduct = '<div class ="lblProduct">' + '<a href="#' + ajProductDataFromServer[i].image + '">' + '<img src="' + ajProductDataFromServer[i].image + '" width="85%" class="lblProductImage" alt="product">' + '</a>' + '<a href="#_" class="lightbox" id="' + ajProductDataFromServer[i].image + '">' + '<img src="' + ajProductDataFromServer[i].image + '">' + '</a>' + '<h3 class ="lblProductName">' + ajProductDataFromServer[i].name + '</h3>' + '<h3 class ="lblProductPrice">' + 'Price:' + ' ' + ajProductDataFromServer[i].price + '<h3 class ="lblProductQuantity">' + 'Quantity:' + ' ' + ajProductDataFromServer[i].quantity + '</h3>' + '<button class="btnBuyProduct" data-productId="' + ajProductDataFromServer[i].id + '" >' + 'BUY PRODUCT' + '</button>' + '</div>';

    lblProductList.insertAdjacentHTML('beforeend', lblProduct);
  }

}