javascript - 非推奨 - jquery ajax 強制 終了




jQueryを使用してAjaxリクエストを中止する (12)

AJAXリクエストは、開始された順に完了しないことがあります。 中断するのではなく、最新の応答を除くすべてのAJAX応答を無視することができます。

  • カウンターを作成する
  • AJAXリクエストを開始するときにカウンタをインクリメントする
  • リクエストの「スタンプ」にcounterの現在の値を使用する
  • 成功コールバックでスタンプをカウンターと比較して、それが最新のリクエストかどうかを確認します

コードの概要:

var xhrCount = 0;
function sendXHR() {
    // sequence number for the current invocation of function
    var seqNumber = ++xhrCount;
    $.post("/echo/json/", { delay: Math.floor(Math.random() * 5) }, function() {
        // this works because of the way closures work
        if (seqNumber === xhrCount) {
            console.log("Process the response");
        } else {
            console.log("Ignore the response");
        }
    });
}
sendXHR();
sendXHR();
sendXHR();
// AJAX requests complete in any order but only the last 
// one will trigger "Process the response" message

jsFiddleのデモ

jQueryを使用して、私はまだ応答を受け取っていないAjaxリクエストキャンセル/中止できますか?


ajax.abort()を使用すると、保留中のAjaxリクエストを中止してから、このような別のAjaxリクエストを送ることができます

//check for existing ajax request
if(ajax){ 
 ajax.abort();
 }
//then you make another ajax request
$.ajax(
 //your code here
  );

xhr.abort(); ページリロードを引き起こし、

次に、中止する前にonreadystatechangeを設定して、 onreadystatechangeことを防ぐことができます。

// ↓ prevent page reload by abort()
xhr.onreadystatechange = null;
// ↓ may cause page reload
xhr.abort();

あなたが呼び出したものを配列に保存し、それぞれに対してxhr.abort()を呼び出します。

大規模な警告:要求を中止することはできますが、それはクライアント側だけです。 サーバー側は依然として要求を処理している可能性があります。 セッションデータにPHPやASPのようなものを使用している場合、セッションデータはajaxが終了するまでロックされます。 したがって、ユーザーがウェブサイトを閲覧し続けることを可能にするには、 session_write_close ()を呼び出さなければなりません。 セッションを保存してロックを解除し、続行を待つ他のページが進むようにします。 これがなければ、いくつかのページがロックが削除されるのを待つことができます。


この問題を回避するだけで、3つの異なるアプローチをテストしました。

  1. @ meouwが提案したようにリクエストをキャンセルします
  2. すべてのリクエストを実行するが、最後のサブミットの結果のみを処理する
  3. 別のものがまだ保留中である限り、新しい要求を防ぎます

var Ajax1 = {
  call: function() {
    if (typeof this.xhr !== 'undefined')
      this.xhr.abort();
    this.xhr = $.ajax({
      url: 'your/long/running/request/path',
      type: 'GET',
      success: function(data) {
        //process response
      }
    });
  }
};
var Ajax2 = {
  counter: 0,
  call: function() {
    var self = this,
      seq = ++this.counter;
    $.ajax({
      url: 'your/long/running/request/path',
      type: 'GET',
      success: function(data) {
        if (seq === self.counter) {
          //process response
        }
      }
    });
  }
};
var Ajax3 = {
  active: false,
  call: function() {
    if (this.active === false) {
      this.active = true;
      var self = this;
      $.ajax({
        url: 'your/long/running/request/path',
        type: 'GET',
        success: function(data) {
          //process response
        },
        complete: function() {
          self.active = false;
        }
      });
    }
  }
};
$(function() {
  $('#button').click(function(e) {
    Ajax3.call();
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="button" type="button" value="click" />

我々の場合、アプローチ#3を使用することを決定しました。これは、サーバーの負荷を軽減するためです。 しかし、jQueryが.complete()メソッドの呼び出しを保証すれば、デッドロック状況が発生する可能性は100%ではありません。 私たちのテストでは、このような状況を再現できませんでした。


これは非同期リクエストです。送信されると、そこに送信されます。

サーバーがAJAXリクエストのために非常に高価な操作を開始している場合は、サーバーを開いてキャンセル要求をリスンし、サーバーに何をしているのかを知らせる別のAJAX要求を送信します。

それ以外の場合は、単にAJAXの応答を無視してください。


それを行う信頼できる方法はなく、要求がいったんやって来ると、私はそれを試してみません。 合理的に反応する唯一の方法は、応答を無視することです。

XHRが返されるまでボタンをブロックするか、別のヒントを実行している間に新しいXHRをトリガーしないようにするなど、多くのオプションがあります。保留中のXHR応答を破棄するか、最近のXHR応答を破棄します。


ちょうどxhrを呼び出してください。 jquery ajaxオブジェクトであるか、ネイティブXMLHTTPRequestオブジェクトであるかに関係なく、 abort()を実行します。

例:

//jQuery ajax
$(document).ready(function(){
    var xhr = $.get('/server');
    setTimeout(function(){xhr.abort();}, 2000);
});

//native XMLHTTPRequest
var xhr = new XMLHttpRequest();
xhr.open('GET','/server',true);
xhr.send();
setTimeout(function(){xhr.abort();}, 2000);

スレッド上の多くの人々が注意しているように、要求がクライアント側で中止されただけで、サーバーは依然として要求を処理します。 これは、フロントエンドでのリッスンをやめた作業を行っているため、サーバーに不必要な負荷がかかります。

私が解決しようとしていた問題は、ユーザーが入力フィールドに情報を入力したときに、Googleインスタントタイプの感情のリクエストを発したいということでした。

不要なリクエストを発したり、フロントエンドのスナップを維持したりするのを避けるために、私は次のようにしました。

var xhrQueue = [];
var xhrCount = 0;

$('#search_q').keyup(function(){

    xhrQueue.push(xhrCount);

    setTimeout(function(){

        xhrCount = ++xhrCount;

        if (xhrCount === xhrQueue.length) {
            // Fire Your XHR //
        }

    }, 150);

});

これは本質的に150msごとに1つのリクエストを送信します(自分のニーズに合わせてカスタマイズできる変数)。 正確に何が起こっているのか理解できない場合は、 xhrCountxhrQueueをifブロックの直前にコンソールに記録してxhrCount


ライブ検索ソリューションを実行していて、最新の/最新のリクエストよりも長くかかる可能性がある保留中のリクエストを取り消す必要がありました。

私の場合、私はこのようなものを使用しました:

//On document ready
var ajax_inprocess = false;

$(document).ajaxStart(function() {
ajax_inprocess = true;
});

$(document).ajaxStop(function() {
ajax_inprocess = false;
});

//Snippet from live search function
if (ajax_inprocess == true)
{
    request.abort();
}
//Call for new request 

私はAJAXリクエストをキャンセルする方法を示すdemoを共有しました。データがあらかじめ定義された待機時間内にサーバーから返されない場合です。

HTML:

<div id="info"></div>

JSコード:

var isDataReceived= false, waitTime= 1000; 
$(function() {
    // Ajax request sent.
     var xhr= $.ajax({
      url: 'http://api.joind.in/v2.1/talks/10889',
      data: {
         format: 'json'
      },     
      dataType: 'jsonp',
      success: function(data) {      
        isDataReceived= true;
        $('#info').text(data.talks[0].talk_title);        
      },
      type: 'GET'
   });
   // Cancel ajax request if data is not loaded within 1sec.
   setTimeout(function(){
     if(!isDataReceived)
     xhr.abort();     
   },waitTime);   
});

私はポーリングの問題を抱えていましたが、ページが閉じられると、私の原因で、ajaxリクエストを殺したにもかかわらず、ユーザーがmysql値がページ終了後の50秒間に設定されているので、 $ _SESSIONを使用してvarを設定すると、ポーリングが終了して新しいものが開始するまで更新されません。したがって、データベース内の値を0 =オフページに設定しました。ポーリング私はその行を照会し、falseを返します。 ポーリングでクエリを実行すると、現在の値が明らかに取得されるため、0のとき

私はこれが助けて欲しい





ajax