在函数外部使用Ajax变量[重复]

问题描述 投票:-2回答:2

这个问题在这里已有答案:

我得到了下面的代码,我想在功能方面使用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,因为你可以看到它在script标签内。

javascript ajax global-variables
2个回答
1
投票

您遇到了理解异步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;
    }
  };

0
投票

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

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);
}

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

© www.soinside.com 2019 - 2024. All rights reserved.