在加载时访问ajax请求返回的数据
我在一个单页面站点上工作，其中来自单个json文件的数据在不同的部分中呈现不同-加载时不显示任何内容，但仅在单击事件时显示。我学到了一些关于如何连接回调的知识，但当我几乎完成它的时候，我意识到这个概念是多么有缺陷，所以现在我又回到了绘图板上。
我现在的想法是让ajax调用onload，将json结果设置为可用于多个函数的变量。我想应该是这样的：
window.onload = function() {
var myJsonData = function() {
var request = new XMLHttpRequest();
request.open("GET", "/json/someJsonData.json", true);
request.setRequestHeader("content-type", "application/json");
request.send(null);
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 200) {
var myJsonString = JSON.parse(request.responseText);
var myJsonArray = myJsonString["Projects"];
return myJsonArray;
}
}
} // onreadystatechange
} // var myJsonData
myJsonData(); // *
console.log("myJsonArray: " + myJsonArray); // undefined或者：
window.onload = function() {
myJsonData();
}
function myJsonData() {
var request = new XMLHttpRequest();
request.open("GET", "/json/someJsonData.json", true);
request.setRequestHeader("content-type", "application/json");
request.send(null);
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 200) {
var myJsonString = JSON.parse(request.responseText);
var myJsonArray = myJsonString["Projects"];
alert("you are here (myJsonArray defined)");
alert("myJsonArray: " + myJsonArray);
console.log("myJsonArray: " + myJsonArray);
return myJsonArray;
}
}
} // onreadystatechange
} // var myJsonData
console.log("myJsonArray: " + myJsonArray); // undefined或者：
window.onload = myJsonData;
// etc.当然，无论哪种方式，myJsonArray都是未定义的。关于如何做到这一点，我显然遗漏了一些基本的东西(或者这到底是不是一个坏主意？)在加载时调用ajax请求时，有没有什么方法可以将结果作为回调传递？
有人能告诉我如何从这里开始吗，也许是一个简单的例子？(附注：仍然专注于原生js，而不是jQuery)
在此之前，非常感谢，
svs
回答 3
Stack Overflow用户
发布于 2014-11-14 01:55:41
代码中有一些错误。首先，对于函数myJsonData()来说，myJsonArray是本地的。你必须在全球范围内定义它。其次，ajax请求是异步的。在使用它之前，您必须等待结果。以下是基于您的代码的工作示例：
var myJsonArray; //Globally defined
window.onload = function() {
var outputData = function() {
console.log(myJsonArray);
}
var myJsonData = function() {
var request = new XMLHttpRequest();
request.open("GET", "someJsonData.json", true);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 200) {
myJsonArray = JSON.parse(request.responseText);
outputData(); //Ouput when result is received
}
}
} // onreadystatechange
} // var myJsonData
myJsonData(); // *
}Stack Overflow用户
发布于 2014-11-14 02:04:17
使用Javascript promises可以在这里解决您的问题。Promises are native to ES6，尽管很明显browser support还没有完全实现。无论如何，以下是如何使用promises实现代码：
window.onload = function () {
myJsonData().then(function (result) {
console.log("myJsonArray: " + result);
alert(result.one);
// do something else here
});
}
function myJsonData() {
return new Promise(function (resolve, reject) {
var request = new XMLHttpRequest();
request.open("GET", "http://echo.jsontest.com/key/value/one/two", true);
request.setRequestHeader("content-type", "application/json");
request.send(null);
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 200) {
var myJsonString = JSON.parse(request.responseText);
//var myJsonArray = myJsonString["Projects"];
resolve(myJsonString);
}
}
} // onreadystatechange
});
} // var myJsonDataHere is a jsfiddle
Stack Overflow用户
发布于 2019-10-14 22:59:44
根据我的经验和理解。
在处理同步函数和异步函数时，了解哪些函数需要来自异步回调函数的数据总是很重要的。
如果函数完全依赖于接收到的数据，那么在循环中调用这些函数将是一个很好的编码实践
if (request.readyState === 4) {
if (request.status === 200) {
var myJsonString = JSON.parse(request.responseText);
// call the function which depend on the data received here.
}
}我不建议将async设置为false，因为它有时只会导致页面冻结。
https://stackoverflow.com/questions/26914726
复制相似问题
腾讯云开发者
