AjaxにおいてXMLHTTPRequestとIFRAMEのどちらを使うべきか？

JavaScriptによりサーバと非同期通信する際の手段にはXMLHTTPRequest(XHR)とIFRAMEがある。Ajaxと言えば普通はXHRだが、IFRAMEを使うことによってもサーバとの非同期通信が可能である。IFRAMEの場合、サーバと通信するタイミングでIFRAMEのsrcを変更し、IFRAMEを再読み込みする。そして、IFRAMEの読み込みが終了したら、親ページのコールバック関数に、IFRAMEのデータを渡すことで非同期通信が実現できる。たしか、初期のGoogle MapsはXHRでなくIFRAMEをAjaxに使っていたと思う。

XHRとIFRAMEのユーザビリティにおける最大の違いは、サーバとの通信処理のユーザへの見え方である。XHRの場合、ブラウザはサーバとの通信を画像の読み込みと同じように扱う。一方、IFRAMEの場合、ブラウザはサーバとの通信はリンクのクリックと同じように扱う。従って、IFRAMEの方が、サーバと通信していることが明確に伝わる。例えば、IE6はウィンドウ下部の緑色のインジケータで読み込み状態を示すし、Firefoxはロード中を示すアイコンを回転させる。

デモ： http://llamerada.sakura.ne.jp/xmlhttprequest-iframe/

以上より、ユーザビリティの観点からは、サーバとの通信をユーザに通知しない方が適切なアプリケーションではXHRを使い、通知する必要があるアプリケーションではIFRMEを使うのが適切なようである。多くのAjaxアプリケーションで、データを読み込み中であることを示すGIFアニメーションが使われているが、IFRAMEを使えば、わざわざ自前で通知しなくともブラウザが通知してくれる。

ただし、IFRAMEを使ったAjaxは、XHRに比べるとサーバサイドの実装が面倒なのとライブラリが未整備な為か、あまり見かけない気がする。このあたりが解決されれば、アプリケーションによってXHRとIFRAMEを使い分けることのなるのかもしれない。