knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

Ajaxの文字化け対策

UTF-8の外部ファイルを、Shift-JISのページに読み込むと想定します。

当然ながら文字コードが異なるので、文字化けします。

overrideMimeTypeを用いる

$.ajax({
    type: 'GET',
    url: 'hogehoge.xml',
    dataType: 'xml',
    success: function(data) {
        /* do something */
    }
});

サイトの仕様上、どうしても文字コードを変更できないときは、MIMEタイプを上書きすることで対応が可能です。

overrideMimeTypeというメソッドを用います。 そしてbeforeSendオプションを用いて、リクエスト送信前にMIMEタイプを上書きします。

beforeSend: function(xhr){
    xhr.overrideMimeType('text/html;charset=Shift_JIS');
}

引数として指定するのは、読み込むページの文字コードです。

後述するscriptCharsetオプションとは逆になるので注意してください。

$.ajax({
    beforeSend: function(xhr){
      xhr.overrideMimeType('text/html;charset=Shift_JIS');
    },
    type: 'GET',
    url: 'hogehoge.xml',
    dataType: 'xml',
    success: function(data) {
        /* do something */
    }
});

scriptCharsetを用いる

jsonpまたはjsで、かつGETに限定するなら、scriptCharsetオプションを用いれば容易に実装可能です。

scriptCharset: 'UTF-8'

こちらは読み込むファイルの文字コードを指定します。

$.ajax({
   type: 'GET',
   url: 'hogehoge.js',
   scriptCharset: 'UTF-8',
   dataType: 'script',
   success: function(data) {
        /* do something */
    }
});