• ベストアンサー

ローカルでのonreadystatechangeの動作について

現在下記のようなコードを書いて、HTMLを読み込む処理を行おうとしています。 function LoadHtml(id , uri) { if(!XmlsReq)return; XmlsReq.open('GET',uri); XmlsReq.send(null); XmlsReq.onreadystatechange=function(){ alert("piyo"); if(XmlsReq.status==0 || XmlsReq.readyState==4 && XmlsReq.status==200) { alert("hoge"); document.getElementById(id).innerHTML=XmlsReq.responseText; } } document.getElementById(id).innerHTML=XmlsReq.responseText; } これはHTTPサーバ上で動かすとちゃんと動作し、 またHTTPステータスコードが0になるローカルでもfirefoxなら動くのですが、 IE7で試してみたところ、動作しません。 原因を探してみたところ、XmlsReq.send(null);までは実行されておりalert("piyo")が表示されないことから、 どうもonreadystatechangeイベントが検出されていないような動きをしています。 ローカルのIE7環境でちゃんと動作させるにはどうしたら良いか、分かる方居ましたら教えて下さい。

  • AJAX
  • 回答数4
  • ありがとう数15

質問者が選んだベストアンサー

  • ベストアンサー
  • hrm_mmm
  • ベストアンサー率63% (292/459)
回答No.4

ローカルファイル(file://のurl)のときは、status を返すプログラム(http server)を経由してないので常にstatus == 0 です。これは、ブラウザによりません。 実行順については、既に指摘のあるとおり、open前に(最低でもsend前に)、onreadystatechangeをセットしておかないと、ローカルでの読み込みは次を実行するまえに終わってるので、つまりonreadystatechangeは、発生完了済みなので、補足されなくなります。 ネットワーク経由だと、どうしてもタイムラグがあるから、補足できていたのでしょう。 静的テキストを読みとるだけなら、readyState==4 だけ補足すれば、おおむね(ローカル、http経由を問わず)、受信出来るようです。 参考:miniajax 超最短スクリプト http://www.bigbold.com/snippets/posts/show/2025 ブラウザ別、実行状況は、とりあえず、こちらを参考にするとよいかもしれません。 http://jsgt.org/ajax/ref/test/response/responsetext/try1.php

その他の回答 (3)

回答No.3

> IEはreadystateが0で、statusが200です。 あー。。。。readyStateが4でstatusが0だったかも。。。m(_ _)m ライブラリに任せてるので結構忘れてます。ブラウザのバージョンでも違ったりしますし。 openの前にonreadystatechangeをセットすると、 open、送信開始、送信完了、受信完了で4回呼び出されるので、 readyStateをチェックせずにstatusだけでチェックしてたら、4回実行されるかもしれません。

回答No.2

> alert("piyo")が表示されないことから、 失礼しました。そっちの方ですか。 onreadystatechangeのセットが遅すぎます。 openの前にセットして下さい。

回答No.1

IEはreadystateが0で、statusが200です。 キャッシュファイルを読んでいる場合は、statusが302になることがあります。(全ブラウザ共通) statusコードの種類は、「HTTP ステータスコード」で検索して下さい。 404 FileNotFoundとかのアレです。

関連するQ&A

  • Ajaxでwebページの一部をリロード

    Ajax超初心者です。 http://okwave.jp/qa/q7061328.html これのベストアンサーについてなんですけど、 <script type="text/javascript"> function update(){ var xhr = new XMLHttpRequest(); xhr.open("GET", "/foo.php"); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("foo").innerHTML = xhr.responseText; xhr = null; } } xhr.send(null); } </script> これって例えば「1分後に自動的にリロードする」というような指示は どこを変更して指示したらいいんでしょうか。 もしこの方法ではそういう指定ができないのなら、 指定できる方法を教えてください。

  • Google MapsのKMLをJSONで取得したい。

    Google MapsのKMLをJSONで取得したい。 Google Mapsで作成したマイマップのKMLを見るとURLが書かれています。 このURLの末尾を「&output=kml」→「&output=json」 と変更するとJSONで取得できると思うのですが、 実行するとstatus=0となっていまいます。 HTTPヘッダを見る限り200なので取得出来ているようなのですが・・・ なぜでしょうか?教えてください。 === var jsonUrl = 'url' var xhr = new XMLHttpRequest(); xhr.open("GET", jsonUrl, true); xhr.onreadystatechange = function() { if (xhr.readState ==4 && xhr.status == 200){ var jresult = document.getElementById("json_panel"); jresult.innerHTML += xhr.responseTEXT; } else { alert (xhr.statusTEXT); } } xhr.send();

  • innerHTMLが動作しない。

    JavaScriptをHTMLファイルに記述した場合、最初にfunctionスコープ内の動作以外は全て行なわれますよね。例えば、 <script type="text/javascript"> <!-- alert("test"); //--> </script> と書いた場合、ページの表示と同時にアラートが出ます。しかし上のalertの部分をdocument.getElementById("test").innerHTML = "test";にすると、これが実行されないのです。もちろん<div id="test"></div>タグはちゃんとbodyタグ内に記述してあります。functionを定義してbody onLoadで呼び出す方法もありますが、できればfunctionをむやみに使いたくないので、先のalertの時のように動作させたいのです。 これが動作しない原因は何なのでしょうか?

  • Ajax テキストエリアについて

    作ったテキストエリアにXmlHttpObjを出力したいのですがどのようにすればいいでしょうか? テキストエリアは <textarea id="text" style="width:100%; height:300px;"disabled></textarea><br> というように作りました。 XmlHttpObjは var xmlhttp; function httpHandler(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ alert(xmlhttp.responseText); } } function onButtonclick(){ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = httpHandler; xmlhttp.open("GET", "data.txt"); xmlhttp.send(null); } このようにしました。(仮で出力をアラート形式にしております。) 回答よろしくお願いします。

    • ベストアンサー
    • AJAX
  • javascriptで困っています。教えてください

    以下のようにjavascriptの内容を書いた外部のテキストファイルを読み込んで、実行しようとしているのですが、うまくいきません。普通にjavascriptを読み込むのは分かっているのですが、このような方法ができないのでしょうか?よろしくお願いします。 <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> </head> <body> <div id="jsbox"></div> <script type="text/javascript"> var jsbox = document.getElementById("jsbox"); //非同期通信///////////////////////////////////////////// var xmlHttp; loadText(); function loadText(){ if (window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else{ if (window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else{ xmlHttp = null; } } xmlHttp.onreadystatechange = checkStatus; xmlHttp.open("GET", "http://xxxxxxxxxxxx/js_test.txt", true); xmlHttp.send(null); } function checkStatus(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var str = xmlHttp.responseText;alert(str); jsbox.innerHTML = str; test_js(); } } ///////////////////////////////////////////////////////////////// </script> </body> </html> テキストファイルをhttp://xxxxxxxxxxxx/js_test.txtに置き、テキストファイルの内容が <script type="text/javascript"> function test_js(){ alert("test"); } </script>

  • XMLHttpRequest() Ajaxについて

    こんにちは。Ajaxに挑戦しているのですが、テキストフィールドに入力して送信ボタンを押したら、自作関数の XmlHttpRequest()を呼び出して、kakunin.jspに飛ばして、kakunin.jspで作ったコードを<result>タグ内に表示し、その際現れる「削除」ボタンをクリックしたら、今度は自作関数 deleteRequest()を呼び出し、sakujyo.jspに飛ばしてデータベースのレコードの削除を行い、<result>タグ内の表示をかえたいのですが、削除の方がうまくいっておりません(削除するボタンを押して、deleteRequest()は呼び出しているのですが、そのあと、delete.jspに飛ばず、kakunin.jspに飛びます)。以下が大まかなコードです。 function XmlHttpRequest(){ if(window.XMLHttpRequest){ httpObject=new XMLHttpRequest(); } else if(window.ActiveXObject){ httpObject=new ActiveXObjec("Msxml2.XMLHTTP"); } httpObject.onreadystatechange=display; 途中省略します。     httpObject.open("GET","kakunin.jsp?nen="+encnen+"&tsuki="+enctsuki+"&syaincode="+encsyaincode,true); httpObject.send(null); } function display(){ if(httpObject.readyState==4 && httpObject.status==200){ document.getElementById("result").innerHTML=httpObject.responseText; 省略します。 } } function deleteRequest(){ if(window.XMLHttpRequest){ delhttpObject=new XMLHttpRequest(); } else if(window.ActiveXObject){ delhttpObject=new ActiveXObject("Msxml2.XMLHTTP"); } delhttpObject.onreadystatechange=displaysql("削除しました"); 省略します delhttpObject.open("GET","delete.jsp?nen="+encnen+"&tsuki="+enctsuki+"&syaincode="+encsyaincode,true); delhttpObject.send(null); } function displaysql(msg){ if(delhttpObject.readyState==4 && delhttpObject.status==200){ document.getElementById("result").innerHTML=delhttpObject.responseText; alert(msg); kidou(); } } こういったやり方がわからなく、自己流でやってみましたので、おかしな部分もあるかもしれませんが、やりたい事は押すボタンによって、飛ばすjspファイルを変え、<result>タグ内の表示も、各jspファイルで、 出力されたものを表示させたいのですが、自分で考えたやり方ではどこか間違っているようですので、どなたかアドバイスの方、よろしくお願いいたします。 環境は、IE7です。よろしくお願いいたします。

  • responseTextのデータをevaluate

    JavaScriptのXMLHttpRequestで別のHTMLページのソースをresponseTextで取得し、 そのHTMLソースに対してdocument.evaluate関数をかけたいと考えております。 しかしうまく行かず、恐らく内容はHTMLソースとは言ってもテキストデータであり、 documentオブジェクトではない為にevaluateがかけられないのだろうと推測しております。 DOMParser().parseFromStringでテキスト→XMLオブジェクトへの変換は見つかったのですが それではうまく行かず、documentオブジェクト(HTMLオブジェクト)への変換方法は 見つけることができず困っております。 環境としてはFirefoxアドオンのGreasemonkeyスクリプトとして、上記処理を実装したいと 考えております。 尚、問題部分は下記のような記述して試しております。 var xhr = new XMLHttpRequest(); xhr.open("GET", "別ページURL", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var txt = xhr.responseText; var snap = txt.evaluate('//h1[@id = "siteID"]', document, null, 7, null); alert(snap.snapshotLength); } } xhr.send();

  • javascript submit()の後の動作

    scriptはjsファイルで分離しています。 送信ボタンをクリックした場合の動作は期待通りの動作をしています エンターキーを押したときの動作が、フォームの送信は正常に実行されるのですが、 document.getElementById('ctxt').value= '';が実行されません。 その後、試しにアラートも入れてみましたけど、動作していないようです document.forms[txt_submit].submit();の後の部分が実行されるようにするにはどうしたらいいのでしょうか? function Key_on(){ if(window.event.keyCode == 13){ document.forms[txt_submit].submit(); document.getElementById('ctxt').value= ''; alert('ん?'); } } function send(){ document.txt_submit.submit(); document.getElementById('ctxt').value= ''; } ----------------- <form id="txt_submit" name="txt_submit" action="log.cgi" method="post" target="log" autocomplete="off"> <input type="text" id="ctxt" name="ctxt" size="20" value="" onkeydown="Key_on()"> <input type="button" value="送信" onclick="return send();"> </form>

  • Ajaxで表示させると内容が不変

    下記Ajaxでtest.txtを表示できたのですが test.txtの内容を Hello Japan. 変えてもブラウザのキャッシュをクリアしない限り Hello World! が出つづけます。 下記ページにキャッシュ無効のヘッダをつけても同じです。 子の問題を解決する手段を教えてください。 test.txt: Hello World! x.html: <script> var xmlHttp; function loadText() {  if (window.XMLHttpRequest)  {   xmlHttp = new XMLHttpRequest();  }  else  {   if (window.ActiveXObject)   {    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   }   else   {    xmlHttp = null;   }  }  xmlHttp.onreadystatechange = checkStatus;  xmlHttp.open("GET","test.txt",true); xmlHttp.send(null); } function checkStatus() { if (xmlHttp.readyState==4&&xmlHttp.status==200) { var node = document.getElementById("disp"); node.innerHTML = xmlHttp.responseText; } } </script> <form> <input type="button" value="push" onClick="loadText()"> </form> <div id="disp"></div>

  • セレクト部品の表示内容

    が選択されているかどうかによって変化するようにしたいのですが 以下のようにしてもうまくいきません。 何か解決策はないでしょうか? <script> function func() { document.getElementById("00").innerHTML="00.aa"; document.getElementById("01").innerHTML="01.bb"; } function func2() { document.getElementById("00").innerHTML="00"; document.getElementById("01").innerHTML="01"; } </script> <select onfocus="func()" onblur="func2()"> <option value="00"><span id="00">00</span></option> <option value="01"><span id="01">01</span></option> </select>