这个问题在这里已有答案:
我得到了下面的代码,我想在功能方面使用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的问题。基本上,当你调用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);
}
但请注意,这会阻止脚本并使您的网页无响应,直到服务器回复到达为止。您应该了解异步回调。