Ajax 요청 중복 발송 방지 솔 루 션

페이지 에 여러 개의 단추 가 있 습 니 다.이 단 추 를 누 르 면 서버 에서 데 이 터 를 읽 고 전단 에서 데 이 터 를 보 여 줍 니 다.모든 단 추 를 누 르 면 요청 한 페이지 가 같 지만 요청 한 매개 변수 가 다 르 기 때문에 돌아 오 는 내용 이 다 릅 니 다.여러 단 추 를 연속 으로 눌 렀 을 때 여러 개의 비동기 요청 을 보 냅 니 다.그러면 요청 에 따라 되 돌아 오 는 속도(버튼 의 매개 변수 에 따라 되 돌아 오 는 내용 이 다 르 기 때문에 빠 른 속도 로 나 눌 수 있 습 니 다)에 따라 데이터 가 순서대로 표 시 됩 니 다.그러면 먼저 클릭 하 는 버튼 이 나타 납 니 다.그 가 요청 한 데이터 의 양 이 비교적 많 기 때문에 데이터 가 나중에 표 시 됩 니 다.
문제 해결
이런 문 제 를 해결 하 는 데 는 두 가지 방법 이 있다.
4.567917.1.여러 요청 을 연속 으로 진행 하고 요청 한 url 주 소 를 동시에 합 니 다.앞의 모든 요청 을 포기 하고 마지막 요청 만 수행 합 니 다.4.567917.2.여러 요청 을 연속 으로 진행 하고 요청 한 url 주 소 를 동시에 합 니 다.뒤의 모든 요청 을 포기 하고 첫 번 째 요청 만 수행 합 니 다.해결 방안
1.ajax 가 요청 한 async 를 false 로 설정 합 니 다.

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

 } 
}); 

async
유형:Boolean기본 값:true.기본 설정 에서 모든 요청 은 비동기 요청 입 니 다.동기 화 요청 을 보 내 려 면 이 옵션 을 false 로 설정 하 십시오4.567917.동기 화 요청 은 브 라 우 저 를 잠 그 고 사용자 의 다른 작업 은 요청 이 완료 되 기 를 기 다 려 야 실행 할 수 있 습 니 다2.jquery ajax Prefilter 로 요청 중단
첫 번 째 방안 은 곡선 구국 방식 일 뿐 위의 문 제 를 제대로 해결 하지 못 했다.그래서 이런 방식 을 사용 하 는 것 을 권장 합 니 다.

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

Prefilter s 는 모든 요청 전에 보 내 고$.ajax()가 처리 하기 전에 사전 필터 입 니 다.
options 는 요청 한 옵션 입 니 다

originalOptions 값 은 Ajax 방법 에 수정 되 지 않 은 옵션 으로 제공 되 므 로 ajax Settings 설정 의 기본 값 이 없습니다

jqXHR 는 요청 한 jqXHR 대상 입 니 다상기 내용 의 핵심 사상 은 하나의 대기 열 을 유지 하 는 것 입 니 다.요청 을 보 낼 때 요청 을 대기 열 에 추가 하고 응답 을 요청 한 후 대기 열 에서 제거 하 는 것 입 니 다.이것 은 언제든지 같은 요청 만 보 낼 수 있 도록 보장 합 니 다.
한계 성:단지 프론트 데스크 톱 에서 jquery 의 ajax 요청 을 방지 합 니 다.jquery 가 아 닌 ajax 요청 은 작 동 하지 않 습 니 다.jquery 의 ajax PreFilter 함 수 를 사용 하기 때문에 jquery 의 ajax 요청 에 만 도움 이 됩 니 다.
abort 를 호출 하면 jquery 는 error 방법 을 실행 하여 abort 의 이상 정 보 를 던 집 니 다.다음 과 같은 방식 으로 이 유형의 이상 을 구분 할 수 있다.

var ajax = $.ajax({
 'error':function(jqXHR, textStatus, errorThrown){
  if(errorThrown != 'abort'){
   //ajax   abort      
   alert('  ajax      ');
  }
 }
})

3.데모
단 추 를 누 를 때마다 백 엔 드 에 요청 을 보 냅 니 다.아래 demo 는 여러 번 단 추 를 누 른 후에 마지막 클릭 요청 만 성공 할 수 있 습 니 다.

<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('config/ajax/appinfoListFetcher.json', {
    type:'POST',
    data: {param1:value1,
       param2:value2,
      },
    success: function(res){
      //          
    },
    error:function(jqXHR, textStatus, errorThrown){
     if(errorThrown != 'abort'){
      //ajax   abort      
      alert('      ！');
     }
    }
    });
    <!--            -->
   });
</script>

이상 은 Ajax 요청 을 중복 발송 하 는 방안 을 해결 하고 여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.