javascript - How do I load a JSON object from a file with ajax?

Question

I am using JSON to transfer data.

What do I need in my HTML page to read a file with Ajax that only includes one JSON object into my script?

Do I need jQuery too, or is it possible to load that JSON file with Ajax?

Is it different on different browsers?

Answer 1

You don't need any library, everything is available in vanilla javascript to fetch a json file and parse it :

function fetchJSONFile(path, callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                var data = JSON.parse(httpRequest.responseText);
                if (callback) callback(data);
            }
        }
    };
    httpRequest.open('GET', path);
    httpRequest.send(); 
}

// this requests the file and executes a callback with the parsed result once
//   it is available
fetchJSONFile('pathToFile.json', function(data){
    // do something with your data
    console.log(data);
});