JQuery का उपयोग करके अजाक्स अनुरोधों को रद्द करें

1827

JQuery का उपयोग करते हुए, मैं एक अजाक्स अनुरोध को कैसे रद्द / निरस्त कर सकता हूं जिसे मुझे अभी तक प्रतिक्रिया नहीं मिली है?

javascript jquery ajax

— lukewm
स्रोत

2

हो सकता है कि मैंने इस सवाल को गलत समझा हो, लेकिन क्या आप बस इस्तेमाल नहीं कर सकते $.ajaxStop?

— ल्यूक माधंगा

17

@LukeMadhanga; मुझे लगता है कि ajaxStopकेवल तभी पता चलता है जब सभी AJAX अनुरोध पूर्ण होते हैं, यह एक अनुरोध को रोक नहीं पाता है। मेरे अनुभव में, आप इसे इस तरह उपयोग करेंगे $(document).ajaxStop(function(){alert("All done")}):। का उपयोग करना .abort()सबसे अच्छा विकल्प है।

— कर्कर डे

1743

JQuery के अधिकांश Ajax मेथड XMLHttpRequest (या समतुल्य) ऑब्जेक्ट को लौटाते हैं, जिससे आप बस उपयोग कर सकते हैं abort()।

प्रलेखन देखें:

गर्भपात विधि ( MSDN )। वर्तमान HTTP अनुरोध रद्द करता है।
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 के रूप में लौटे ऑब्जेक्ट देशी XMLHttpRequest ऑब्जेक्ट के लिए एक आवरण है जिसे jqXHR कहा जाता है। यह ऑब्जेक्ट सभी मूल गुणों और विधियों को उजागर करने के लिए प्रकट होता है इसलिए उपरोक्त उदाहरण अभी भी काम करता है। देखें jqXHR वस्तु (jQuery API दस्तावेज़)।

अद्यतन 2: jQuery 3 के रूप में, ajax विधि अब अतिरिक्त विधियों (जैसे गर्भपात) के साथ एक वादा लौटाती है, इसलिए उपरोक्त कोड अभी भी काम करता है, हालांकि लौटाया जा रहा ऑब्जेक्ट xhrकोई और नहीं है। यहां 3.0 ब्लॉग देखें ।

अद्यतन 3 : xhr.abort()अभी भी jQuery 3.x पर काम करता है। मान लें कि अद्यतन 2 सही नहीं है। JQuery के Github भंडार पर अधिक जानकारी ।

— meouw
स्रोत

12

यह आपके ब्राउज़र पर 'स्टॉप' बटन पर क्लिक करने जैसा है। यह अनुरोध को रद्द कर देता है। आप किसी अन्य अनुरोध के लिए उसी XHR ऑब्जेक्ट का पुन: उपयोग कर सकते हैं।

— मेव्वा

65

@ ब्रैड दुर्भाग्य से, abortसर्वर के साथ एक स्थापित कनेक्शन को बंद नहीं करता है, इसलिए successइसे अभी भी कहा जाएगा। लंबे मतदान के साथ धूमकेतु के कार्यान्वयन के लिए यह बहुत समस्याग्रस्त है।

— पेप्किन88

6

@ErvWalter आप एक और अनुरोध भेज सकते हैं जो पिछले एक को रद्द करता है।

— असद सईदुद्दीन

8

मेरे परीक्षणों में, ब्राउज़र पर अनुरोध रद्द कर दिया गया है, लेकिन .fail () विधि को एक jqXHR, स्थिति = 0 और jqXHR, statusMessage = "abort" के साथ लागू किया जाता है

— BJ

9

.abort()अभी भी मेरे लिए jQuery 3.2.1 में काम करता है। एक jQuery कोर टीम के सदस्य द्वारा संबंधित github मुद्दे में यह टिप्पणी प्रतीत होता है कि यह उत्तर गलत है और .abort() इसे हटाया नहीं गया था।

— 10

117

आप अनुरोध को याद नहीं कर सकते हैं लेकिन आप एक टाइमआउट मान सेट कर सकते हैं जिसके बाद प्रतिक्रिया को अनदेखा किया जाएगा। Jquery AJAX विकल्पों के लिए यह पृष्ठ देखें । मुझे विश्वास है कि यदि टाइमआउट अवधि पार हो गई है तो आपकी त्रुटि कॉलबैक कहा जाएगा। प्रत्येक AJAX अनुरोध पर पहले से ही डिफ़ॉल्ट टाइमआउट है।

आप अनुरोध ऑब्जेक्ट पर एबोर्ट () विधि का भी उपयोग कर सकते हैं , लेकिन जब यह क्लाइंट को ईवेंट के लिए सुनना बंद कर देगा , तो संभवतः यह सर्वर को इसे संसाधित करने से नहीं रोकेगा।

— tvanfosson
स्रोत

74

यह एक अतुल्यकालिक अनुरोध है, एक बार इसे भेजे जाने के बाद इसका अर्थ है।

यदि आपका सर्वर AJAX अनुरोध के कारण बहुत महंगा ऑपरेशन शुरू कर रहा है, तो आप जो सबसे अच्छा कर सकते हैं, वह रद्द अनुरोधों को सुनने के लिए अपने सर्वर को खोल सकता है, और एक अलग AJAX अनुरोध भेजकर जो कुछ भी हो रहा है उसे रोकने के लिए सर्वर को सूचित करना होगा।

अन्यथा, केवल AJAX प्रतिक्रिया को अनदेखा करें।

— युवल एडम
स्रोत

48

इस संदर्भ में, अतुल्यकालिक का मतलब है कि अनुरोध स्क्रिप्ट के प्रवाह को बाधित नहीं करता है। अनुरोध पूरा होने से पहले ब्राउज़रों के पास समय से पहले अनुरोध को रद्द करने की क्षमता है।

— हाथीहंटर

4

हम सर्वर को रद्द करने का अनुरोध कैसे भेज सकते हैं? मुझे समझ नहीं आ रहा है कि सर्वर को कैसे पता चलेगा कि प्रोसेसिंग रोकने का अनुरोध किया गया है? क्या आप एक उदाहरण दे सकते हैं? धन्यवाद।

— लकी सोनी

3

@LuckySoni, Elephanthunter केवल क्लाइंट-साइड पर चर्चा कर रहा है। सर्वर एक .abort अनुरोध से प्रभावित नहीं होगा

— Kloar

4

@ क्लोअर, अगर रिक्वेस्ट सर्वर (f.ex. बड़े मल्टीपार्ट रिक्वेस्ट) द्वारा अभी तक प्राप्त नहीं हुई है, तो क्लाइंट सॉकेट बंद कर सकता है, और सर्वर प्रभावित होगा।

— सफेद

4

PHP स्वतः निरस्त अनुरोधों के लिए जाँच करता है, और स्वचालित रूप से भी समाप्त हो जाता है। देख php.net/manual/en/function.ignore-user-abort.php

— hanshenrik

68

सरणी में आपके द्वारा किए गए कॉल को सहेजें, फिर प्रत्येक पर xhr.abort () कॉल करें।

विशाल गुफा: आप एक अनुरोध रद्द कर सकते हैं, लेकिन यह केवल ग्राहक पक्ष है। सर्वर पक्ष अभी भी अनुरोध को संसाधित कर सकता है। यदि आप सत्र डेटा के साथ PHP या ASP जैसी किसी चीज़ का उपयोग कर रहे हैं, तो ajax समाप्त होने तक सत्र डेटा लॉक हो जाता है। इसलिए, उपयोगकर्ता को वेबसाइट ब्राउज़ करना जारी रखने के लिए, आपको session_write_close () को कॉल करना होगा । यह सत्र को बचाता है और इसे अनलॉक करता है ताकि जारी रखने के लिए प्रतीक्षा कर रहे अन्य पृष्ठ आगे बढ़ें। इसके बिना, कई पृष्ठ लॉक को हटाने के लिए इंतजार कर सकते हैं।

— तेई
स्रोत

चूंकि आप हमेशा पिछले एक को रद्द करते हैं, क्या आप हमेशा ऐसा नहीं कर सकते? (और एक सरणी का उपयोग करने की आवश्यकता नहीं है)

— 3

60

AJAX अनुरोध उनके द्वारा शुरू किए गए आदेश में पूरा नहीं हो सकता है। गर्भपात के बजाय, आप सबसे हाल के एक को छोड़कर सभी AJAX प्रतिक्रियाओं को अनदेखा करना चुन सकते हैं :

एक काउंटर बनाएं
जब आप AJAX अनुरोध आरंभ करते हैं तो काउंटर बढ़ाएँ
अनुरोध के "मोहर" के लिए काउंटर के वर्तमान मूल्य का उपयोग करें
सफलता कॉलबैक में काउंटर के साथ स्टाम्प की तुलना करने के लिए जाँच करें कि क्या यह सबसे हालिया अनुरोध था

कोड की पर्याप्त रूपरेखा:

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 पर डेमो

— सलमान ए
स्रोत

XHR अनुरोध को रद्द करने के कारण (इस पृष्ठ पर अन्य टिप्पणियाँ देखें), यह शायद सबसे अच्छा और सरल विकल्प है।

— क्विन कंटेंडर

41

हमें बस इस समस्या के आसपास काम करना था और तीन अलग-अलग तरीकों का परीक्षण किया।

@meouw द्वारा सुझाए गए अनुरोध को रद्द करता है
सभी अनुरोध निष्पादित करें लेकिन केवल अंतिम सबमिट के परिणाम को संसाधित करता है
नए अनुरोधों को तब तक के लिए रोकता है जब तक कि एक अन्य अभी भी लंबित है

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 .complete () विधि की कॉल की गारंटी देता है, तो यह एक गतिरोध की स्थिति पैदा कर सकता है। हमारे परीक्षणों में हम ऐसी स्थिति का पुनरुत्पादन नहीं कर सकते थे।

— oyophant
स्रोत

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

लेकिन यह बेहतर है कि अगर आप ajax रिक्वेस्ट को null करने के लिए कोई स्टेटमेंट चेक करते हैं या नहीं।

— थारिन्दु कुमारा
स्रोत

2

मैं यह भी जांचता हूं कि क्या कोई अनुरोध पहले से चल रहा है, लेकिन मैं एक बूलियन का उपयोग करता हूं, क्योंकि यह हल्का है।

— कृपया यहां

15

बस एक्सआर को बुलाओ। abort () क्या यह jquery ajax ऑब्जेक्ट या देशी 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);

— cuixiping
स्रोत

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

चूंकि थ्रेड पर कई लोगों ने उल्लेख किया है, सिर्फ इसलिए कि क्लाइंट-साइड पर अनुरोध को रद्द कर दिया गया है, सर्वर अभी भी अनुरोध को संसाधित करेगा। यह सर्वर पर अनावश्यक भार पैदा करता है क्योंकि यह ऐसा काम कर रहा है जिसे हमने फ्रंट-एंड पर सुनना छोड़ दिया है।

जिस समस्या को मैं हल करने की कोशिश कर रहा था (जो कि दूसरों को भी चल सकती है) वह यह है कि जब उपयोगकर्ता किसी इनपुट क्षेत्र में जानकारी दर्ज करता है, तो मैं 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 (एक चर जिसे आप अपनी आवश्यकताओं के लिए अनुकूलित कर सकते हैं) एक अनुरोध भेजेंगे। यदि आपको यह समझने में परेशानी हो रही है कि वास्तव में यहाँ क्या हो रहा है, तो लॉग करें xhrCountऔर xhrQueueयदि ब्लॉक से ठीक पहले कंसोल पर।

— brianrhea
स्रोत

11

उदाहरण के लिए बस ajax.abort () का उपयोग करें ताकि आप इस तरह का एक और भेजने से पहले किसी भी लंबित AJAX अनुरोध को निरस्त कर सकें

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

— Joecoder001
स्रोत

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

ऐसा करने के लिए कोई विश्वसनीय तरीका नहीं है, और मैं यह कोशिश भी नहीं करूँगा, एक बार अनुरोध जारी है; यथोचित प्रतिक्रिया करने का एकमात्र तरीका प्रतिक्रिया की उपेक्षा करना है।

ज्यादातर मामलों में, यह उन स्थितियों में हो सकता है जैसे: एक उपयोगकर्ता कई XHR को ट्रिगर करने वाले बटन पर अक्सर क्लिक करता है, यहां आपके पास कई विकल्प हैं, या तो XHR वापस आने तक बटन को ब्लॉक करें, या नए XHR को ट्रिगर भी न करें, जबकि दूसरा संकेत दे रहा हो उपयोगकर्ता दुबला करने के लिए - या किसी भी लंबित XHR प्रतिक्रिया को त्यागें लेकिन हाल ही में।

— आओ कुछ ले जाओ
स्रोत

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!" >

— zloctb
स्रोत

5

कृपया यह स्पष्टीकरण दें कि यह प्रश्न कैसे हल करता है। इससे ओपी और भविष्य के अन्य खोजकर्ताओं को मदद मिलेगी।

— SnareChops

5

मुझे मतदान की समस्या थी और एक बार पृष्ठ बंद हो जाने के बाद भी मतदान जारी रहा, तो मेरे कारण एक उपयोगकर्ता को एक अपडेट याद होगा क्योंकि पृष्ठ बंद होने के बाद अगले 50 सेकंड के लिए mysql मान सेट किया जा रहा था, भले ही मैंने ajax अनुरोध को मार दिया हो, मैं लगभग पता चला, एक var सेट करने के लिए $ _SESSION का उपयोग करने से पोल में अपने आप को अपडेट नहीं किया जाएगा जब तक कि इसका अंत नहीं हो जाता है और एक नया शुरू हो गया है, इसलिए मैंने जो कुछ किया वह मेरे डेटाबेस में 0 = ऑफपेज के रूप में एक मूल्य निर्धारित किया था, जबकि मैं हूं पोलिंग I ने उस पंक्ति को क्वेरी की और झूठी वापसी की; जब यह मतदान में क्वेरी के रूप में हो तो आपको वर्तमान मूल्य स्पष्ट रूप से मिलेंगे ...

मुझे उम्मीद है कि इससे मदद मिली

— मार्कस
स्रोत

5

यदि xhr.abort(); पृष्ठ पुनः लोड करने का कारण बनता है,

तो आप onreadystatechangeको रोकने के लिए गर्भपात से पहले सेट कर सकते हैं :

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

— vikyd
स्रोत

4

मैंने एक डेमो साझा किया है जो दर्शाता है कि AJAX अनुरोध को कैसे रद्द किया जाए - यदि डेटा को पूर्वनिर्धारित प्रतीक्षा समय के भीतर सर्वर से वापस नहीं किया गया है।

HTML:

<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,...।

— ब्रैम वनरॉय