jQueryなどのJavaScriptライブラリの登場でAjaxが手軽に使えるようになりました。

しかし、Ajaxを使ってサーバにあるテキストファイルや、他のHTMLファイルを読み込む場合、読み込む側も、読み込まれる側も文字コードをUTF-8にしてかないと文字化けが発生してしまいます。

たとえば、下記のように読み込まれる側も読み込む側の文字コードを同一にしていても、Ajaxで動的ロードすると文字化けが発生します。
読み込む側:index.html 文字コード:EUC-JP
読み込まれる側:test.txt 文字コード:EUC-JP

【index.htmlのコード(抜粋)】
$(function(){
 var test;
 var httpobj = $.get("/test.txt",function(){
  alert(httpobj.responseText);
 });
 alert(httpobj.responseText);
 $.ajax({
  url: "http://dev/test.txt",
  scriptCharset:"EUC-JP",
  dataType:"script",
  complete : function(){
   $("#result").append(
   "success:"+menu
   );
  }
 });
});

【test.txt の中身】
文字化けするかどうかのテスト


scriptCharset:"EUC-JP"と指定しても文字化けが発生してしまうので、全ファイルをEUC-JPやShift_JISからUTF-8へ文字コードを変換するか、
そもそもAjaxの使用をあきらめて別の方法をとる必要があると思っていました。

これを比較的簡単に解決する方法として、Apacheの文字コードを指定する、という手段があります。

例えばEUC-JPエンコードのtxtファイルをAjaxで読み込む場合、http.confに、
AddCharset EUC-JP .txt
と追記します。

すべてのテキストがEUC-JP扱いになるのが困る場合は、適当なディレクトリをEUC-JPテキスト保管専用にし、同ディレクトリに.htaccessを設置、その.htaccessに上記同様
AddCharset EUC-JP .txt
と追記します。

このようにしてからAjaxでロードすると、文字化けすることなく表示できるようになります。

テキストファイル以外、例えばJavaScriptファイル(js)をEUC-JPでロードする場合は、
AddCharset EUC-JP .js
のように、「.」の後を変更してやれば問題ありません。

また、
AddCharset EUC-JP .txt
AddCharset EUC-JP .js

のように記述すれば、複数拡張子を指定できます。