Why doesn't jQuery.parseJSON() work on all servers?

Question

Hey there, I have an Arabic contact script that uses Ajax to retrieve a response from the server after filling the form.

On some apache servers, jQuery.parseJSON() throws an invalid json excepion for the same json it parses perfectly on other servers. This exception is thrown only on chrome and IE.

The json content gets encoded using php's json_encode() function. I tried sending the correct header with the json data and setting the unicode to utf-8, but that didn't help.

This is one of the json responses I try to parse (removed the second part of if because it's long):

{"pageTitle":"\u062e\u0637\u0623 \u0639\u0646\u062f \u0627\u0644\u0625\u0631\u0633\u0627\u0644 !"}

Note: This language of this data is Arabic, that's why it looks like this after being parsed with php's json_encode().

You can try to make a request in the examples given down and look at the full response data using firebug or webkit developer tools. The response passes jsonlint!

Finally, I have two urls using the same version of the script, try to browse them using chrome or IE to see the error in the broken example.

The working example : http://namodg.com/n/

The broken example: http://www.mt-is.co.cc/my/call-me/

Updated: To clarify more, I would like to note that I manged to fix this by using the old eval() to parse the content, I released another version with this fix, it was like this:

// Parse the JSON data
try
{
    // Use jquery's default parser
    data = $.parseJSON(data);
}
catch(e)
{
    /*
     * Fix a bug where strange unicode chars in the json data makes the jQuery
     * parseJSON() throw an error (only on some servers), by using the old eval() - slower though!
     */
    data = eval( "(" + data + ")" );
}

I still want to know if this is a bug in jquery's parseJSON() method, so that I can report it to them.

Answer 1

Found the problem! It was very hard to notice, but I saw something funny about that opening brace... there seemed to be a couple of little dots near it. I used this JavaScript bookmarklet to find out what it was:

javascript:window.location='http://www.google.com/search?q=u+'+('000'+prompt('String?').charCodeAt(prompt('Index?')).toString(16)).slice(-4)

I got the results page. Guess what the problem is! There is an invisible character, repeated twice actually, at the beginning of your output. The zero width non-breaking space is also called the Unicode byte order mark (BOM). It is the reason why jQuery is rejecting your otherwise valid JSON and why pasting the JSON into JSONLint mysteriously works (depending on how you do it).

One way to get this unwanted character into your output is to save your PHP files using Windows Notepad in UTF-8 mode! If this is what you are doing, get another text editor such as Notepad++. Resave all your PHP files without the BOM to fix your problem.

Step 1: Set up Notepad++ to encode files in UTF-8 without BOM by default.

Step 2: Open each existing PHP file, change the Encoding setting, and resave it.