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

Question

I\'m getting a \"not well-formed\" error in the error console of Firefox 3.0.7 when the JavaScript on my page loads a text file containing an object in JavaScript Object Not

Answer 1

Browser --- request expects a given content-type ---> Server
        <-- response contains content-type ----------

Firefox looks at the HTTP Content-Type header. If the server HTTP response header does not match the expectations of your browser code it will complain with this message.

IMHO this error message could have been a lot better, like "Expecting response Content-Type header ... but found ...".

Answer 2

Firstly, true JSON is much stricter than JavaScript, and to be valid JSON, you have to have your keys quoted.

 { "a": 3 } 

Also, as you are using a bare XMLHttpRequest, which generally expects to receive an XML result unless MIME headers specify strictly otherwise.

You may however wish to make your own life easier by simply using a JavaScript framework such as jQuery which will abstract away all this problem for you and deal with all the nasty edge cases.

$.getJSON("data.json",{}, function( data ){ 
  /*  # do stuff here  */ 
});

Additionally, if you use both strict JSON and use a library to abstract it for you, when browsers start having native JSON parsers the library will be able to transparently make use of these and get a significant speed improvement.

( This is slated to happen sooner than later, and when it happens, your users will get a silent upgrade with no effort required! ).

Answer 3

Have you tried using the MIME type for JSON?

application/json

You could also configure your server to send this MIME type automatically for .json files.

Answer 4

This also occurs when Content-Type is completely empty (thereby circumventing the natural type-detection).

Answer 5

Kent, I disagree.

The following IS "valid" JSON:

{ a: 3 }

JavaScript object property names do NOT have to be strings.

The problem is one of MIME type, not JSON/JavaScript syntax.

I just solved this very issue by adding json as "text/javascript" to my webserver mime types file:

text/javascript                 js, json

The "not well-formed" error disappeared. The browser (FireFox) assumed, incorrectly, that the .json file was XML.

Answer 6

I was also getting the same warning message with XMLHttpRequest() (in FireFox), when requesting resources marked as Content-Type: application/json by the server.

What did the trick for me was to explicitly set the XMLHttpRequest.responseType property to json on the request object. E.g,

var request = new XMLHttpRequest();
request.onreadystatechange = function() { ... }
...
request.open('GET','https://random-domain.com/random-path',true);
request.responseType = 'json';
...
request.send();