[javascript] jQuery를 사용하여 Ajax 요청 중단


7 Answers

요청을 회수 할 수는 없지만 응답이 무시되는 시간 초과 값을 설정할 수 있습니다. jquery AJAX 옵션은이 page 를 참조하십시오. 시간 초과 기간이 초과되면 오류 콜백이 호출됩니다 믿습니다. 모든 AJAX 요청에는 이미 기본 시간 초과가 있습니다.

요청 객체에서 abort() 메소드를 사용할 수도 있지만, 클라이언트가 이벤트 수신 대기를 중지 시키지만 서버가 처리를 중지하지 않을 수도 있습니다 .

Question

jQuery를 사용하여, 응답을 아직받지 못했다 는 Ajax 요청취소하거나 중단 할 수 있습니까?




쓰레드의 많은 사람들이 지적했듯이, 요청이 클라이언트 측에서 중단 되었기 때문에 서버는 여전히 요청을 처리합니다. 프런트 엔드에서 청취를 중단 한 작업을 수행하기 때문에 서버에 불필요한로드가 발생합니다.

내가 해결하려고했던 (다른 사람들도 잘 돌아가는) 문제는 사용자가 입력 필드에 정보를 입력했을 때 Google 순간 유형의 느낌에 대한 요청을 시작하고 싶다는 것입니다.

불필요한 요청을 방지하고 프런트 엔드의 snappiness를 유지하려면 다음을 수행했습니다.

var xhrQueue = [];
var xhrCount = 0;

$('#search_q').keyup(function(){

    xhrQueue.push(xhrCount);

    setTimeout(function(){

        xhrCount = ++xhrCount;

        if (xhrCount === xhrQueue.length) {
            // Fire Your XHR //
        }

    }, 150);

});

이는 본질적으로 150ms마다 하나의 요청을 보낼 것입니다 (사용자의 필요에 맞게 사용자 정의 할 수있는 변수). 여기서 정확히 무엇이 일어나는지 이해하는 데 어려움이있는 경우 xhrCountxhrQueue 를 if 블록 바로 전에 콘솔에 기록하십시오.




나는 폴링의 문제가 있었고 일단 페이지가 닫히면 설문 조사가 계속되었다. 왜냐하면 내가 아약스 요청을 죽였을지라도 페이지가 닫힌 후 다음 50 초 동안 mysql 값이 설정되기 때문에 사용자는 업데이트를 놓칠 것이다. $ _SESSION을 사용하여 var를 설정하지 않으면 폴링이 끝나고 새 것이 시작될 때까지 업데이트되지 않습니다. 따라서 데이터베이스에서 0 = 오프 페이지로 값을 설정했습니다. 폴링 나는 그 행을 쿼리하고 false를 반환; 폴링에서 질의하는 것이 현재 값을 분명히 얻을 것이므로 0 일 때 ...

나는 이것이 도움이되기를 바란다.




미리 정의 된 대기 시간 내에 서버에서 데이터가 반환되지 않으면 AJAX 요청을 취소하는 방법을 보여주는 demo 를 공유했습니다.

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






믿을만한 방법이 없으며 일단 요청이 이루어지면 시도하지 않을 것입니다. 합리적으로 반응하는 유일한 방법은 응답을 무시 하는 것입니다.

대부분의 경우 다음과 같은 상황에서 발생할 수 있습니다. 사용자가 XHR을 연속적으로 트리거하는 버튼을 너무 자주 클릭하는 경우 XHR이 반환 될 때까지 버튼을 차단하거나 다른 XHR을 트리거하지 않는 옵션 사용자가 뒤로 젖히거나 대기중인 XHR 응답을 폐기하지만 최근 상태는 폐기해야합니다.




우리는이 문제를 해결하고 세 가지 접근 방식을 테스트했습니다.

  1. @ meouw 님이 제안한 요청을 취소합니다.
  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 % 확실하지는 않습니다. 이로 인해 교착 상태가 발생할 수 있습니다. 우리의 테스트에서 우리는 그러한 상황을 재현 할 수 없었다.




당신이 만든 호출을 배열에 저장 한 다음 각각에 대해 xhr.abort ()를 호출하십시오.

커다란 경고 : 요청을 중단 할 수는 있지만 클라이언트 쪽만입니다. 서버 측에서는 여전히 요청을 처리 할 수 ​​있습니다. 세션 데이터와 함께 PHP 나 ASP와 같은 것을 사용한다면, 세션 데이터는 ajax가 끝날 때까지 잠겨 있습니다. 따라서 사용자가 계속해서 웹 사이트를 탐색 할 수있게하려면 session_write_close ()를 호출해야합니다. 그러면 세션을 저장하고 잠금을 해제하여 계속 대기중인 다른 페이지가 계속 진행됩니다. 이 옵션이 없으면 여러 페이지가 잠금 제거를 기다릴 수 있습니다.



Related