IE上で、ajaxを使ってtextファイルをインクルードする

いつも、google gadgetを作っている時、何も気にせず、googleが用意してくれている共通ファンクションを使って、xmlファイルからデータを取得したり、JSONのデータをjavascriptで使ったりしているんですけど、いったい、どうやって取得しているのか気になったので、調べてみました。

今回、例として、「test」、「hoge」と書いてあるdemo.txtのデータを取りにいきたいと思います。

まずは、XMLHttpRequestオブジェクトを作成します

var httpObj = "";//変数宣言 //ActiveXObjectのオブジェクトを作成する httpObj = new ActiveXObject("Msxml2.XMLHTTP");

次は、データの送信方法、ファイルの接続先、同期方法を書いたopenメソッドを使います。

//非同期でテキストをデータをget方式で取りにいく httpObj.open("GET","txtファイルがあるURL",true);

そして、状態が変化したときに、ファンクションを呼び出します。

//状態変化が起きたときにファンクションを起動する httpObj.onreadystatechange = comploaded(); function comploaded(){  if(httpObj.readyState == 4 && httpObj.status == 200){   //コールバック関数   callback(httpObj);  } }

readyState == 4つまりデータを受信完了したとき、かつ、status == 200、リクエストが完了したときにコールバック関数を呼び出すようにしたのですが、エラーになりました。

JavaScriptが「型が一致していません」と怒りました。

なぜ、バグルのじゃぁー？？

参考に、AllAboutのAjaxはじめの一歩 XMLHttpRequestを見ながら打っているんですけど、バグっている。。。

なぜじゃー？？

今度は、こう変えてみました。

//状態変化が起きたときにファンクションを起動する httpObj.onreadystatechange = comploaded; function comploaded(){  if(httpObj.readyState == 4 && httpObj.status == 200){   //コールバック関数   callback(httpObj);  } }

と書いたら、動いたー！！！

ファンクションには、引数が必要でなくても「()」が必要なんじゃーないのか？？
おかしい、なぜじゃー？？

とりあえず、ずーっと考えていると泥沼にはまりそうなので、気持ち悪いけど、いったん納得して、ファンクションの部分を無名関数に書き換えました。

//状態変化が起きたときにファンクションを起動する httpObj.onreadystatechange = function (){  if(httpObj.readyState == 4 && httpObj.status == 200){   //コールバック関数   callback(httpObj);  } }; httpObj.send(null);

そして、callback関数の部分を続けて書いてみました。

function callback(obj){  var ret = "";  //テキストデータを取得する  ret = obj.responseText; }

これでデータ取得が完了します。
あとは、ファイルの種類に応じてデータを加工すればhtmlに反映させることができます。

うれしくて、このブログにもソース書いて、動作確認を行ったところ、動かなかった。。。
ローカルだと動くのに。。。
Bloggerの使用上無理？？ってこと

うまく、動作しなかったので、ローカルで書いたソースをあげます。

<SCRIPT type="text/javascript">  function js_ajaxcatch(){   if(!!(window.attachEvent && !window.opera)){    var httpObj = "";    httpObj = new ActiveXObject("Msxml2.XMLHTTP");    httpObj.open("GET","http://mai.musicfactory.googlepages.com/demo.txt",true);    httpObj.onreadystatechange = function (){     if(httpObj.readyState == 4 && httpObj.status == 200){     callback(httpObj);     }    };    httpObj.send(null);   }  }  function callback(obj){   var ret = "";   ret = obj.responseText;   document.getElementById("ajax_catch").innerText = ret;  } </SCRIPT> <DIV id="ajax_catch"></DIV><BR> <INPUT type="button" value="Run" onclick="js_ajaxcatch();">