日々のデザイン現場で発生する問題・難題を解決します!
WEB制作トラブル速戦即決術! 第9回
[TROUBLE 46] |
IE 5やIE 6の環境でAjaxが うまく通信してくれない |
文=喜安亮介((有)タグパンダ)
A. | IE 5や6の場合はActiveXオブジェクトを使う |
「Ajax」はページ遷移なしにデータの非同期通信を行う技術の総称である。Ajax通信では、通常「XMLHttpRequest」(XHR)と呼ばれる各ブラウザに組み込まれたオブジェクト(API)を使って通信を行う。しかしInternet Explorer 5や6では、XMLHttpRequestではなくActiveXオブジェクトを利用しなければならない。jQueryやPrototypeといったライブラリを利用できる場合は特に気にする必要はないが、利用できない場合は処理をわけて対応しよう。
XMLHttpRequestは、Internet Explorer 7以降、Safari 1.2以上、Mozilla 1.0以上、Opera 8以上と、現在のブラウザではサポートされているが、それ以外の古いブラウザではサポートしていないものもある。Internet Explorer 5や6ではActiveXオブジェクトを使うが、Internet Explorer 7から正式にXMLHttpRequestサポートするようになった。
typeof演算子を使ってXMLHttpRequest変数の値が「undefined」の場合にのみ、ActiveXObjectを生成するようにする。また、Internet Explorer 5や6ではActiveXObjectの生成方法が異なるので、それを3項演算子を使って処理をわける
xmlData変数にXMLHttpRequestオブジェクトを代入し、open()メソッドやsend()メソッドを使ってAjax通信の処理をしていく。サンプルコードではGETを使ったHTTP通信の一例を表している
XMLHttpRequestはInternet Explorer 7以降、Safari 1.2以上、Mozilla 1.0以上、Opera 8以上と、現在のブラウザではサポートされているが、それ以外の古いブラウザではサポートしていないものもある。Internet Explorerはバージョン7から正式にサポートするようになった
[INDEX]
>>> [TROUBLE 44] IE 6でフロート方向のマージンが広がってしまう
>>> [TROUBLE 45] Safariとほかのブラウザで色味がまったく変わってしまった
>>> [TROUBLE 46] IE 5やIE 6の環境でAjaxがうまく通信してくれない
>>> [TROUBLE 47] classやidの名前を適当につけていたら混乱してしまった
>>> [TROUBLE 48] Webページの内容が表示されず真っ白になってしまう
>>> [TROUBLE 49] テーブルのセル幅が意図しない数値に変わってしまう
『web creators』の情報はこちら!>>>