JSON, Ajax, and UTF8

ref from http://particletree.com/notebook/json-ajax-and-utf8/

By Ryan Campbell · July 6th, 2006

How do you go about sending any type of character

to the server via JSON? The solution turns out to be quite simple, but arriving at the solution involved many attempts in the wrong direction. To save you some time, here is what I have found.

First, we have to setup JSON. On the JavaScript side, the JSON script needs to be included. This script allows us to call the function JSON.stringify(), which converts a JSON object to a string, so that it can be sent through a URL. For the server, I use JSON-PHP. Including this file gives us access to the function $json->decode(), which converts the string sent from JavaScript back into an object.

Now that our files are in place, let’s send some data. The example below uses prototype.js to send some data to the server, and foreign characters are NOT preserved.

var myAjax = new Ajax.Request(
    '/save.php', 
    {
        method: 'post', 
        parameters: 'data='+JSON.stringify(data), 
        onComplete: finished
    });

All is well, except that we do want to preserve all characters. This is where the handy function, encodeURIComponent() comes in. If you are like me, you first tried escape() when sending data to the server. This function works the same, except encodes everything. So, now our Ajax request will look like this.

var myAjax = new Ajax.Request(
    '/save.php', 
    {
        method: 'post', 
        parameters: 'data='+encodeURIComponent(JSON.stringify(data)), 
        onComplete: finished
    });

And on the server, JSON-PHP can handle this.

$json = new Services_JSON();
$data = $json->decode($_POST['data']);

If you are using a PHP class other than JSON-PHP that may not support UTF8 decoding, then utf8RawUrlDecode may come in handy.

I’ve tried about every keyboard combination I can imagine to break this (in both English and Chinese), and I have only managed to find one:

\"

Since the characters are escaped, this sequence will appear as \\\" in the JSON object, but when calling JSON.parse() with that sequence, it breaks. A \ or a ” will work in any other combination except the one listed. In fact, even the combination reversed, “, works just fine. As an unimpressive fix, I have just forced a space between the two characters whenever a user enters them, so that the string becomes:

\ "

If anyone knows of a graceful or appropriate way of handling this, please share. Other than that, we’re good to go with JSON and Ajax, and the foriegn users will be full of glee that we’re thinking about them.

JSON, Ajax, and UTF8 by Ryan Campbell

This entry was posted 5 months ago and was filed under Notebook.
You can follow comments on this entry by subscribing to the RSS feed.

« Previous

Next »