"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?

Gree

What happens if you don't use the weird wrapper element? – Kraemer

If I don't use the weird wrapper, then the JSON data is loaded, but I do get the malformed warning. – Gree

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
});

Pyosis

Remarkably, it appears this is STILL needed in 2016 using $.getJSON(). – Twiddle

@A.L.Flanagan I am continuously surprised that this is still receiving upvotes. I'm happy for the points it brings, but I'm sad that it's not resolved in some other fashion through automatic detection of local file requests. – Pyosis

Thanks, that worked for me! I am using jQuery locally without a server and it fixed my issue. – Lu

@Lu Glad to help! It's 2017 and this is still relevant. XD – Pyosis

And it's apparently still relevant in 2018. Thanks. – Assyrian

@Assyrian Yikes. Glad to help! – Pyosis

Sept 2018, and just used it for $.ajax(). – Kelp

@Kelp Glad this helped you! – Pyosis

@Ryan, Thanks for this. I have the latest FF (75.0) and it is 2020, one decade after your answer and it is still relevant for $.ajax! I have ensured Mime type is supplied by the server side correctly which is not a problem in other browsers, but FF still has this warning. – Insight

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.

Kraemer