jQueryを使ってAjaxを実装するとIEでのみエラーが起きた

JavaScriptって、数年前だったら大したチェックしかできないと思っていたのですが、最近は見方が変わっています。
特に、DOM操作なんかができると知ってからは、「こんなにいろいろなことができるんだ」と関心しています。(気づくの遅い)

そんなわけでJavaScript関係のライブラリも勉強中です。ライブラリは現状では乱立状態で、どれを使えばいいのか本当に迷ってしまいます。今は「jQuery」というのを使っています。この後は「Yahoo!UIライブラリ」というのを勉強しようと考えています。

JavaのJSP、jQueryと、Ajaxを使って、ためしにいろいろ作っているのですが、Ajax関係でちょっとハマったのでメモしておきます。

あるページから、jQueryのAjaxメソッドを使って、サーバーサイドのJSPを呼び出しています。
このJSPはAjaxで呼び出されることを前提としていて、HTMLを出力するのではなく、JSONオブジェクトを出力するようにしています。
つまり、JSPといってもこんな感じで動的にJavaScriptを出力しています。


{
  result: [<c:foreach ...>"${var}", </c:foreach>]
}

そしたら、Firefoxでは動作するのに、なぜかIEでは「System error」というエラーが出て通信が完了しないのです。
ちなみにエラーというのは、クライアントに返ってJavaScriptで発生します。jQueryの中で発生しています。

jQueryの方にデバッグ文を入れて、やっと原因が分かりました。
JSPでは、pageディレクティブのpageEncoding属性で、”Windows-31J”というシフトJIS相当のエンコーディングを指定しています。するとレスポンスヘッダに
Content-type: text/html; charset=Windows-31J
Content-type: application/json; charset=Windows-31J
といった出力がされます。このContent-Typeだと、IEでjQuery内のメソッドで、Ajax通信をした後に、System errorとなってしまうのです。

回避策としては、charset=Shift_JISとか、UTF-8となればOKでした。
Shift_JISだと、「~」や「丸1」といった文字が返却できなかったので、UTF-8で返却することにしました。

2007/08/11追記
feedtailor Inc. 大石裕一の開発ブログ」さんで指摘されているように、JSONを返却するにはMimeTypeをapplication/jsonにしたほうがよさそうです。


jQueryを使ってAjaxを実装するとIEでのみエラーが起きた」への2件のフィードバック

  1. 情報ありがとうございます。ハマってたのが解消しました。
    IE7, jquery 1.2.3, apache 2.2.8 のセットでも全く同じ現象でした。
    httpd.conf に
    AddCharset WIndows-31J .html
    とか
    AddDefaultCharset Windows-31J
    とか自ら書いたんですが、素人が余計なことするものじゃないってことですか・・・。
    cp932 のつもりで書いたのがアダとなりました。

  2. 役に立ったようで幸いです。
    同じ不具合に遭遇した人が、検索してたどり着いて、解決できたのであれば、記事を載せたかいがありますね。

コメントは停止中です。