“not well-formed” warning when loading client-side JSON in Firefox via jQuery.ajax

Question

I am using jQuery's ajax method to acquire a static JSON file. The data is loaded from the local file system, hence there is no server, so I can't change the MIME type.

This works fine in Safari, but Firefox (3.6.3) reports the file to be "not well-formed". I am aware of, and have reviewed, a similar post here on Stack Overflow:

"not well-formed" error in Firefox when loading JSON file with XMLHttpRequest

I believe my JSON is well-formed:

{
    "_": ["appl", "goog", "yhoo", "vz", "t"]
}

My ajax call is straightforward:

$.ajax({
    url: 'data/tickers.json', 
    dataType: 'json',
    async: true,
    data: null,
    success: function(data, textStatus, request) {
        callback(data);
    }
});

If I wrap the JSON with a document tag:

<document>JSON data</document>

as was mentioned in the other Stack Overflow question referenced above, the ajax call fails with a parse error.

So: is there a way to avoid the Firefox warning when reading in client-side JSON files?

Answer 1

Sometimes using an HTTP server is not an option, which may mean that MIME types won't be automatically provided for some files. Adapted from Peter Hoffman's answer for jQuery .getJSON Firefox 3 Syntax Error Undefined, use this code before you make any $.getJSON() calls:

$.ajaxSetup({beforeSend: function(xhr){
  if (xhr.overrideMimeType)
  {
    xhr.overrideMimeType("application/json");
  }
}
});

Or, if you're using $.ajax():

$.ajax({
  url: url,
  beforeSend: function(xhr){
    if (xhr.overrideMimeType)
    {
      xhr.overrideMimeType("application/json");
    }
  },
  dataType: 'json',
  data: data,
  success: callback
});

Answer 2

Local files and scripting don't mix. Way too much browser security stuff and other weirdness involved. If you want to test things, you should run your stuff through a HTTP server. Installing one locally might be a good idea.