AJAX TimeOutエラーが止まらず困っています

このQ&Aのポイント
  • Javascriptを使用してAJAXを使ったインターフェースを構築していますが、タイムアウトエラーが止まらずに困っています。
  • httpRequestのアクセス部分のソースコードにタイマーを設定してタイムアウトを監視していますが、タイムアウトエラーが続いています。
  • タイムアウトエラーの原因や回避方法を教えていただけないでしょうか?
回答を見る
  • ベストアンサー

AJAX(?)TimeOutエラーが停止しない

当方、Javascriptで本格的なプログラムを組んだことが無いプログラマです。 書籍を参考にAJAXを使用したインターフェースを構築しているのですが、時折タイムアウトエラーが止まらず出続ける現象に遭遇して困っております。 原因・回避方法などがわかりましたらご教授ください。 httpRequestのアクセス部分のソースは以下のようになっています(見づらくてすみません)。 function httpPostRequest(target_url, post_data, funcitonReference) { ~~(XMLHttpRequestオブジェクト検証部分)~~ timerId = setInterval('timeoutCheck()', 1000); httpObj.open("POST", target_url, true); httpObj.onreadystatechange = function() { if (httpObj.readyState == 4) { clearInterval(timerId); if (httpObj.status == 200) { funcitonReference(httpObj.responseText); } else { alert(httpObj.status + ' : ' + httpObj.statusText); funcitonReference(false); } } } httpObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); httpObj.send(post_data); } function httpObjGenerateFail() { alert('This browser is outside the support.'); return false; } function timeoutCheck() { timeout_sec --; if(timeout_sec <= 0) { clearInterval(timerId); timeout_sec = 10; httpObj.abort(); alert('Time out'); return false; } }

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

  • ベストアンサー
  • akanekor
  • ベストアンサー率52% (102/194)
回答No.1

予想ですが、 timeoutCheck() のイベント来る前に、 再度 httpPostRequest()が呼ばれた場合、 >> timerId = setInterval('timeoutCheck()', 1000); で、新規で timerId 発版するので前回の timerId が解放されずに残ってしまったのかと、。 なので、解決策としては、 >> timerId = setInterval('timeoutCheck()', 1000); する前に、timerIdが残ってないか判定して、残っていたら、 >> clearInterval(timerId); する処理を追加すればいいかと思われます。

ategon
質問者

補足

回答ありがとうございます。 非同期であるがゆえに起こる問題ということですね。 参考にした書籍の著者はこの問題に気づいてないのですかね・・・。 ちなみに、timerIDの残っているかどうかの判定というのは if(timerID) で判断できるのでしょうか。 (すみません。月曜まで実行環境がないので・・・)

その他の回答 (1)

  • akanekor
  • ベストアンサー率52% (102/194)
回答No.2

>>if(timerID) 試して無いけど、 そのようにするなら、解放後にnull値入れないと無理。

ategon
質問者

お礼

助かりました。 ありがとうございます。 根本の原因はわかったので、後は研究してみます。

関連するQ&A

  • 【ajax】 XMLHttpRequestオブジェクトを作成し連続でsend

    連続して非同期の通信を行う方法が分からず困っています。 下のようなコードを書きました。 クライアントからサーバにある「hoge1.txt」をGETするというものです。 その処理を行う関数(httpXMLRequest)を一つだけ呼び出すとうまくいきます。しかし二つ目に読み込んだ処理が実行されません。 同時に、というのは無理なのでしょうか。。 --------             ・             ・             ・ httpXmlRequest('hoge1.txt','GET','',dspXMLElement,httpError) //httpXmlRequest('hoge2.txt','GET','',dspXMLElement,httpError) } function httpXmlRequest \ (target_url,method,data,success_func,error_func){ httpObj=new XMLHttpRequest() timerId=setInterval('timeoutCheck()',1000) httpObj.open(method,target_url,true) httpObj.onreadystatechange=function(){ if(httpObj.readyState==4){ clearInterval(timerId) if(httpObj.status==200){ success_func(httpObj.responseXML) httpObj.abort() } else{ erro_func(httpObj.status+':'+httpObj.statusText) return false } } } httpObj.send(data) } 以上、よろしくおねがいします。

  • Ajaxで変数が受け取れない

    function chk() { var up_file = false; httpObj = createXMLHttpRequest(displayData); if (httpObj) { httpObj.open("POST","file_chk.php",true); httpObj.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8"); httpObj.send("chk=(ファイル名)"); } function displayData() { if ((httpObj.readyState == 4) && (httpObj.status == 200)) { if (httpObj.responseText == "true") { up_file = true; } } } alert(up_file); } } 以上のようなソースのJavaScriptプログラムがあります。Ajaxを使ったもので、phpのプログラムでファイルの有無を調べるというものです。 まず最初に有無の確認用の変数up_fileを設定し、phpを使ったAjaxで検査、Ajaxが作動すると関数displayData()が実行され、ファイルがあればup_fileの値を初期値falseからtrueへ上書きするというものです。 ところがファイルがちゃんとあるのにup_fileの中身はflaseのままなのです。ソースにalertを書いた場所でfalseが返ってきます。その前のスコープ内に入れると、Ajaxで問い合わせるので数回falseが出た後最終的にtrueになります。なのにその1つ後のスコープ内、つまり関数displayData()を抜けた大元の関数chk()内に置くとfalseになってしまうのです。trueにする時varを使ってないのでグローバル変数の書き換えすら可能なはずなのですが・・・。 なぜ変数up_fileの上書きが出来ないのでしょうか?

  • jQuery.ajax()のリクエストが返らない

    下のような通信処理を書いています。 var returnObj = null; var errorMsg = ''; function getAjaxHttpRequest(prms) { returnObj = null; if (prms["sendXml"] == null) { prms["sendXml"] = ""; } jQuery.ajax({ contentType: prms["contentType"] , type: prms["type"] , url: prms["url"] , timeout: prms["timeout"] , cache: prms["cache"] , async: false , processData: false , data: "formId=" + prms["formId"] + "&submitStatus=" + prms["submitStatus"] + "&appId=" + prms["appId"] + "&data=" + prms["sendXml"] , success: function(data, dataType) { errorMsg = ""; } , error: function(XMLHttpRequest, textStatus, errorThrown) { errorMsg = textStatus + ' - ' + errorThrown; } , complete : function(xmlHttpRequest, textStatus) { var READYSTATE_COMPLETED = 4; if( xmlHttpRequest.readyState == READYSTATE_COMPLETED ) { var HTTP_STATUS_OK = 200; if( xmlHttpRequest.status == HTTP_STATUS_OK ) { returnObj = { resultCode: 'success' , data: xmlHttpRequest.responseText }; } else { if (xmlHttpRequest.responseText == '') { returnObj = { resultCode: 'error' , textStatus: xmlHttpRequest.status + " - " + xmlHttpRequest.statusText , responseText: errorMsg }; } else { returnObj = { resultCode: 'error' , textStatus: xmlHttpRequest.status + " - " + xmlHttpRequest.statusText , responseText: xmlHttpRequest.responseText }; } } } else { returnObj = { resultCode: 'error' , textStatus: xmlHttpRequest.readyState + " - " + xmlHttpRequest.status + " - " + xmlHttpRequest.statusText , responseText: xmlHttpRequest.responseText }; } errorMsg = ''; } }); return returnObj; } まれに最後のreturnObjがnullで返ってくるようです。なぜでしょうか? 何が起きている可能性があるでしょうか。 jquery-1.4.3です。

  • POSTだとAjaxをループできない

    <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title>Ajax</title> <script type="text/javascript"> <!-- function createXMLHttpRequest(cbFunc) { XMLhttpObject = new XMLHttpRequest(); if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc; return XMLhttpObject; } function func() { for (i=0; i<5; i++) { httpObj = createXMLHttpRequest(displayData); if (httpObj) { httpObj.open("GET","file_chk.php?chk=(ファイル名)",true); httpObj.send(null); //httpObj.open("POST","file_chk.php",true); //httpObj.send("chk=(ファイル名)"); } } } function displayData() { if ((httpObj.readyState == 4) && (httpObj.status == 200)) { alert(httpObj.responseText); } } // --> </script> </head> <body> <input type="button" value="Ajax" onclick="func();" /> </body> </html> 先の投稿と似たものになってしまいますが、以上のようなソースのプログラムを組みました。ボタンを押すとAjaxが作動してphpプログラムを呼び出し、その結果を返すというものです。phpプログラムは任意のファイル名を変数として受け取り、その存在の有無によって返事を返すというものです。ソースは以下の通りです。 <? $file = $_GET['chk']; //$file = $_POST['chk']; if (file_exists($file)) { print "true"; } else { print "false"; } ?> このAjaxで問い合わせるという処理全体をループさせたいのですが、コメントアウトしているPOSTで実行するとうまくいきません。1回しかアラートが出なかったり、5回と設定してるのにそれ以上出たり。当初これに悩まされてましたが、GETで試すとうまくいきました。なぜPOSTだとうまくいかなかったのでしょうか?自分なりに考えてみたのですが全く分かりません。ソースのもので試すときは一方のコメントアウトを外し、他方をコメントアウトさせていました。もちろんphpの方も同様です。 GETとPOSTで書いたソースは間違ってませんよね?同じ意味になってますよね?どちらの方法でもいいことはいいんですが、GETだと与えるクエリによっては行が横に長くなってしまいますし、sendがあるのならそこに変数を書いたほうが見やすいのではないかと思ってPOSTを使ってました。

  • Ajaxがおかしいんです

    Javascript初級者です。 Ajaxを使ってデータの重複チェックを行おうとしました。 ところがAjaxがヘンな動きをするんです。 以下のコードなんですが、上の登録処理の中で、function doubleCheck を呼んで います。 問題は2つあって、ひとつは実際に重複していてもしていなくても「true」を 返してくることです。 console.log("res=========" + res) には「yes」とか「no」とか重複有り無しで 異なりますが、ちゃんとそれぞれセットするにも関わらず、 if(!doubleCheck() では必ず「false」が戻ってきてしまいます。 もう一つおかしい点は、重複検索(これはPHPでやってます)の最中にもかかわらず、 「true」が返ってきて "重複があったので登録できません。" お、出てしまうことです。 それで調査するために console.logその2を入れてみました(※※※のところ)。 ところがこの console 何も吐き出しません。 ということは doubleCheck() の最後の if文にたどり着いていない、または 途中でエラーになっているのかもしれません。 私の書いた Ajax のコードがおかしいんでしょうか。 どなたか御指導下さい。 よろしくお願いします。 // 追加登録処理 function doActionAdd(){ if(dataCheck()){ // customerId が 空白か否かのチェック if($('#customerId').val() == ""){ if(window.confirm("追加登録していいですか?")){ if(!doubleCheck()){ window.alert("重複はありませんでした"); }else{ window.alert("重複があったので登録できません。"); }  (以下略) function doubleCheck(){ var yomi = $('#customerYomi').val(); var res = ''; // 重複チェック $.ajax({ type: "POST", url: "../customer/CustomerDoubleCheck.php", data: {"customerYomi":yomi}, dataType: 'text', // ajax通信が成功したときの処理 success: function(request){ console.log("request=========" + request); var json = JSON.parse(request); console.log(json[0].result ); res = json[0].result; console.log("res=========" + res); }, error: function(XMLHttpRequest, textStatus, errorThrown){ $('div#jobStatus').text("重複チェック検索ができませんでした。"); return false; } }); console.log("resその2=========" + res); //※※※ if(res == "yes"){ // 重複していたので「false」を返す。 return false; }else{ // 重複していなかったので「true」を返す。 return true; } }

  • IE6 + javascript

    すみません、先ほども質問したのですが、締め切ってしまったのでもう一度質問させてください。 下記コードが、Firefoxでは動作するのですが、IEではjavasciptの部分が動作していません。 もちろん、javascriptの設定は有効にしてあります。 var browser = navigator.appName; if(browser.charAt(0) == "N") { window.addEventListener("load",change_page(page_id),false); } else if (browser.charAt(0) == "M") { window.attachEvent("onLoad",change_page(page_id)); } .... function httpRequest() { if (window.ActiveXObject) { try { httpObj = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { try { httpObj = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { httpObj = false; } } } else if (window.XMLHttpRequest){ try{ httpObj = new XMLHttpRequest(); } catch(e) { httpObj = false; } } return httpObj; } change_page()はfunctionです。 なぜIE6ではjavascriptが動かないのでしょう? ソースのどこが悪いのかわからず、どなたかアドバイスあればお願いします!

  • Ajaxの使い方がおかしいでしょうか?

    Javascript の初級者です。 今、Formを使って更新処理しようとしています。 同時に、submitが押されたときに、データをチェックするために関数に 飛ばしています。 ★印のところだけが「true」で他のところは「false」なので処理を中断させたいと 考えています。 Ajaxを非同期で実行すると訳が分からなくなってしまったので同期処理にしています。 ところがどのような条件でsubmitしてもFromが実行されてしまいます。 Ajaxの success 下にこのような分岐処理を書くのは間違いなんでしょうか。 どなたかお分かりになる方、ご指導下さい。 よろしくお願いします。 function upadateCheck(){ var strYear = $("#year").val(); var strMonth = $("#month").val(); var strClosingDate = $("#closingDate").val(); $.ajax({ async: false, // 同期処理 type: "POST", url: "/customercheckclosingdate", data: {"closingDate":strClosingDate,"year":strYear,"month":strMonth,}, dataType: 'text', success: function(request){ var arr = eval(request); var data = arr[0]; if(data.result == "nothing"){ window.alert("指定の「締日」の得意先はありませんでした。"); return false; }else if(data.result == "no"){ window.alert("指定の「処理年月」と「締日」で更新処理を行うには、締日の不整合があります。"); return false; }else{ if(window.confirm("締日:" + strClosingDate + "日\n処理年月:" + strYear + "年" + strMonth + "月\n\nの更新処理を行います。")){ return true; ★★★★★★★★★★★★★★★★ }else{ return false; } } }, error: function(msg){ alert( "Data Saved: " + msg ); return false; } }); } <form method="POST" action="/update" onsubmit="return upadateCheck()"> <table> <tr> <th>締   日:</th> <td> <input type="hidden" id="year" name="year"> <input type="hidden" id="month" name="month"> <SELECT id="closingDate" name="closingDate" > <OPTION value="05">5</OPTION> <OPTION value="10">10</OPTION> <OPTION value="15">15</OPTION> <OPTION value="20">20</OPTION> <OPTION value="25">25</OPTION> <OPTION value="末">末</OPTION> </SELECT> </td> <td colspan="2"> <input type="submit" value="更新処理" /> </td> </tr> </table> </form>

  • javascriptのストップウオッチのコード

    javascript初級勉強中です。 以下のコードを実行すると(1)小数点第2の動きがおかしい。  (2)一度リセットボタンを押さないとタイマーが動かない。 という2点の不具合が出ます。   どうすれば解決するでしょうか? <!DOCTYPE HTML> <head> <meta charset="utf-8"> <title>ストップウォッチ</title> </head> <body> <h1>ストップウオッチ</h1> <div id="sec" style="font-size:128px">0.00</div> <input type="button" value="Start!" onclick="run();"> <input type="button" value="Stop!" onclick="stop();"> <input type="button" value="Reset!" onclick="reset();"> <script> var statTime, stopTime, running = false, timerId; function run() { if (running)return; running = true; if (stopTime) { startTime = startTime + (new Date()).getTime() - stopTime; } if (! startTime) { startTime = (new Date()).getTime(); } timer(); //タイマー処理回していく } function timer() { document.getElementById('sec').innerHTML = (((new Date()).getTime()- startTime)/1000). toFixed(2); timerId =setTimeout(function() { timer(); //このタイマー自身を回していく }, 100); } function stop() { if (!running) return false; running = false; clearTimeout(timerId); //timerIdを渡して止める stopTime = (new Date()).getTime(); } function reset() { if (running) return;   startTime = undefined; document.getElementById('sec').innerHTML = '0.00'; } </script> </body> </html>

  • Ajaxが機能しない

    IE6.02を使っています。 次のようにAjaxのテストをしようとしたのですが、 「data.txt」に入っている文字(aaa)が表示されませんでした。 スクリプトのエラーも出てないようなのですが、なにが原因なのでしょうか? <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title>XMLHttpRequest()の基本(Win IEの場合)</title> <script type="text/javascript"><!-- function loadTextFile() { httpObj = new ActiveXObject("Microsoft.XMLHTTP"); httpObj.onreadystatechange = statusCheck; httpObj.open("GET","data.txt",true); httpObj.send(null); } function statusCheck() { if ((httpObj.readyState == 4) && (httpObj.status == 200)) { displayData(); } } function displayData() { document.ajaxForm.result.value = httpObj.responseText; } // --></script> </head> <body> <h1>XMLHttpRequest()の基本 (Win IEの場合)</h1> <form name="ajaxForm"> <input type="button" value="読み込み" onClick="loadTextFile()"><br> <textarea name="result" cols="40" rows="5"></textarea> </form> </body> </html>

  • jqueryの$.ajaxで送信できない

    はじめまして。 jquery初心者ですが、$.ajax使ってのPOST送信ができません、php側でログを取ってみてもアクセスすらしません。若干お手上げなので、分かる方がいたら、アドバイスを頂けませんか? 【やりたいこと】 formにデータを入力(html)し → jqueryを使ってpost送信(js) → 認証(php) → 結果をhtmlに表示させたい。 【ソース】 -a.html- <form method="post" id="signin" action=""> <input id="email" name="email" value="" title="email" class="required" tabindex="4" type="text"> <input id="posturl" type="hidden" name="posturl" value="a.php"> <input id="signin_submit" value="Sign in" tabindex="6" type="submit"> </form> -------- -a.js- $(function() { $("form#signin").submit(function() { var email = $("input#email").val(); var postFile = $("input#posturl").val(); var data = {email:email}; $.ajax({ type: "POST", url: postFile, data: data, timeout: 1000, error: function(){ // エラー時 alert('Error'); }, success: function(data) { if(data != ''){ alert(data.result); } else { alert('no data'); } } }); }); }); -------- -a.php- (他略、とりあえず適当に出力してみる) echo "{'status': false,}"; exit; -------- よろしくお願いします。m_m

専門家に質問してみよう