JQuery භාවිතා කරමින් අජැක්ස් ඉල්ලීම් අත්හිටුවන්න

JQuery භාවිතා කරමින්, මට තවමත් ප්‍රතිචාරයක් නොලැබුණු අජැක්ස් ඉල්ලීමක් අවලංගු කිරීම / ගබ්සා කිරීම කරන්නේ කෙසේද?

බොහෝ 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 ලෙස හැඳින්වේ. මෙම වස්තුව සියළුම දේශීය ගුණාංග සහ ක්‍රම හෙළි කරන බැවින් ඉහත උදාහරණය තවමත් ක්‍රියාත්මක වේ. බලන්න මෙම jqXHR වස්තූන් (jQuery API ප්රලේඛනය).

යාවත්කාලීන කිරීම 2: jQuery 3 වන විට, අජැක්ස් ක්‍රමය දැන් අමතර ක්‍රම සමඟ පොරොන්දුවක් ලබා දෙයි (ගබ්සා කිරීම වැනි), එබැවින් ඉහත කේතය තවමත් ක්‍රියාත්මක වේ.xhr තවදුරටත් නොවේ. බලන්න මෙතන 3.0 බ්ලොග් .

යාවත්කාලීන 3 : xhr.abort()තවමත් jQuery 3.x හි ක්‍රියා කරයි. යාවත්කාලීන 2 නිවැරදි යැයි නොසිතන්න . JQuery ගිතුබ් ගබඩාව පිළිබඳ වැඩි විස්තර .

ඔබට ඉල්ලීම සිහිපත් කළ නොහැකි නමුත් කල් ඉකුත් වීමේ අගයක් සැකසිය හැකි අතර පසුව ප්‍රතිචාරය නොසලකා හරිනු ඇත. Jquery AJAX විකල්ප සඳහා මෙම පිටුව බලන්න . කල් ඉකුත් වීමේ කාලය ඉක්මවා ගියහොත් ඔබගේ දෝෂ ඇමතුම කැඳවනු ඇතැයි මම විශ්වාස කරමි. සෑම AJAX ඉල්ලීමකටම පෙරනිමි කල් ඉකුත් වීමක් ඇත.

ඔබ ද භාවිතා කළ හැකිය ඉවත්වීම () එය, මෙම අවස්ථාවට සඳහා නැවතුම් සවන් කිරීමට ගනුදෙනුකරුගේ ඇති කරන අතර, ඉල්ලීම වස්තුවක් මත ක්රමය නමුත් හැක බොහෝ විට එය ක්රියාවලි සේවාදායකය නතර නොවනු ඇත.

එය අසමමුහුර්ත ඉල්ලීමකි, එයින් අදහස් වන්නේ එය එවූ පසු එය පිටතට යන බවයි.

AJAX ඉල්ලීම හේතුවෙන් ඔබේ සේවාදායකයා ඉතා මිල අධික මෙහෙයුමක් ආරම්භ කරන්නේ නම්, ඔබට කළ හැකි හොඳම දෙය නම් අවලංගු කිරීමේ ඉල්ලීම්වලට සවන් දීම සඳහා ඔබේ සේවාදායකය විවෘත කිරීම සහ වෙනම AJAX ඉල්ලීමක් යවා සේවාදායකයාට එය කරන ඕනෑම දෙයක් නතර කරන ලෙස දැනුම් දීමයි.

එසේ නොමැතිනම්, AJAX ප්‍රතිචාරය නොසලකා හරින්න.

ඔබ කළ ඇමතුම් අරාවකින් සුරකින්න, ඉන්පසු එක් එක් මත xhr.abort () අමතන්න.

විශාල අවවාදය: ඔබට ඉල්ලීමක් අවලංගු කළ හැකිය, නමුත් එය සේවාදායකයාගේ පැත්ත පමණි. සේවාදායක පාර්ශවය තවමත් ඉල්ලීම සැකසෙමින් පවතී. ඔබ සැසි දත්ත සමඟ PHP හෝ ASP වැනි දෙයක් භාවිතා කරන්නේ නම්, අජැක්ස් අවසන් වන තුරු සැසි දත්ත අගුළු දමා ඇත. එබැවින්, වෙබ් අඩවිය දිගටම ගවේෂණය කිරීමට පරිශීලකයාට ඉඩ දීම සඳහා, ඔබට session_write_close () අමතන්න . මෙය සැසිය සුරකින අතර එය අගුළු හරිනු ඇත, එවිට ඉදිරියට යාමට බලා සිටින අනෙක් පිටු ඉදිරියට යනු ඇත. මෙය නොමැතිව, අගුල ඉවත් කරන තෙක් පිටු කිහිපයක් බලා සිටිය හැකිය.

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 හි නිරූපණය

අපට මෙම ගැටලුව විසඳා ගැනීමට සිදු වූ අතර වෙනස් ප්‍රවේශයන් තුනක් පරීක්ෂා කළෙමු.

1. @meouw විසින් යෝජනා කළ පරිදි ඉල්ලීම අවලංගු කරයි
2. සියලු ඉල්ලීම් ක්‍රියාත්මක කරන්න, නමුත් අවසන් ඉදිරිපත් කිරීමේ ප්‍රති result ලය පමණක් ක්‍රියාවට නංවයි
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 වන ප්‍රවේශය සේවාදායකයට අඩු බරක් නිපදවන බැවින් එය භාවිතා කිරීමටයි. .Quplete () - ක්‍රමවේදය ඇමතීම jQuery විසින් සහතික කරන්නේ නම් මට මෙය 100% ක් විශ්වාස නැත. අපගේ පරීක්ෂණ වලදී අපට එවැනි තත්වයක් ප්‍රතිනිෂ්පාදනය කිරීමට නොහැකි විය.

මේ වගේ දෙයක් කිරීම සැමවිටම හොඳම පුරුද්දයි.

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

නමුත් අජැක්ස් ඉල්ලීම අවලංගුද නැද්ද යන්න පරීක්ෂා කිරීම සඳහා ඔබ if ප්‍රකාශයක් පරික්ෂා කරන්නේ නම් වඩා හොඳය.

Xhr අමතන්න. 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);

මම සජීවී සෙවුම් විසඳුමක් කරමින් සිටි අතර නවතම / වඩාත්ම වර්තමාන ඉල්ලීමට වඩා වැඩි කාලයක් ගතවී ඇති අපේක්ෂිත ඉල්ලීම් අවලංගු කිරීමට අවශ්‍ය විය.

මගේ නඩුවේදී මම මේ වගේ දෙයක් භාවිතා කළා:

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

ත්‍රෙඩ් එකේ බොහෝ අය සටහන් කර ඇති පරිදි, ඉල්ලීම සේවාදායකයාගේ පැත්තෙන් ගබ්සා කර ඇති නිසා, සේවාදායකයා තවමත් ඉල්ලීම ක්‍රියාවට නංවනු ඇත. මෙය සේවාදායකයේ අනවශ්‍ය බරක් ඇති කරයි, මන්දයත් එය ඉදිරිපස කෙළවරේ සවන් දීම අප විසින් අත්හැර දමා ඇති නිසාය.

මම විසඳීමට උත්සාහ කළ ගැටළුව (අනෙක් අයද ක්‍රියාත්මක විය හැකිය) පරිශීලකයා ආදාන ක්ෂේත්‍රයක් තුළ තොරතුරු ඇතුළත් කළ විට, ගූගල් ක්ෂණික ආකාරයේ හැඟීමක් සඳහා වූ ඉල්ලීමක් ඉවත් කිරීමට මට අවශ්‍ය විය.

අනවශ්‍ය ඉල්ලීම් ඉදිරිපත් නොකිරීමට සහ ඉදිරිපස කෙළවරේ ඇති සුලු බව පවත්වා ගැනීමට මම පහත සඳහන් දේ කළෙමි.

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පමණක් නම් වාරණ පෙර කොන්සෝලය වෙත.

උදාහරණයක් ලෙස ajax.abort () භාවිතා කරන්න, මේ වගේ තවත් එකක් යැවීමට පෙර ඔබට ඉතිරිව ඇති ඕනෑම අජැක්ස් ඉල්ලීමක් අවලංගු කළ හැකිය

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

මෙය භාවිතා කිරීමෙන් ඔබට අඛණ්ඩ අජැක්ස් ඇමතුමක් අත්හිටුවිය හැකිය

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

එය කිරීමට විශ්වාසදායක ක්‍රමයක් නොමැති අතර, ඉල්ලීම ක්‍රියාත්මක වූ වහාම මම එය උත්සාහ නොකරමි. මෙම පමණක් සාධාරණ ප්රතික්රියා කිරීමට මාර්ගය වන්නේ නොසලකා ප්රතිචාරය.

බොහෝ අවස්ථාවන්හීදී, එය සිදුවිය හැකිය: පරිශීලකයෙකු බොහෝ විට XHR අවුලුවන බොත්තමක් මත නිතර ක්ලික් කරයි, මෙහි ඔබට බොහෝ විකල්ප ඇත, එක්කෝ 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!" >

මට ඡන්දය දීමේ ගැටලුව ඇති වූ අතර පිටුව වසා දැමූ පසු ඡන්ද විමසීම දිගටම පැවතුණි. එබැවින් පිටුව වසා දැමීමෙන් පසු ඊළඟ තත්පර 50 සඳහා mysql අගයක් සැකසෙමින් පවතින බැවින් පරිශීලකයාට යාවත්කාලීනයක් මග හැරෙනු ඇත. var _SESSION භාවිතා කරමින් var සකසා ගැනීම අවසන් වන තුරු නව එකක් ආරම්භ නොවනු ඇත, එබැවින් මා කළ දෙය මගේ දත්ත ගබඩාවේ අගය 0 = offpage ලෙස සකසා ඇත, මම සිටියදී ඡන්ද විමසීම මම එම පේළිය විමසා අසත්‍යය ප්‍රකාශ කරමි. ඡන්ද විමසීමේදී විමසීමේදී එය 0 වන විට ඔබට වර්තමාන අගයන් පැහැදිලිවම ලැබෙනු ඇත ...

මම හිතනවා මේක උදව් වෙයි කියලා

xhr.abort(); පිටු නැවත පූරණය වීමට හේතු නම් ,

onreadystatechangeවැළැක්වීම සඳහා ගබ්සා කිරීමට පෙර ඔබට සැකසිය හැකිය :

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

මම හවුල් කර demo දත්ත පූර්ව නිශ්චිත රැක කාලයක් තුළ, සේවාදායකය වෙතින් නැවත ආපසු පැමිණ නැති නම් request-- ක සියල්ලන්ටම AJAX අවලංගු කරන ආකාරය පෙන්නුම් කරන්නේ,.

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