在加载时访问ajax请求返回的数据
在加载时访问ajax请求返回的数据
提问于 2014-11-14 01:23:49
我在一个单页面站点上工作，其中来自单个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
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提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26914726
复制相关文章
相似问题
腾讯云开发者
