在函数外部使用 Ajax 变量

我得到了下面的代码，我想在函数之外使用 ajax 响应，但它不断向我显示未定义，我知道这很容易，但如何处理它？

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>test</title>
<script>
 var sourceData;
 var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      sourceData = this.responseText;
     //
    }
  };
  xhttp.open("GET", "http://localhost:34560/test/js/source.json", true);
  xhttp.send();
  document.getElementById("test").innerHTML=sourceData;
</script>
</head>
<body>
 <div id="test"></div> 
</body>
</html>

更新：

我不想在函数中使用 ajax，因为您可以看到它在脚本标签内部。

你遇到了理解异步javascript的问题。基本上，当你调用xhttp.send()时，javascript 会发送请求，但代码不会暂停。下一行(你尝试使用sourceData的地方(被调用，服务器还没有响应你的请求send()，所以你的onreadystatechange函数还没有被调用，sourceData确实undefined。如果你想在服务器响应你的异步请求后做任何事情，你需要把它放在onreadystatechange函数中：

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("test").innerHTML=this.responseText;
    }
  };

您可以创建同步调用而不是异步调用。

var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
request.send(null);
if (request.status === 200) {
  console.log(request.responseText);
}

但请注意，这会阻止脚本并使你的网页无响应，直到服务器回复到达。您应该改为了解异步回调。

相关内容

最新更新

热门标签：