Ajaxによる非同期通信のイベントリスナ
- Ajaxによる非同期通信のイベントリスナは、(1)の実行後も呼ばれることがありますか？
- JavaScriptで関数を実行する際、ローカル変数xhrが解放されると、関数内で設定したイベントリスナも消滅します。
- もし、(1)の実行後も(2)が呼ばれる場合、どのような仕組みがあるのでしょうか？
- ベストアンサー
Ajaxによる非同期通信のイベントリスナ
JavaScriptで以下の関数を実行した場合、(1)の実行後関数を抜けるので、 (2)のイベントリスナは(1)の実行後も呼ばれることはあるのでしょうか。 function hoge(){ var xhr = new XMLHttpRequest(); xhr.open("GET","http://www.example.com/data.txt"); xhr.onreadystatechange = function(){ //(2) if(xhr.readyState == 4 && xhr.status == 200){ $("#foo").html(xhr.responseText); } } xhr.send(null); //(1) } ローカル変数xhrは、関数を抜けたら変数とその領域が解放されるので、 XMLHttpRequestインスタンスも消滅する、そして、インスタンスが 消滅してしまうと、onreadystatechangeプロパティも消滅すると思っ たためです。 (2)が(1)の実行後も呼ばれるとしたら、どのような仕組になっていると 理解すればよいのでしょうか。
- Mol10ke
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数6
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
onreadystatechange イベントは xhr.send(null) 呼び出し後でなければ発火しない為、(2) は必ず、(1) の後に呼び出されます。 ローカル変数は通常、関数処理後にGCが開放しますが、クロージャが発生している場合はその限りではありません。 xhr のHTTPリクエストが完了した時に xhr は役目を終える為、実装が不要と判断した任意のタイミングでGCがxhrを開放します(実装依存)。 # Re: Mol10keさん
関連する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分後に自動的にリロードする」というような指示は どこを変更して指示したらいいんでしょうか。 もしこの方法ではそういう指定ができないのなら、 指定できる方法を教えてください。
- 締切済み
- HTML
- readyState確認後の処理ができない
jQueryによるajaxを試みています。checkboxにチェックを入れたときに動作するようにしたいので、以下のように書いているのですが、alertが動作しません。onreadystatechange = function(){より前に入れたalertは動作するので、イベントハンドラ？としては機能しているようなのですが、onreadystatechangeにひもづけている関数の書き方に問題があるのでしょうか？ $(function(){ $("#check:checkbox").click(function() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'test.txt', true); xhr.onreadystatechange = function(){ if (xhr.readyState == 4) { alert("OK"); } }; }); });
- ベストアンサー
- AJAX
- ajaxが難しいです。
１ if (xhr.status === 200) { result.textContent = xhr.responseText; の部分がわからないのですが 自分で作った変数resultの中に通信に両方成功した場合サーバ側のPHPが生成したDOM要素を代入するという事をやっているのでしょうか？ その結果、処理結果を表記するhtml<div id="result"></div>の中に、代入された中身が表記されるという事ですか？ ２ 下記のloadstartとloadなどう違うのでしょうか？ xhr.addEventListener('loadstart', function() { // 画面に通信中と表記 result.textContent = '通信中...'; }, false); // 画面に通信中と表記 xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); 下記ソース ・ <?php sleep(3); print('こんにちは、'.$_REQUEST['name'].'さん！'); print('こんにちは、'.$_REQUEST['name2'].'さん！'); ?> ・ <!DOCTYPE html> <html> <head> <meta name="robots" content="noindex,noimageindex,nofollow"><!-- Onlysample --> <meta charset="UTF-8" /> <title>JavaScript本格入門</title> </head> <body> <form> <label for="name">名前：</label> <input id="name" type="text" name="name" size="15" /> <input id="btn" type="button" name="submit" value="送信" /> <label for="name">名前2：</label> <input id="name2" type="text" name="name2" size="15" /> <input id="btn2" type="button" name="submit" value="送信" /> </form> <div id="result"></div> <div id="result2"></div> <script src="scripts/hello_ajax.js"></script> </body> </html> // 非同期通信を行うための準備 document.addEventListener('DOMContentLoaded', function() { document.getElementById('btn').addEventListener('click', function() { var result = document.getElementById('result'); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { result.textContent = xhr.responseText; } else { result.textContent = 'サーバーエラーが発生しました。'; } } else { result.textContent = '通信中...'; } }; /* xhr.addEventListener('loadstart', function() { result.textContent = '通信中...'; }, false); xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); xhr.addEventListener('error', function() { result.textContent = 'サーバーエラーが発生しました。'; }, false); */ xhr.open('GET', 'hello_ajax.php?name=' + encodeURIComponent(document.getElementById('name').value), true); xhr.send(null); }, false); document.getElementById('btn2').addEventListener('click', function() { var result = document.getElementById('result2'); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { result.textContent = xhr.responseText; } else { result.textContent = 'サーバーエラーが発生しました。'; } } else { result.textContent = '通信中...'; } }; /* xhr.addEventListener('loadstart', function() { result.textContent = '通信中...'; }, false); xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); xhr.addEventListener('error', function() { result.textContent = 'サーバーエラーが発生しました。'; }, false); */ xhr.open('GET', 'hello_ajax.php?name2=' + encodeURIComponent(document.getElementById('name2').value), true); xhr.send(null); }, false); }, false); 最後に、クリックした際にJSでDOM生成して、新たな要素を表記することとajaxは、 閲覧者からすると同じように見えるのですが、 違いは、ajaxはブラウザ上で生成したのではなく、 サーバ側のPHPが生成したDOM要素をダウンロードして代入するという、違いでしょうか？ つまりサーバ側でDOMを作ったらajax、ブラウザ上で作ったらただのDOM生成という事ですか？
- ベストアンサー
- JavaScript
- イベントリスナーの部分を関数にしたい
イベントリスナーの部分で、「load」以外に「change」も必要になったので関数にしたいのですが、 引数の関数の指定方法がわかりません。 どうすればいいのでしょうか。よろしくお願いします。 【イベントリスナーを関数にする前】 function hoge(){ this.view = function(){ var _this = this; window.addEventListener( 'load',function(){ _this.foo()}, false ); } this.foo =function(){ var txt = document.createTextNode( this.moji ); document.body.appendChild( txt ); } } var a =new hoge(); a.moji="テスト"; a.view(); 【やってみたこと】 function hoge(){ this.view = function(){ var _this = this; var func = function(){ _this.foo()}; this.addListener( 'window', 'load', func ); } this.addListener = function(elem,type,func){ elem.addEventListener( type,func, false ); } this.foo =function(){ var txt = document.createTextNode( this.moji ); document.body.appendChild( txt ); } } var a =new hoge(); a.moji="テスト"; a.view();
- ベストアンサー
- JavaScript
- 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です。
- 締切済み
- JavaScript
- 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
- 無名関数内の変数のreturn
function get_record(id,step,exefunc) { httpObj = new XMLHttpRequest(); ...XMLHttpRequest非同期通信 httpObj.onreadystatechange = function() { if(httpObj.readyState == 4) && (httpObj,status == 200) { data = httpObj.responseText; exefunc(data); }}} 上記関数でデータを1件取得します。 質問は２つあって、今はhttpObj.responseTextをexefunc関数の引数として渡して、responseTextを処理しています。 httpObj.responseTextをexefunc関数で処理するのではなくて、returnしたいのですが、どうすればよいかわかりません。無名関数の中にあるので、dataをreturnしても、外からは参照できないのです。 もう一つの問題は、get_record関数を呼び出す関数は２つあって、その２つを同時にwindow.onloadで実行したいのです。 get_recordでデータを取得、そのデータを表示するための関数disp1,disp2(表示場所が違うため２つにわけています)をwindow.loadで実行したいのですが、後に記述されたほうしか実行されません。 どうすれば２つがwindow.onloadで実行できるでしょうか。 足りない情報等あれば教えてください。 よろしくお願いします。
- 締切済み
- JavaScript
- イベントリスナーで読み込んだ後に、DOMで文字を表
イベントリスナーで読み込んだ後に、DOMで文字を表示させたい。 DOMを使って、文字を表示させるならイベントリスナーで読み込み必要があると思いました。 そこで、下記のように書いて試してみました。 function hoge(){ this.view = function(){ window.addEventListener( 'load',this.foo, false ); } this.foo =function(){ var txt = document.createTextNode( this.moji ); document.body.appendChild( txt ); } } var a =new hoge(); a.moji="テスト"; a.view(); すると、「undefined」と表示されます。 どうすればいいのでしょうか。よろしくお願いします。
- ベストアンサー
- JavaScript
- 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です。よろしくお願いいたします。
- 締切済み
- JavaScript
- AJAXとPHPの全角文字の受け渡し
こんにちは教えてください。 AJAXからPHPを呼んで、PHPから全角文字を受け取ると文字化けしてしまいます。いずれも文字コードはSJISです。例えば下のような感じです。(AsyncRequest()はXMLHttpRequestのオブジェクトを作って返す関数です) 文字化けの原因は何でしょうか？ /************************************* JavaScript側 *************************************/ var Async = AsyncRequest(); Async.open( "GET" , "test.php ); Async.send( null ); Async.onreadystatechange = function(){ if( Async.readyState == 4 && Async.status == 200 ){ alert( Async.responseText ); } } /************************************* test.php側 *************************************/ <?PJP Print( "こんにちは" ) ; ?>
- 締切済み
- PHP
お礼
think49さん 遅れましたが、回答ありがとうございました。 頂いた回答を元に下記仕様書も参照し、より深く回答内容を理解できました。 https://xhr.spec.whatwg.org/#garbage-collection 本当にありがとうございました。