【Ajax】レスポンスの文字化け対策

AjaxではデフォルトでUTF-8でデータが読み込まれるため、別の文字コードで書かれたファイルを読み込もうとすると文字化けしてしまいます。
その際は読み込むファイルの文字コードでMIMEタイプを上書きしてあげることで文字化けが解消します。

MIMEタイプ

MIMEタイプとは「タイプ名/サブタイプ名」の形式で記述され、WEBのデータ送受信においてデータの形式を指定するものです。

例)

  • 拡張子「.txt」のテキストファイル → 「text/plain」
  • 拡張子「.pdf」のPDFファイル → 「application/pdf」

サンプルコード

今回はShift-JISで書かれたhtmlのページを読み込む場合の想定で、MIMEタイプは「text/html」となります。
beforeSendオプションを用いて、overrideMimeTypeメソッドの引数でMIMEタイプに「text/html」、文字コードにShift-JISを指定します。
記述例は以下のようになります。

$.ajax({
	beforeSend: function(xhr){
		xhr.overrideMimeType("text/html;charset=Shift_JIS");
	},
	url:"./hogehoge.html",
	type: "GET",
	dateType:"html",
	success:fuction(date){
		// 処理
	}
});