使用纯Javascript Ajax从本地获取json数据

Question

So I know this is so lame to ask this question as I have spent a day searching on this subject without any success. As many others, I'm facing the crossdomain problem. The suggestion I see everywhere is to update the JSON file on a server or use localhost which I can't use because my assignment is not allowed to do so.

I am posting this question hoping there is some other solution for this. I need to fetch data from a JSON file locally using pure JavasSript and Ajax which does not involve hosting on a server nor localhost (using absolute path is also a bad idea).

This is my code so far:

function loadJSON(callback) {
  var xobj = new XMLHttpRequest();
      xobj.overrideMimeType("application/json");
      xobj.open('GET', '/json/userinfo.json', true);
      xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
          callback(xobj.responseText);
        }
  };
  xobj.send(null);
}

(function() {
  loadJSON(function(response){
    var actual_JSON = JSON.parse(response);
    console.log(actual_JSON);
  })
})()

Answer 1

You won't be able to access local files using AJAX/XHR. Its not designed for this purpose. What you can do is assign your json data into a variable in the json file,

var data = [{

}];

and then load your json file using script tag like below:

<script type="text/javascript" src="file_name.json"></script>

Now all the json data can be accessed using the data variable.