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

Question

i ma学习 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);
});