IEでもできた! jQuery.ajaxでShift JIS(sjis)の外部HTMLを読み込む時の文字化け回避方法

jQuery.ajaxではいろいろなファイルが外部から読み込めて便利ですが、文字コードがUTF-8でないと、そのままで文字化けしてしまいます。
最近作るサイトはもうほとんどUTF-8が主流になってきていますので問題ないことが多いのでしょうが、どうしてもshift_jisを使う必要があって、この文字化けに遭遇。文字コードは変えられないので、なんとかしてshift_jisの文字化けを回避できない物かと調べたのですが、解決方法ありました。

結論から言うと、読み込むときのオプションに下記の3行を追加するだけです。

beforeSend: function(myData){
  myData .overrideMimeType("text/html;charset=Shift_JIS");
},

例えば全体ではこんな感じ。
「data.html」を読み込んで文字化けを回避するため文字コードの指定をShift_JISに変更、読み込みが成功したら#contにappendしています。

$.ajax({
  url:"data.html",
  beforeSend: function(myData){
    listData.overrideMimeType("text/html;charset=Shift_JIS");
  },
  success: function(myData){
    $("#cont").append(myData);
  },
  error:function (myData){
    alert("読み込み失敗");
  }
});

いや、簡単に解決できて良かった良かった。


--(2012/11/05追記)

と思ったらちょっと待て。IEでうまくいかないことが分かりました。。。
ダメジャン。
その後もう少し調べてみましたが、IE以外ならできるという結論になっているようです。
(T_T)

…なんか抜け道ないものか。


--(2012/11/05追記-2)

IEでもできましたっ!
ただし、JavaScriptではなく、サーバーサイドでの対策です。
プログラマにやってもらったんで、詳しい理屈は分かりませんが、私の理解で言うとこういうこと↓


jQueryのajax読み込みで、読み込むファイルの文字コードがUTF-8と認識されてしまうことが問題である。
従って、強制的にShift-JISであると認識させれば良い。
IE以外のブラウザでは、overrideMimeTypeを使うことでそれができるが、IEではoverrideMimeTypeが使えない。
代わりにサーバー側でファイルを送り出すときに、Shift-JISであることを明示する。


で、具体的な対策の手法ですが、.htdocsに次の一行を追加するということになります。

AddDefaultCharset Shift_JIS

これで読み込むファイルをajaxにもShift-JISとして認識してもらえます。
注意点としては、デフォルトの文字コードがShift-JISになりますので、HTMLの中で文字コードを明示していないファイルでShift-JISでないものは、文字化けしてしまいます。
.htdocsの置き場所によっては今までに作った他のページに悪影響を及ぼす可能性もあります。


そんなわけで、なんやかんやで長くかかってしまった、ajaxの問題、解決して良かった良かったと言うことで。
--

コメント