javascript 강제 종료 - jQuery를 사용하여 Ajax 요청 중단





9 Answers

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

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

통신 취소 abort

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




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

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




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

  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을 부르세요. jquery ajax 객체 이건 native XMLHTTPRequest 객체 이건 abort () .

예:

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



예를 들어 ajax.abort ()를 사용하면 보류중인 Ajax 요청을 중단 한 다음 다른 Ajax 요청을 보낼 수있다.

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



다음 코드는 Ajax 요청을 시작하고 중단하는 것을 보여줍니다.

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



이것을 사용하여 지속적인 아약스 호출을 중단 할 수 있습니다.

<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.abort(); 페이지 재로드,

그런 다음 중지하기 전에 onreadystatechange 를 설정하여 다음을 방지 할 수 있습니다.

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



Related