我试图从html中的json获取数据。 我不想使用Ajax，因为

Question

我正在学习XMLHttpRequest 。 JSON数据未加载。 由于某种原因，我没有得到json数据的值。 我的密码

function foo() {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "data.json",true);
    httpRequest.send();
    var abc =  httpRequest.responseText;
}

我的Json资料

[
    {
        ID : 0,
        VALUE : "United State"
    },{
        ID : 1,
        VALUE : "United Kingdom"
    },{
        ID : 2,
        VALUE : "Afghanistan"
    },{
        ID : 3,
        VALUE : "Aland Islands"
    },{
        ID : 4,
        VALUE : "Albania"
    }
]

我在这里做错了。

Answer 1

您缺少一个onreadystatechange事件处理程序，它实际上是如何获取数据的方式：

function foo() {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "data.json",true);
    httpRequest.onreadystatechange = function () {
        if(httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
            console.log(httpRequest.responseText);
        }
    };
    httpRequest.send();
}

如果您需要在函数之外使用该数据，则可以使用回调模式：

function foo(callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "data.json",true);
    httpRequest.onreadystatechange = function () {
        if(httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
            // trigger your callback function
            callback(httpRequest.responseText);
        }
    };
    httpRequest.send();
}

foo(function(data) {
  console.log(data);
});

或承诺 ：

function foo(callback) {
  return new Promise(function(resolve, reject) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "data.json",true);
    httpRequest.onreadystatechange = function () {
        if(httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
            // trigger your callback function
            resolve(httpRequest.responseText);
        }
    };
    httpRequest.send();
  });
}

foo().then(function(data) {
    console.log(data);
});