[jQuery] ajax での通信時に Internet Explorer でエラー

お久しぶりのこんにちは。

jQuery の ajax を使ってサーバーと非同期通信をした際にエラーが発生してうまくデータを受け取れなかったので忘れないようにメモ。

ページに設置したフォームから条件設定しサーバー上のPHPへGETリクエスト投げて、結果をUTF-8のHTMLタグの羅列で受け取って表示しようとしていたときに、Chrome、Safari、FireFoxではうまく受け取れたが、どうも Internet Explorer (確認したバージョン: 6、7、8、9) ではエラーメッセージ 「Could not complete the operation due to error c00ce56e.」  が表示される。 データ自体は受け取れているが ajax の error 処理が実行されてしまう。

Google先生にお尋ねしたところ、どうも文字コード絡みが怪しいということが判明。
出力側のPHPスクリプトを見なおしてみた。
レスポンスヘッダーで charset 設定して返したいたのだが、どうもその文字コード設定が悪かったようです。

JavaScript

$.ajax({
    url: 'リクエスト送信先URL',
    type: 'GET',
    cache: false,
    data: query,
    dataType: 'html',
    scriptCharset: 'utf-8',
    error: function(XMLHttpRequest, textStatus, errorThrown){ 処理 },
    success: function (data, dataType) { 処理 },
    complete: function(XMLHttpRequest, textStatus){ 処理 }
});

変更前(PHP)

header(“Content-Type: text/html; charset=utf8”);

変更後(PHP)

header(“Content-Type: text/html; charset=utf-8”);

utf-8の-(ハイフン)がなかったことでなんじゃその文字コードはと言われていたようです。
他のブラウザではうまく受信できていたのに… Internet Explorer だけがダメみたい。

-(ハイフン)を追加して再度テストしたところ問題なく受信できるようになった。
今度からは charset の記述をする際は気をつけよう！