Solution to prevent repeated Ajax requests

This article mainly introduces the solution to prevent repeated sending of Ajax requests. Interested friends can refer to it

There are multiple buttons on the page. Click the button to go to the server asynchronously. Read the data and then display the data on the front end. The page requested by each button click is the same, but the request parameters are different, so the returned content is different. When multiple buttons are clicked continuously, multiple asynchronous requests will be issued. Then according to the speed of the request return (because different button parameters are different and the return content is different, there will be speed), the data will be displayed in sequence, then a button clicked first will appear, because the amount of data he requested is relatively large. , causing the data to be displayed later.

1. Problem Solving

There are two ways to solve this problem:

• 1 .When multiple requests are made continuously and the requested URL addresses are the same. Abandon all previous requests and only execute the last request.

• 2. When multiple requests are made in succession and the requested url addresses are the same. Abandon all subsequent requests and only execute the first request.

2. Solution

1. Set the async of the ajax request to false

$.ajax({ 
 async: false, 
 type : "POST", 
 url : defaultPostData.url, 
 dataType : 'json', 
 success : function(data) { 

 } 
});

async

• ##Type: Boolean

• Default value: true. By default, all requests are asynchronous. If you need to send synchronous requests, set this option to false.

• Note that synchronous requests will lock the browser, and other user operations must wait for the request to be completed before they can be executed.

2. Use jquery ajaxPrefilter to interrupt the request

Because the first option is just one This curve-based approach to saving the country actually fails to truly solve the above problems. Therefore, it is recommended to use this method.

 var pendingRequests = {};
 $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
  var key = options.url;
  console.log(key);
  if (!pendingRequests[key]) {
   pendingRequests[key] = jqXHR;
  }else{
   //jqXHR.abort(); //放弃后触发的提交
   pendingRequests[key].abort(); // 放弃先触发的提交
  }

  var complete = options.complete;
  options.complete = function(jqXHR, textStatus) {
   pendingRequests[key] = null;
   if ($.isFunction(complete)) {
   complete.apply(this, arguments);
   }
  };
 });

Prefilters are prefilters that are sent before each request and $.ajax() processes them.

• options are the requested options

• originalOptions values ​​are as Provides unmodified options to the Ajax method, therefore, there are no default values ​​in the ajaxSettings settings

• jqXHR is the requested jqXHR object

The core idea of ​​the above content is to maintain a queue. When sending a request, the request is added to the queue. After the request is responded to, it is cleared from the queue. This ensures that at any time Only one same request can be sent at a time.

Limitations: Only prevents jquery ajax requests from the frontend. Does not work for non-jquery ajax requests. Because the ajaxPreFilter function of jquery is used, it only works on jquery ajax requests.

After calling abort, jquery will execute the error method and throw the abort exception information. This type of exception can be distinguished using the following methods.

var ajax = $.ajax({
 'error':function(jqXHR, textStatus, errorThrown){
  if(errorThrown != 'abort'){
   //ajax被调用abort后执行的方法
   alert('您的ajax方法被停止了');
  }
 }
})

3. Demo

Every time the button is clicked, a request will be sent to the backend. The following demo implements multiple clicks on the button and only guarantees the last click. The request can succeed.

<button id="button1">button1</button>
<button id="button2">button2</button>
<button id="button3">button3</button>  
<script>
  var pendingRequests = {};
  jQuery.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
   var key = options.url;
   console.log(key);
   if (!pendingRequests[key]) {
    pendingRequests[key] = jqXHR;
   }else{
    //jqXHR.abort(); //放弃后触发的提交
    pendingRequests[key].abort(); // 放弃先触发的提交
   }

   var complete = options.complete;
   options.complete = function(jqXHR, textStatus) {
    pendingRequests[key] = null;
    if (jQuery.isFunction(complete)) {
    complete.apply(this, arguments);
    }
   };
  });
  <!-- 异步加载应用列表开始 -->

  $("#button1").live("click", function() {
    $.ajax(&#39;config/ajax/appinfoListFetcher.json&#39;, {
    type:&#39;POST&#39;,
    data: {param1:value1,
       param2:value2,
      },
    success: function(res){
      //后端数据回写到页面中
    },
    error:function(jqXHR, textStatus, errorThrown){
     if(errorThrown != &#39;abort&#39;){
      //ajax被调用abort后执行的方法
      alert(&#39;应用加载失败！&#39;);
     }
    }
    });
    <!-- 异步加载应用列表结束 -->
   });
</script>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Ajax transfers JSON example code

ajax uses json to realize data transmission

Spring MVC front-end and back-end 5 ajax interaction methods

The above is the detailed content of Solution to prevent repeated Ajax requests. For more information, please follow other related articles on the PHP Chinese website!