• 締切済み

JQueryでAjax通信をキャンセルした時につて

JQueryでAjax通信時に、abort()でキャンセルを行うと通信はキャンセルになっているようですが、 サーバー側(Ajaxで呼ばれた処理)は、最後まで処理されてしまいます。 abort()を実行させた時に、サーバー側の処理まで中断させる方法はありますでしょうか? 実行と中止は以下のような感じで書いています。 Ajax実行 arrXhr = $.ajax({ dataType: "json", type: "POST", url: "xxxxxxx.php", async: true, cache: false, data: sendData, success: function ( data ) { }, error: function ( XMLHttpRequest, textStatus, errorThrown ) { } }); 中止 xhr.abort();

  • AJAX
  • 回答数2
  • ありがとう数1

みんなの回答

  • 1in99per
  • ベストアンサー率0% (0/0)
回答No.2

環境に依ると思いますが可能です。 例えば、以下のPHPのスクリプトは60秒間動作しますが、ブラウザ側で読み込みを中止(×をクリックする等)すると、すぐに停止します。(test.txtの更新が止まる事で確認できます。) <?php $fp = fopen('test.txt', 'w'); for ($i = 0; $i < 60; $i++) { @fwrite($fp, 'A'); sleep(1); print("\n"); } fclose($fp); ?> Apacheは、レスポンス時にクライアントとの接続が中断されていると、当該プロセスを終了させる、という動作をするためです。 スクリプト内の“print("\n");”で定期的に出力させているのはそのためです。この“print("\n");”が無い場合は、ブラウザ側の読み込みを中止しても60秒間動作し続けます。(text.txtの更新が60bytesになるまで止まりません。) ecaihさんが実現したい“abort()を実行させた時に、サーバー側の処理まで中断”についても、同様の方法で実現できると思います。 私が実際に行っているのは、Comet処理用のサーバ側スクリプトにて、サーバ側でのイベント発生を待つ間は定期的に改行"\n"を出力しています。改行であれば、JSONコンテンツへの影響が無いためです。 また、PHPでは試す事ができておりませんが、サーバ側の処理中断時に何らかの終了処理をさせたければPIPEシグナルを捕捉する事で実現できるかもしれません。Apacheがプロセスを終了させる際、当該プロセスにPIPEシグナルを発生させるためです。 ※私の環境ではpcntl_signalが使えなかったため試せませんでしたが、本関数によりSIGPIPEを捕捉する事で試してみてください。

noname#138894
noname#138894
回答No.1

ブラウザ側の処理が止まってもサーバとしてはそれを関知出来ないので 処理は止まりません。 逆に考えると、何らかの方法でサーバに処理の停止を命令してやればいいので 大まかには 0.何らかの方法で任意の実行中の処理を停止するプログラムをサーバ側に書く 1.処理開始時にサーバで処理停止用のキー的なものを発行してブラウザに渡す 2.処理中断時にそのキーをサーバに渡して任意の処理を停止するリクエストを投げる みたいな感じでしょうか。 他の人が走らせてる処理を止められないように考慮する必要があったりで 実際に作ると結構大変な気がします。

関連するQ&A

  • jquery ajax 外部html 読み込み

    現在、数年前にjquery(v1.4.3)を用いて制作したページの更新を行っており それに伴いjqueryも最新版(v1.11.1)への移行を試している最中なのですが ajaxの外部htmlを読み込む処理が実行されなくなり困っております。 旧バージョンとではメソッドの記述法が異なることは理解できておりますが 色々と書き換えてみたものの、以前のように動作させる事ができません。 以下がそれぞれの記述になりますが、もし問題にお気付きになられましたら ご指摘いただけますと幸いです。 jquery(v1.4.3): function loadAdd(obj){ $.ajax({ async: true, type: 'GET', url: tgtURL, dataType: 'html', cache: false, success: function(html){ var $div = $("#add"); $div.html(html); }, error: function(xhr, status, errorThrown){ alert("not found."); } }); } jquery(v1.11.1): function loadAdd(obj){ $.ajax({ async: true, type: 'GET', url: tgtURL, dataType: 'html', cache: false, }) .done(function(html){ var $div = $("#add"); $div.html(html); }) .fail(function(xhr, status, errorThrown){ alert("not found."); }); }

    • ベストアンサー
    • AJAX
  • AJAXの書き方について

    <script type="text/javascript"> $( function() { $( '#ajax-button' ) .click( function() { $.ajax({ url: 'http://localhost:8080/app/family', type:'GET', data: {test1 : 'aaa', test2 : 'bbb' }, dataType: 'jsonp', success: function(data) { alert("ok"); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("ng"); } }); }); } ); </script> この部分は何を意味しているのでしょうか? $( '#ajax-button' ) .click( またここの部分をIDにして二つ別々のIDを書いてblur(fn()にしたい場合はどうすればいいのでしょうか? $("[id$=NO]").blur(function(){ $("[id$=NM]").blur(function(){ function() { $.ajax({ url: 'http://localhost:8080/app/family', type:'GET', data: {test1 : 'aaa', test2 : 'bbb' }, dataType: 'jsonp', success: function(data) { alert("ok"); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("ng"); } }); }); }); }); このようにしても動きません。 正しい書き方を教えていただきたいです。

  • 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です。

  • jQueryで複数ファイル読み込みを検知する方法

    jQueryでHTTP通信でjsonファイルを取得する場合、 ファイルが一つだけなら $.ajax({ url: path, type: "GET", dataType: "json", success: function(json, status, xhr) { }, error: function(xhr, status, errorThrown) { }, complete: function(xhr, status) { } }); のようにsuccessコールバックなどでデータを取得すればよいのですが 複数ファイルをajax()により取得し、全てのファイルダウンロードが完了したのを 待ってから処理を走らせたい場合どうすればよいのかわかりません。 任意の型のイベントを発生させて、それに対するハンドラ割り当てができればよいのですが javascriptに不慣れなこともあり、調べてもその方法がわかりませんでした。

  • JQueryはAJAXとは無関係??

    質問◆JQueryおよびJQueryMobileは「AJAX」とは無関係なのでしょうか? 「JQueryMobileを使っているとき、DOMによってHTMLを動的に差し替えている」という認識なのですが、 特にRequest関連の記載をJavaScriptで記載していない限り、AJAXの処理は行われないのでしょうか? それとも、 JQuery Mobileを使っている場合は、ページ遷移などで、プログラマが意識していなくても(独自にプログラムを書いていなくても) AJAXの処理が行われているのでしょうか? /************************************/ サーバへのリクエストはなくても、1つのマシン内の、HTMLファイルとHTMLファイルの間で、 HTTPで通信がされるということはないと思っています。 (※基本、HTTPはクライアントとサーバの間のときしか使われないのですよね?) JQueryの技術情報のサイトを見ていると、 よく「document.ready」と書かれていたりするソースを見かけますが、 これはAjaxとは関係なく(通信とは関係なく)、 また「xhr.send」も書かれていないHTMLは、AJAXは使われないという理解です。 (「Form、submit」とも関係がない) XMLHttpRequestも「HttpRequest」とあるわけですし、 「Form、submit」を書いているときに行われるわけではないけれども、かわりに、 「xhr.send」とJavaScriptで実行されたタイミングで走る処理であり、 その際、「サーバから返される情報がXMLのデータ形式で(XML以外もですが、、)」だという理解なのですが、合っていますでしょうか?

    • ベストアンサー
    • AJAX
  • jquery PHP 値 ajax

    失礼します。現在jqueryで作成した2次元配列をPHP側に渡したいのですが上手くいきません。 jquery側のコンソールで確認した際にはsuccessの処理が行われ配列の中身がjson形式で表示されるのですが、その内容をPHP側で確認しようとするとNULLが返ってきてしまいます。 何卒ご教授よろしくお願いいたします。 html側 $(function(){ // 送るデータ形式はJSONでなければ、PHP側でエラーが出る.のでJSON.stringify()でJSON形式に変換 send_data= JSON.stringify(data); // 送信処理 $.ajax({ url: "ajax.php", // 送信先のPHP type: "POST", // POSTで送る contentType: "Content-Type: application/json; charset=UTF-8", //必須ではなさそうだが、サーバ側との整合のために明示しておいた方がよい。 // dataType: 'json', //受信形式 必須ではなさそうだがサーバ側との整合のために明示しておいた方がよい。 data:send_data //JSON形式の送信データ }).success(function(data, status, xhr) { // 通信成功時の処理 console.log("success"); console.log("data ="+data); console.log("status ="+status); console.log("xhr ="+xhr); }).error(function(xhr, status, error) { // 通信失敗時の処理 console.log("error"); }).complete(function(xhr, status) { // 通信完了時の処理 console.log("fin"); }); }) }) PHP側 二通り試してみました。 <?php //php://inputはPOSTの生データを取得できる $json = file_get_contents("php://input"); //JSON形式データをPHPの配列型に変換 $data = json_decode($json); var_dump($data) ; //POSTできたデータを格納 $hoge = $_POST['data']; var_dump($hoge);

    • ベストアンサー
    • AJAX
  • ajaxが難しいです。

    1 if (xhr.status === 200) { result.textContent = xhr.responseText; の部分がわからないのですが 自分で作った変数resultの中に通信に両方成功した場合サーバ側のPHPが生成したDOM要素を代入するという事をやっているのでしょうか? その結果、処理結果を表記するhtml<div id="result"></div>の中に、代入された中身が表記されるという事ですか? 2 下記の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生成という事ですか?

  • ajax 通信成功時

    ajaxで通信成功時のみに、通信終了後に関数を実行したいです。 通信が成功・失敗どちらでも、終了後に実行はcompleteでできますが、 成功時のみは、どのように書けばよいでしょうか? よろしくお願いします。 $.ajax({ type: 'GET', success: function () { 略 }, error:function(){ } }

  • jquery,ajaxによるphp通信でnull

    初めまして。 現在jqueryを勉強中の学生です。 いろいろなサイトを参考にしつつ、試しににjquery・ajaxを使ったphpとの通信を試みているのですが、文字列のやりとりがうまくいきません。 数字ではうまくいくのですが、文字になるとalertの部分でnullと返されてしまいます。 アドバイス等頂ければと思います。 よろしくお願いいたします。 以下部分的ではありますがコードを示します。 (jqueryはjquery-1.11.1.min.jsを使用) [js] $.ajax({ type: "POST", url: "step1.php", data: send_data, success: function(receive_data) { var parseAr = JSON.parse(receive_data); alert(parseAr[0]['name']); }, error: function(XMLHttpRequest, textStatus, errorThrown) {alert('Error: ' + errorThrown); } }); return false; [php側] <?php if(isset($_POST['name'])) { $result = array(); $result[] = array('name'=>'織田', 'age'=>'33'); $result[] = array('name'=>'織田', 'age'=>'33'); echo json_encode($result); } else { echo json_encode('The parameter of "name" is not found.'); } exit; ?>

  • ajaxの結果をphpで取得する方法

    お世話になっております。 PHPは全くの初心者ですが、jqueryのajaxでGETした内容を PHPでも使用したく、ご教示願いたいのですが、 以下のajaxの「info.a」の値をphpで使用するには どうすればよいでしょうか。 $.ajax({ type: 'GET', scriptCharset:'utf-8', url: '/hoge.jsp', dataType: 'text', cache : false, }) .success(function(data){ var data = data.split(','); info = { a :data[0], b :data[1], }; }) .error(function(XMLHttpRequest, textStatus, errorThrown) { return false; }); <?php $a = $_GET['info.a']; ?> 何卒よろしくお願いいたします。

    • ベストアンサー
    • PHP

専門家に質問してみよう