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

Question

I ma learning XMLHttpRequest . JSON data is not loading. For some reason I am not getting the value of my json data. My code

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

My Json Data

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

What I am making wrong here.

Answer 1

You are missing an onreadystatechange event handler, which is how you actually get the data:

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();
}

If you need to work with that data outside of your function, you can use the callback pattern:

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);
});

Or Promises :

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);
});