여러 개의 ajax 호출 처리

Question

jQuery를 사용하여 일부 아약스 호출을하고 사람들이이 상황을 어떻게 처리하는지 궁금합니다.

1. 일부 정보를 검색하기 위해 서버에 ajax 요청이 있습니다.
2. 요청이 반환되기 전에 다른 요청이 이루어집니다. 첫 번째 요청은 현재 유효하지 않으며 오래되었습니다.

어떻게하면 초기 요청이 유효하지 않으며 반환 될 때 무시할 수 있는지 어떻게 알 수 있습니까? 두 번째 요청의 결과를 표시하고 첫 번째 요청을 무시 (또는 취소)하기를 원합니다.

Answer 1

jQuery를 내가 다음과 같이 당신이 원하는 것을 달성하기 위해 사용했습니다 ajax() 호출,에서 XmlHttpRequest 객체를 반환 만들어집니다.

Answer 2

필자는 전에 이런 상황에 처한 적이 없었지만 요청할 때 증가하는 키를 보내고 응답과 함께 키를 다시 보내도록 할 수있었습니다. 응답이 도착하면 키를 확인하여 예상 한 내용인지 확인할 수 있습니다.

var incrementor = 1; 
var lastSent = 0; 

jQuery(document).ready(function() { 

    jQuery('a.submitter').click(function(event) { 
     event.preventDefault(); 
     lastSent = incrementor; 
     incrementor++; 
     jQuery.post(
      'some-url.php', 
      { 
       'request-id': lastSent, 
       'other-data': 'some-data' 
      }, 
      function(data, textStatus) { 
       if(data.requestId == lastSent) { 
        // Do stuff 
       } 
      }, 
      'json' 
     ); 
    }); 

}); 

Answer 3

은 그렇지

"어떻게 초기 요청이 유효 이제 것을 알 수 있습니까"...! 당신은

당신은이 작업을 수행하는 방법에 대한 몇 가지 정보를 얻을 수 있습니다 ... 클라이언트 계층에서 Ajax 요청을 대기하고 이전 것들 및는 DOM의 자신의 조작을 완료 반환하기 전에 그들을 해고하지 않습니다 내 블로그에서 "Ajax 라이브러리를 만드는 방법"에 대해. http://ra-ajax.org/how-to-create-an-ajax-library-part-7-the-ra-ajax-class.blog

Answer 4

요청을 식별하는 변수 (예 : "request_id")를 기록하십시오. 새로운 요청마다 변수에 1을 더하십시오. 서버가 리턴 한 request_id가 클라이언트에있는 변수와 같은 경우에만 요청을 처리하십시오.

var lastRequest; 
function getSomeData() { 
    if(lastRequest) { 
     lastRequest.abort(); 
     lastRequest = null 
    } 
    lastRequest = $.ajax(...); 
} 

순 효과는 후속 요청하면 이전 요청 '응답이 무시되고 있다는 것이다 :

Answer 5

나는 서비스 호출에 연루되지 않는 편이 좋다. 서비스 정의를 항상 제어 할 수있는 것은 아니다. 이 같은 것을보고 싶습니다.

$(function() { 
    $('.ajaxButton').click(function() { 
     $.currentCallId = (new Date()).getTime(); 

     $.ajax({ 
      type: "get", 
      url: 'http://www.google.com/', 
      beforeSend: function(xhr) { 
       this.callId = $.currentCallId; 
      }, 
      success: function(data) { 
       if (this.callId === $.currentCallId) { 
        // process it 
       } else { 
        // throw it out 
       } 
      } 
     }); 
    }); 
});