jQueryを使ってAjaxを実装するとIEでのみエラーが起きた
2006/10/12 by civic
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だと、「～」や「丸１」といった文字が返却できなかったので、UTF-8で返却することにしました。
2007/08/11追記
「feedtailor Inc. 大石裕一の開発ブログ」さんで指摘されているように、JSONを返却するにはMimeTypeをapplication/jsonにしたほうがよさそうです。
関連記事
- NetBeans6.1のJavaScriptサポートを検証
- jsconsoleでiPhoneからTwitter APIを実行してみた
- AjaxTagsプロジェクトの混乱
- JavaでAjaxを使う時の考察
- 楽ちんAjax JSPカスタムタグ「AjaxTags」
情報ありがとうございます。ハマってたのが解消しました。
IE7, jquery 1.2.3, apache 2.2.8 のセットでも全く同じ現象でした。
httpd.conf に
AddCharset WIndows-31J .html
とか
AddDefaultCharset Windows-31J
とか自ら書いたんですが、素人が余計なことするものじゃないってことですか・・・。
cp932 のつもりで書いたのがアダとなりました。
役に立ったようで幸いです。
同じ不具合に遭遇した人が、検索してたどり着いて、解決できたのであれば、記事を載せたかいがありますね。