javascript - amsterdam - ajax jquery




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

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

জেএসফিডে ডেমো

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


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

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


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

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


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

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


আমি একটি demo ভাগ করেছি যা দেখায় কিভাবে 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);   
});

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

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

//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 অনুরোধের কারণে খুব ব্যয়বহুল অপারেশন শুরু করে তবে আপনার অনুরোধটি বাতিলের অনুরোধগুলি শুনতে আপনার সার্ভারটি খোলা থাকে এবং সার্ভারটিকে যা কিছু করছে তা বন্ধ করার জন্য একটি পৃথক AJAX অনুরোধ পাঠান।

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


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

বেশিরভাগ ক্ষেত্রেই এটি এমন পরিস্থিতিতে ঘটতে পারে: একটি ব্যবহারকারী প্রায়ই ক্রমাগত XHR ট্রিগার করে একটি বোতামে ক্লিক করে, এখানে আপনার কাছে অনেকগুলি বিকল্প রয়েছে, এমনকি XHR ফিরে আসা পর্যন্ত বোতামটি ব্লক করুন, নাকি নতুন এক্সএইচআর ট্রিগার না করে অন্যটি হান্টিং চলছে ব্যবহারকারী ফিরে পেছন দিকে - বা কোনো অমীমাংসিত XHR প্রতিক্রিয়া কিন্তু সাম্প্রতিক।


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

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

বেশিরভাগ jQuery অজ্যাক পদ্ধতিগুলি একটি 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 অবজেক্টটি দেখুন (jQuery এপিআই ডকুমেন্টেশন)।

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

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


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

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

শুধু xhr কল। বাতিল () এটি 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);





ajax