[Ajax] IEでiframeを使った非同期通信をする際には、XMLを使ってはいけない

こんにちは。
仕事があれこれあって、頭の切りかえが出来ないお爺さんです。午前中も上司に尋ねられた時に「ああ、その件はしばらく忘れていていいハズなので、覚えてないです」と答えてしまいました。当然、怒られましたが。
それはともかく、iframeでの非同期通信時の注意です。XMLは使ってはなりません。

Ajaxというと、Asynchronous JavaScript + XMLの略語ですから、Javascriptを使って、非同期XML通信を行うわけなんですが、通常はXMLHttpRequestを使います。
その代わりに、iframeを使ってもできますよー、という説明をところどころで見たことがあるかと思います。
透明or見えないiframeを作って、そこにsrc=でCGIを指定してやると、結果がiframeの中に送られてくるので、その応答を見てナントカするという話ですね。
この詳しい説明は、AllAboutで、高橋さんがやってます。

AllAlbout
 http://allabout.co.jp/internet/javascript/closeup/CU20060115A/index.htm

この説明をみると、srcにjsを読み込んでいます。要するに、CGIの応答はJSONなんですよ。
読み込まれると自動的にevalされるので、変数にはいる。さらにはonloadでイベントが発生するわけです。

さて、ここでJSONじゃなくて、XMLを使うとどうなるか。これにはブラウザの互換が絡んでしまうようです。
たとえば、次のような例を考えます。

top.html


<html>
<script>
function abc()
{
var i1 = document.getElementById("i1");
i1.src="top2.html";
}
</script>
<iframe id="i1" src=""></iframe>
<input type=button value="load" onclick="abc()">

</html>


top2.html


<abc>
  <def>ghj</def>
  <def>ghj</def>
</abc>


Content-Typeはtext/htmlの場合

Firefoxの構造



+iframe
 +html
   -head
 +body
  +abc
    -def
    -def


IEの構造



+iframe
 +#document
   -abc
   -def
   +html
    +body
     -#text
     -/def
     -def
     -#text
     -/def
     -#text
     -/abc


完全にIEの場合、構造が破壊されてますね。
.htmlだからマズイんだろ?.xmlなら?と思うかもしれません。が、.xmlの場合はもっと破壊されます。。

.xmlの場合



+iframe
 +#document
  +html
    +head
    +body
     +div
      +div(この中身も結構複雑。。。)
      +div(この中身も結構複雑。。。)


これからわかるんですが、IEのDOMってのはそもそもの定義?通り、表示されている通りのDOMを返却します。つまり、XMLをiframeで読み込ませても、構造が保たれないって事です。

したがって、iframeでAjaxをする場合はデータの受け渡しは、JSONでやりましょう、という事になりますね。




6/12
 朝: 350kcal:黒ウーロン茶、サンドイッチ(350)

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 3

驚いた 驚いた
面白い

この記事へのコメント

この記事へのトラックバック