[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を使うとどうなるか。これにはブラウザの互換が絡んでしまうようです。
たとえば、次のような例を考えます。
Content-Typeはtext/htmlの場合
完全にIEの場合、構造が破壊されてますね。
.htmlだからマズイんだろ？.xmlなら？と思うかもしれません。が、.xmlの場合はもっと破壊されます。。
これからわかるんですが、IEのDOMってのはそもそもの定義？通り、表示されている通りのDOMを返却します。つまり、XMLをiframeで読み込ませても、構造が保たれないって事です。
したがって、iframeでAjaxをする場合はデータの受け渡しは、JSONでやりましょう、という事になりますね。
6/12
朝： 350kcal：黒ウーロン茶、サンドイッチ(350)
仕事があれこれあって、頭の切りかえが出来ないお爺さんです。午前中も上司に尋ねられた時に「ああ、その件はしばらく忘れていていいハズなので、覚えてないです」と答えてしまいました。当然、怒られましたが。
それはともかく、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)
この記事へのコメント