JQuery ব্যবহার করে অ্যাজাক্স অনুরোধ বাতিল করুন


1827

JQuery ব্যবহার করে, আমি কীভাবে একটি অ্যাজাক্স অনুরোধ বাতিল / বাতিল করতে পারি যে আমি এখনও সাড়া পাইনি?


2
হয়তো আমি প্রশ্নটি ভুল বুঝেছি, তবে আপনি কি সহজভাবে ব্যবহার করতে পারবেন না $.ajaxStop?
লুক মাধাঙ্গা

17
@LukeMadhanga; আমি মনে করি ajaxStopকেবলমাত্র সমস্ত AJAX অনুরোধগুলি সম্পূর্ণ হলে এটি সনাক্ত করে, এটি কোনও অনুরোধ থামায় না। আমার অভিজ্ঞতা, আপনি এটা ভালো ব্যবহার করেন: $(document).ajaxStop(function(){alert("All done")})। ব্যবহার .abort()করা সেরা বিকল্প।
TheCarver

উত্তর:


1743

বেশিরভাগ jQuery Ajax পদ্ধতিগুলি XMLHttpRequest (বা সমতুল্য) অবজেক্ট দেয়, যাতে আপনি কেবল ব্যবহার করতে পারেন abort()

ডকুমেন্টেশন দেখুন:

  • বাতিল পদ্ধতি ( এমএসডিএন )। বর্তমান এইচটিটিপি অনুরোধ বাতিল করে।
  • abort () ( MDN )। অনুরোধ যদি ইতিমধ্যে প্রেরণ করা হয়ে থাকে তবে এই পদ্ধতিটি অনুরোধটি বাতিল করে দেবে।
var xhr = $.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
    success: function(msg){
       alert( "Data Saved: " + msg );
    }
});

//kill the request
xhr.abort()

আপডেট: jQuery 1.5 হিসাবে প্রত্যাবর্তিত অবজেক্টটি jqXHR নামক নেটিভ XMLHttpRequest অবজেক্টের জন্য একটি মোড়ক। এই বস্তুটি সমস্ত দেশীয় বৈশিষ্ট্য এবং পদ্ধতিগুলি প্রকাশ করে বলে মনে হয় সুতরাং উপরের উদাহরণটি এখনও কাজ করে। দেখুন jqXHR অবজেক্ট (jQuery এর এপিআই ডকুমেন্টেশন)।

আপডেট 2: jQuery 3 হিসাবে, এজ্যাক্স পদ্ধতিটি এখন অতিরিক্ত পদ্ধতিগুলির সাথে একটি প্রতিশ্রুতি ফেরত দেয় (বিসর্জনের মতো), সুতরাং উপরের কোডটি এখনও কাজ করে, যদিও বস্তুটি ফেরত দেওয়া আর xhrকোনও নয় । দেখুন এখানে 3.0 ব্লগে

আপডেট 3 : xhr.abort()এখনও jQuery 3.x এ কাজ করে। আপডেট 2 টি সঠিক বলে ধরে নিবেন না । JQuery গিথুব সংগ্রহশালা সম্পর্কে আরও তথ্য


12
এটি আপনার ব্রাউজারে 'থামুন' বোতামটি ক্লিক করার মতো। এটি অনুরোধ বাতিল করে। এরপরে আপনি অন্য অনুরোধের জন্য একই এক্সএইচআর অবজেক্টটি পুনরায় ব্যবহার করতে পারেন।
মিউউ

65
@ ব্র্যাড দুর্ভাগ্যক্রমে, abortসার্ভারের সাথে একটি প্রতিষ্ঠিত সংযোগ বন্ধ করে না, তাই successএখনও বলা হবে। দীর্ঘ ভোটদানের মাধ্যমে ধূমকেতুর বাস্তবায়নের জন্য এটি খুব সমস্যাযুক্ত।
পেপकिन 88

6
@ আরভওয়াল্টার আপনি অন্য একটি অনুরোধ প্রেরণ করতে পারেন যা আগেরটি বাতিল করে দেয়।
আসাদ সাইদুদ্দিন

8
আমার পরীক্ষাগুলিতে, অনুরোধটি ব্রাউজারে বাতিল করা হয়, তবে .fail () পদ্ধতিটি একটি jqXHR, স্থিতি = 0, এবং jqXHR, স্থিতিমাটিস = "গর্ভপাত"
বিজে

9
.abort()এখনও আমার জন্য jQuery 3.2.1 এ কাজ করে। কোনও জিকিউরি কোর দলের সদস্য সম্পর্কিত গিথুব ইস্যুতে এই মন্তব্যটি বোঝায় যে এই উত্তরটি ভুল এবং এটি .abort() সরানো হয়নি।

117

আপনি অনুরোধটি প্রত্যাহার করতে পারবেন না তবে আপনি একটি সময়সীমা মান সেট করতে পারেন যার পরে প্রতিক্রিয়া উপেক্ষা করা হবে। Jquery AJAX বিকল্পগুলির জন্য এই পৃষ্ঠাটি দেখুন । আমি বিশ্বাস করি যে সময়সীমা পেরিয়ে গেলে আপনার ত্রুটি কলব্যাক কল করা হবে। প্রতিটি এজেএক্স অনুরোধে ইতিমধ্যে একটি ডিফল্ট সময়সীমা রয়েছে।

এছাড়াও আপনি ব্যবহার করতে পারেন পরিত্যাগ () অনুরোধ বস্তুর উপর পদ্ধতি কিন্তু, যখন তা ক্লায়েন্ট ইভেন্টের জন্য শোনা করা বন্ধ করে দিতে হবে, এটি হতে পারে সম্ভবত প্রক্রিয়াকরণের থেকে সার্ভার বন্ধ হবে না।


74

এটি একটি অ্যাসিঙ্ক্রোনাস অনুরোধ, অর্থ এটি পাঠানোর পরে এটি বাইরে চলে যায়।

যদি আপনার সার্ভারটি এজ্যাক্সের অনুরোধের কারণে খুব ব্যয়বহুল ক্রিয়াকলাপ শুরু করছে, আপনি যা করতে পারেন তা হ'ল আপনার সার্ভারটি বাতিলকরণের অনুরোধের জন্য শোনার জন্য খুলুন এবং সার্ভারকে যা কিছু করা হচ্ছে তা বন্ধ করার জন্য একটি পৃথক এজেএক্স অনুরোধ প্রেরণ করুন।

অন্যথায়, কেবল এজেএক্স প্রতিক্রিয়াটিকে উপেক্ষা করুন।


48
এই প্রসঙ্গে, অ্যাসিঙ্ক্রোনাসের সহজভাবে অনুরোধটি স্ক্রিপ্টের প্রবাহকে বাধা দেয় না। অনুরোধটি সম্পন্ন হওয়ার আগে ব্রাউজারগুলির এখন সময়ের আগেই অনুরোধটি বাতিল করতে হবে।
এলিফ্যান্টহান্টার

4
কীভাবে আমরা সার্ভারে বাতিল অনুরোধ পাঠাতে পারি? আমি বুঝতে পারছি না যে সার্ভারটি কীভাবে প্রক্রিয়া বন্ধ করার অনুরোধ জানবে? আপনি একটি উদাহরণ দিতে পারেন? ধন্যবাদ.
ভাগ্যবান সনি

3
@ লাকিসনি, এলিফ্যান্টহান্টার কেবল ক্লায়েন্ট-সাইড সম্পর্কে আলোচনা করছেন। সার্ভারটি কোনও একটি অনুরোধের দ্বারা প্রভাবিত হবে না
ক্লোর

4
@ ক্লোর, যদি অনুরোধটি এখনও সার্ভার (f.ex. বৃহত্তর মাল্টপার্ট অনুরোধগুলি) দ্বারা পুনরুদ্ধার না করা হয়, ক্লায়েন্টটি সকেটটি বন্ধ করতে পারে এবং সার্ভারটি প্রভাবিত হবে।
সাদা

4
পিএইচপি স্বয়ংক্রিয়ভাবে বাতিল হওয়া অনুরোধগুলির জন্য চেক করে এবং স্বয়ংক্রিয়ভাবেও শেষ করে। দেখুন php.net/manual/en/function.ignore-user-abort.php
hanshenrik

68

অ্যারেতে করা কলগুলি সংরক্ষণ করুন, তারপরে প্রত্যেককে xhr.abort () কল করুন।

বিশাল কাভিট: আপনি একটি অনুরোধ বাতিল করতে পারেন, তবে এটি কেবল ক্লায়েন্টের পক্ষ। সার্ভার পক্ষটি এখনও অনুরোধটি প্রক্রিয়াকরণ করতে পারে। আপনি যদি সেশন ডেটা সহ পিএইচপি বা এএসপি জাতীয় কিছু ব্যবহার করে থাকেন, এজ্যাক্স শেষ না হওয়া পর্যন্ত সেশন ডেটা লক হয়ে যায়। সুতরাং, ব্যবহারকারীকে ওয়েবসাইট ব্রাউজিং চালিয়ে যাওয়ার অনুমতি দিতে, আপনাকে সেশন_উইটার_ক্লোজ () কল করতে হবে । এটি সেশনটি সংরক্ষণ করে এবং এটি আনলক করে যাতে চালিয়ে যাওয়ার অপেক্ষায় থাকা অন্যান্য পৃষ্ঠাগুলি এগিয়ে যেতে পারে। এটি না করে বেশ কয়েকটি পৃষ্ঠাগুলি লকটি অপসারণের অপেক্ষায় থাকতে পারে।


যেহেতু আপনি সর্বদা পূর্ববর্তীটিকে বাতিল করেন, আপনি কি সর্বদা এটি করতে পারবেন না? (এবং কোনও অ্যারে ব্যবহার করার দরকার নেই)
অযৌক্তিকতা

60

এজেএক্স অনুরোধগুলি তারা শুরু করা ক্রমে সম্পূর্ণ নাও হতে পারে। গর্ভপাত বাদ দেওয়ার পরিবর্তে, আপনি সাম্প্রতিকতম বাদে সমস্ত এজেএক্স প্রতিক্রিয়া উপেক্ষা করতে পছন্দ করতে পারেন :

  • একটি কাউন্টার তৈরি করুন
  • আপনি যখন এজেএক্স অনুরোধ শুরু করেন তখন কাউন্টারটি বাড়ান
  • অনুরোধটিকে "স্ট্যাম্প" করতে কাউন্টারটির বর্তমান মানটি ব্যবহার করুন
  • সাফল্যের কলব্যাকে স্ট্যাম্পটি কাউন্টারটির সাথে তুলনা করুন এটি সর্বাধিক সাম্প্রতিক অনুরোধ কিনা তা পরীক্ষা করে দেখুন

কোডের রুক্ষ রূপরেখা:

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

JsFizz এ ডেমো


এক্সএইচআর অনুরোধ বাতিল করার সতর্কতার কারণে (এই পৃষ্ঠায় অন্যান্য মন্তব্য দেখুন), এটি সম্ভবত সেরা এবং সহজ বিকল্প।
কুইন কমেন্ডেন্ট

41

আমাদের কেবল এই সমস্যাটি নিয়ে কাজ করতে হয়েছিল এবং তিনটি ভিন্ন পদ্ধতির পরীক্ষা করা হয়েছিল।

  1. @ মিউ প্রস্তাবিত অনুরোধ বাতিল করে না
  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 ব্যবহার করার সিদ্ধান্ত নিয়েছি কারণ এটি সার্ভারের জন্য কম লোড তৈরি করে। তবে আমি যদি 100% নিশ্চিত নই তবে jQuery যদি। কমপ্লিট () - পদ্ধতির কলটির গ্যারান্টি দেয় তবে এটি একটি অচলাবস্থার পরিস্থিতি তৈরি করতে পারে। আমাদের পরীক্ষায় আমরা এমন পরিস্থিতি পুনরুত্পাদন করতে পারিনি।


36

এটির মতো কিছু করা সর্বদা সেরা অনুশীলন।

var $request;
if ($request != null){ 
    $request.abort();
    $request = null;
}

$request = $.ajax({
    type : "POST", //TODO: Must be changed to POST
    url : "yourfile.php",
    data : "data"
    }).done(function(msg) {
        alert(msg);
    });

তবে আপনি যদি এজেন্টের অনুরোধটি বাতিল বা না হয় কিনা তা পরীক্ষা করতে যদি একটি বিবৃতি পরীক্ষা করেন তবে এটি আরও ভাল।


2
অনুরোধটি ইতিমধ্যে চালু আছে কিনা তাও আমি যাচাই করি তবে এটি হালকা হওয়ায় আমি বুলিয়ান ব্যবহার করি।
অনুগ্রহ করে

15

শুধু এক্সএইচআর কল করুন। বাতিল () এটি jquery আজাক্স অবজেক্ট বা নেটিভ XMLHTTPRequest অবজেক্ট কিনা।

উদাহরণ:

//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);

13

আমি একটি লাইভ অনুসন্ধান সমাধান করছিলাম এবং মুলতুবি থাকা অনুরোধগুলি বাতিল করতে হয়েছিল যা সর্বশেষ / সর্বাধিক বর্তমান অনুরোধের চেয়ে বেশি সময় নিয়েছে।

আমার ক্ষেত্রে আমি এরকম কিছু ব্যবহার করেছি:

//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 

12

থ্রেডে থাকা অনেক লোক যেমন উল্লেখ করেছেন, কেবলমাত্র অনুরোধটি ক্লায়েন্ট-সাইডে বাতিল করা হয়েছে তাই সার্ভারটি এখনও অনুরোধটি প্রক্রিয়া করবে। এটি সার্ভারে অপ্রয়োজনীয় বোঝা তৈরি করে কারণ এটি এমন কাজ করে যা আমরা প্রথম প্রান্তে শোনা ছেড়ে দিয়েছি।

আমি যে সমস্যাটি সমাধান করার চেষ্টা করছিলাম (এটি অন্যরাও চালাতে পারে) হ'ল ব্যবহারকারী যখন কোনও ইনপুট ক্ষেত্রে তথ্য প্রবেশ করায় আমি গুগল তাত্ক্ষণিক ধরণের অনুভূতির অনুরোধটি বন্ধ করে দিতে চাইতাম।

অপ্রয়োজনীয় অনুরোধগুলি ছড়িয়ে দেওয়া এবং সম্মুখ-প্রান্তের স্ন্যাপ বজায় রাখতে, আমি নিম্নলিখিতগুলি করেছি:

var xhrQueue = [];
var xhrCount = 0;

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

    xhrQueue.push(xhrCount);

    setTimeout(function(){

        xhrCount = ++xhrCount;

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

    }, 150);

});

এটি প্রতি 150 মিটারে মূলত একটি অনুরোধ প্রেরণ করবে (একটি ভেরিয়েবল যা আপনি নিজের প্রয়োজন অনুসারে কাস্টমাইজ করতে পারেন)। এখানে ঠিক কী ঘটছে তা বুঝতে যদি আপনার সমস্যা হয় তবে লগ করুন xhrCountএবং xhrQueueইফ ব্লকের ঠিক আগে কনসোলে যান।


11

কেবলমাত্র ajax.abort () ব্যবহার করুন উদাহরণস্বরূপ আপনি এই জাতীয় অন্য কোনও প্রেরণের আগে কোনও মুলতুবি থাকা এজাক্স অনুরোধ বাতিল করতে পারেন

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

11

আপনি এটি ব্যবহার করে যে কোনও অবিচ্ছিন্ন এজাক্স কলটি বাতিল করতে পারেন

<input id="searchbox" name="searchbox" type="text" />

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">
     var request = null;
        $('#searchbox').keyup(function () {
            var id = $(this).val();
            request = $.ajax({
                type: "POST", //TODO: Must be changed to POST
                url: "index.php",
                data: {'id':id},
                success: function () {

                },
                beforeSend: function () {
                    if (request !== null) {
                        request.abort();
                    }
                }
            });
        });

</script>

10

এটি করার কোনও নির্ভরযোগ্য উপায় নেই এবং একবার অনুরোধটি চলতে থাকলে আমি এটিও চেষ্টা করে দেখব না; শুধুমাত্র যুক্তিসঙ্গতভাবে প্রতিক্রিয়া উপায় হয় উপেক্ষা করা প্রতিক্রিয়া।

বেশিরভাগ ক্ষেত্রে, এটি এমন পরিস্থিতিতে ঘটতে পারে যেমন: কোনও ব্যবহারকারী একাধিকবার এক্সএইচআর ট্রিগারকারী একটি বোতামে প্রায়শই ক্লিক করে, আপনার কাছে অনেক বিকল্প রয়েছে, হয় এক্সএইচআর ফিরে না আসা পর্যন্ত বোতামটি ব্লক করুন, বা অন্য কোনও ইঙ্গিত চলতে থাকা অবস্থায় নতুন এক্সএইচআরটিকে ট্রিগারও করবেন না another ব্যবহারকারী পিছনে ঝুঁকিতে পড়ুন - বা কোনও বিচারাধীন এক্সএইচআর প্রতিক্রিয়া বাদ দিন তবে সাম্প্রতিক।


7

নিম্নলিখিত কোডটি একটি অ্যাজাক্স অনুরোধ বাতিল করার পাশাপাশি আরম্ভ করাও দেখায়:

function libAjax(){
  var req;
  function start(){

  req =    $.ajax({
              url: '1.php',
              success: function(data){
                console.log(data)
              }
            });

  }

  function stop(){
    req.abort();
  }

  return {start:start,stop:stop}
}

var obj = libAjax();

 $(".go").click(function(){


  obj.start();


 })



 $(".stop").click(function(){

  obj.stop();


 })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="go" value="GO!" >
   <input type="button" class="stop" value="STOP!" >

5
এটি কীভাবে প্রশ্নটি সমাধান করে তার একটি ব্যাখ্যা সরবরাহ করুন। এটি ওপি এবং অন্যান্য ভবিষ্যত অনুসন্ধানকারীদের সহায়তা করবে।
SnareChops

5

আমার পোলিংয়ের সমস্যা ছিল এবং একবার পৃষ্ঠাটি বন্ধ হয়ে যাওয়ার পরে পোলটি অব্যাহত ছিল তাই আমার কারণে কোনও ব্যবহারকারী একটি আপডেট মিস করবেন কারণ পৃষ্ঠা বন্ধ হওয়ার পরের 50 সেকেন্ডের জন্য মাইএসকিএল মান নির্ধারণ করা হচ্ছিল, যদিও আমি এজ্যাক্স অনুরোধটিকে হত্যা করেছি, আমি চারপাশে ভেবে দেখেছি, কোনও ভেরি সেট করার জন্য $ _SESSION ব্যবহার করে পোলটিতে এটি শেষ না হওয়া অবধি নতুন আপডেট হবে না এবং নতুন শুরু না হওয়া পর্যন্ত আমি যা করেছি তা আমার ডাটাবেসে 0 = অফপেজ হিসাবে সেট করা হয়েছে, আমি যখন ছিলাম পোলিং আমি সেই সারিটি জিজ্ঞাসা করি এবং মিথ্যা ফিরে আসি; ভোটদানের ক্ষেত্রে জিজ্ঞাসাবাদ করার মতো 0 হওয়ার পরে আপনি স্পষ্টতই বর্তমান মান পাবেন ...

আমি আশা করি এটি সাহায্য করেছে


5

যদি xhr.abort(); পৃষ্ঠা পুনরায় লোডের কারণ হয়,

তারপরে আপনি onreadystatechangeআটকা পড়ার আগে সেট করতে পারেন :

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

4

আমি একটি ডেমো ভাগ করে নিয়েছি যা দেখায় যে কীভাবে AJAX অনুরোধ বাতিল করবেন - যদি ডেটা সার্ভার থেকে পূর্বনির্ধারিত অপেক্ষার সময়ের মধ্যে ফেরত না দেওয়া হয়।

এইচটিএমএল:

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

জেএস কোড:

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);   
});

1
$.ajaxএকটি timeoutবিকল্প সরবরাহ করে যাতে আপনার নিজের লেখার দরকার নেই। সহজভাবে ব্যবহার ..., data: {...}, timeout: waitTime,...
ব্রাম ভ্যানরোয়
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.