title: Send Ajax request to get json data from json file with pure javascript
body: <p>I want to send an AJAX request with pure JS without using a server or idling the security in the Chrome browser.</p>
  
  <p><strong>This is my code:</strong></p>
  
  <pre><code>if(document.getElementById("showJson")){
      document.getElementById("showJson").addEventListener("click", init);
  }
  
  function init(){
      loadJSON(function (response){
          var actual_JSON = JSON.parse(response);
      });
  }
  
  function loadJSON(callback) {   
      var xobj = new XMLHttpRequest();
          xobj.overrideMimeType("application/json");
      xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file
      xobj.onreadystatechange = function () {
            if (xobj.readyState == 4 &amp;&amp; xobj.status == "200") {
              // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
              callback(xobj.responseText);
            }
      };
      xobj.send(null);  
      console.log(xobj);
   }
  </code></pre>
  
  <p><strong>and this is the JSON file "students":</strong></p>
  
  <pre><code>[{
      "name" : "Mohamed Kamel",
      "age" : 24,
      "grade" : 100
  },{
      "name": "hamada",
      "age" : 20,
      "grade":90
  },{
      "name" : "ali",
      "age" : 23,
      "grade" : 80
  }]
  </code></pre>