javascript - 来自 AJAX JSON 请求的全局 Javascript 变量

Question

您好，我正在将此代码用于我的 AJAX JSON 请求，但对于某些人来说，如果我尝试将 jsonObj 设为全局变量，并且 console.log() 它总是会出现在调试器控制台中未定义

为了澄清我的问题，如何从 AJAX JSON 请求中检索全局变量

function loadJSON() {
  var data_file = "https://www.tutorialspoint.com/json/data.json";
  var http_request = new XMLHttpRequest();
  try {
    // Opera 8.0+, Firefox, Chrome, Safari
    http_request = new XMLHttpRequest();
  } catch (e) {
    // Internet Explorer Browsers
    try {
      http_request = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e) {

      try {
        http_request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        // Something went wrong
        alert("Your browser broke!");
        return false;
      }

    }
  }

  http_request.onreadystatechange = function() {

    if (http_request.readyState == 4) {
      // Javascript function JSON.parse to parse JSON data
      var jsonObj = JSON.parse(http_request.responseText);

      // jsonObj variable now contains the data structure and can
      // be accessed as jsonObj.name and jsonObj.country.
      document.getElementById("Name").innerHTML = jsonObj.name;
      document.getElementById("Country").innerHTML = jsonObj.country;
    }
  }

  http_request.open("GET", data_file, true);
  http_request.send();
}

<h1>Cricketer Details</h1>

<table class="src">
  <tr>
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>
      <div id="Name">Sachin</div>
    </td>
    <td>
      <div id="Country">India</div>
    </td>
  </tr>
</table>

<div class="central">
  <button type="button" onclick="loadJSON()">Update Details </button>
</div>

Answer 1

解决此问题的最佳方法是使用所谓的回调函数。回调函数是在特定事件发生时调用的函数。在您的情况下，该事件是从您的 JSON 端点 (URL) 检索的数据。

执行此操作的正确方法是创建一个函数，该函数将在收到您的数据时调用，然后执行剩余的逻辑。如果您想让该数据也可以在全局范围内访问，回调函数的一部分可以更新您的全局变量。

在下面更新的代码中，我们首先声明一个全局变量 globalJSON 来保存我们的 data。在您收到任何数据之前(即在您单击按钮之前)，globalJSON.data 的值将为 null。接收到数据后，将使用接收到的数据调用回调函数 updateView()。在 updateView() 内部，我们更新全局变量 globalJSON.data 并执行剩余的逻辑(即更新所需的 HTML 元素)。

然后，您可以在代码中的任何其他位置使用 globalJSON.data 来获取单击 Update Details 按钮时收到的数据。

// declare your global variable that will get updated once we receive data

var globalJSON = {
    data: null
}

// this gets executed the moment you load the page - notice the value is null

console.log(globalJSON.data);

// this gets executed AFTER you receive data - notice call to updateView() inside AJAX call function

function updateView(data) {
    // this will update the value of our global variable
    
    globalJSON.data = data;
    
    // this is the rest of the logic that you want executed with the received data
    
    document.getElementById("Name").innerHTML = data.name;
    document.getElementById("Country").innerHTML = data.country;
    
    // this will show that the global variable was in fact updated
    
    console.log(globalJSON.data);
}

function loadJSON() {
    var data_file = "https://www.tutorialspoint.com/json/data.json";
    var http_request = new XMLHttpRequest();
    try {
        // Opera 8.0+, Firefox, Chrome, Safari
        http_request = new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer Browsers
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    http_request.onreadystatechange = function() {
        if (http_request.readyState == 4) {
            // Javascript function JSON.parse to parse JSON data
            var jsonObj = JSON.parse(http_request.responseText);
            updateView(jsonObj);
            // jsonObj variable now contains the data structure and can
            // be accessed as jsonObj.name and jsonObj.country.
        }
    }
    http_request.open("GET", data_file, true);
    http_request.send();
}

 <h1>Cricketer Details</h1>
		
      <table class = "src">
         <tr><th>Name</th><th>Country</th></tr>
         <tr><td><div id = "Name">Sachin</div></td>
         <td><div id = "Country">India</div></td></tr>
      </table>

      <div class = "central">
         <button type = "button" onclick = "loadJSON()">Update Details </button>
      </div>