title: How to load local JSON files in Javascript
body: <p>I'm writing a web app (well, actually it will eventually be an OS X Dashboard widget, but I decided to prototype it first as a simple web page) that needs to load some initializing data from a local JSON file. My code looks like this:</p>
  
  <pre><code>function loadDatos() {   
      var xobj = new XMLHttpRequest();
      xobj.overrideMimeType("application/json");
      xobj.open('GET', 'datos.json', true);
      xobj.onReadyStateChange = function () {
          if (xobj.readyState == 4) {
              var jsonTexto = xobj.responseText;
              ProcessTheData(jsonTexto);
          }
      }
      xobj.send(null);
  }
  </code></pre>
  
  <p>The function get called from an onLoad() event in the HTML file's BODY tag. Now, from what I see when debugging, the function gets executed, but the onReadytStateChange event handler never gets called.</p>
  
  <p>What should I do? I thought it was a bit odd to use a XMLHttpRequest to access a local file, but the new tutorials I've seen that deal with this issue seem to say that it should work (the 99% of docs I've seen talk about how to load JSON from a remote server, not from a local file).</p>
  
  <p>I'm testing using Firefox 3.6.10, but I've also tried with Safari 4.</p>