UTF-8 Encoding Going Wrong in Chrome Ajax Response

Question

I am seeing this problem. In Chrome/Safari, Ajax response that gets set as content containing some special characters (ie, spanish tilde 'i') are not interpreted correctly.

This problem is perfectly summarized with an example here:

I tried Firefox and IE and both works fine. Only Chrome is not displaying web page correctly. This is the URL: http://maixner.eu/#bio As you can see, some characters are wrong. This line: 2012 - Muzeum moderního umÄ›ní, Olomouc, Czech Republic Should be: 2012 - Muzeum moderního umění, Olomouc, Czech Republic

Dev details: 1) There is index.html page with javascript file, which loads data via AJAX (calls PHP file) 2) index.html file has content-type set to UTF-8 3) all files are UTF-8 encoded 4) javascript injects innerHTML using XMLHttpRequest class with responseText 5) php file has header('Content-type: text/html;charset=UTF-8"');

And here:

Have similar (or same) problem, but with spanish characters. I have set Apache to use UTF-8 I have set php header('Content-Type: text/html; charset=utf-8'); I have set html I have set html But Chorme (only Chrome, FF, IE, etc work ok) shows this:

[Post headers] ... Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 ... [Some random post value from the form] ------WebKitFormBoundary0wi0NAscQiUkF2hJ Content-Disposition: form-data; name="s_name" Oxígeno 100.4 FM Bogotá <-- characters are wrong! should read: Oxígeno 100.4 FM Bogotá

Original Post

Answer 1

I had the same problem.

Basically, in my case, it's because of the request header sent by the browser.

chrome sends: Content-Type:application/x-www-form-urlencoded, only.
firefox sends: Content-Type:application/x-www-form-urlencoded; charset=UTF-8

Without the charset=UTF-8, the server defaults to ISO, and decodes its wrongly.