プログラミング学習の記録 181.1 独習JavaScript (大型本)の第10章Ajax, 2 XMLHttpRequestの練習問題10.2

開発環境:Mac OS X Snow Leopard+Firefox(ブラウザ)+Firebug(アドオン)

"独習JavaScript (大型本)"のp.394, 第10章Ajax, 2 XMLHttpRequestの練習問題10.2を解いてみる。




1.

まずXMLHttpRequestオブジェクトの生成方法が異なる。他にはonreadystatechangeプロパティのコールバック関数が呼び出されるタイミングが異なる。

2.
divタグのidをd0とする。
<script language="javascript" type="text/javascript"> var request=new window.XMLHttpRequest(); request.onreadystatechange=function(){ if(request.readyState==4 && request.status==200){ var name=request.responseXML.getElementsByTagName("name"); var value=name.firstChild.nodeValue; var d0=document.getElementById("d0"); if(navigator.userAgent.toLowerCase().indexOf("firefox")==true){ element.textContent=value; } else { element.innerText=value; } } }; request.open("GET","/names.xml",true); request.send(null); </script>

3.
id=d0のdivタグに問題のJSONPデータを表示するとする。
<script type="text/javascript" src="http://example.com/jsonPData.js"></script> <script language="javascript" type="text/javascript"> function callbackJson(obj){ if(navigator.userAgent.toLowerCase().indexOf("firefox")==true){ document.getElementById("d0").textContent=obj.name; } else { document.getElementById("d0").innerText=obj.name; } } </script>