복붙노트

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

JQUERY

jQuery를 사용하여 중단 Ajax 요청

해결법

  1. 1.당신은 단지) (중단 사용할 수 있도록 jQuery를 아약스 방법의 대부분은 XMLHttpRequest를 (또는 동급) 오브젝트를 돌려줍니다.

    당신은 단지) (중단 사용할 수 있도록 jQuery를 아약스 방법의 대부분은 XMLHttpRequest를 (또는 동급) 오브젝트를 돌려줍니다.

    설명서를 참조하십시오 :

    var xhr = $.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
    success: function(msg){
       alert( "Data Saved: " + msg );
    }
});

//kill the request
xhr.abort()

    최신 정보: jQuery를 1.5으로 반환 된 객체는 jqXHR라는 기본 XMLHttpRequest 객체에 대한 래퍼입니다. 이 개체는 위의 예는 여전히 작동하도록 기본 속성과 메소드를 모두 노출이 나타납니다. jqXHR 개체 (jQuery를 API 문서)를 참조하십시오.

    업데이트 2 : 위의 코드는 여전히 작동하므로 반환되는 객체가 더 이상 XHR 아니지만 jQuery를 3으로, 아약스 방법은 지금, 추가 방법 (중단 등)와 약속을 반환합니다. 여기에 3.0 블로그를 참조하십시오.

    UPDATE 3 : xhr.abort ()는 여전히 jQuery를 3.x를 작동 업데이트 2가 올바른 가정하지 마십시오. jQuery를 Github의 저장소에 대한 자세한 정보를 원하시면.

  2. 2.당신은 요청을 기억하지 수 있지만 응답이 무시됩니다 후 시간 초과 값을 설정할 수 있습니다. JQuery와 AJAX 옵션이 페이지를 참조하십시오. 나는 제한 시간이 초과 될 경우 오류 콜백이 호출 될 것이라고 믿는다. 모든 AJAX 요청에 기본 시간 제한은 이미 있습니다.

    당신은 요청을 기억하지 수 있지만 응답이 무시됩니다 후 시간 초과 값을 설정할 수 있습니다. JQuery와 AJAX 옵션이 페이지를 참조하십시오. 나는 제한 시간이 초과 될 경우 오류 콜백이 호출 될 것이라고 믿는다. 모든 AJAX 요청에 기본 시간 제한은 이미 있습니다.

    이 클라이언트가 이벤트를 수신 중지 될 것입니다 동안 당신은 또한 요청 개체의 중단 () 메소드를 사용 할 수 있지만, 아마 그것을 처리에서 서버를 중지하지 않을 수 있습니다.

  3. 3.거기 밖으로의 보낸 된 후에는 의미 비동기 요청합니다.

    거기 밖으로의 보낸 된 후에는 의미 비동기 요청합니다.

    경우 서버 인해 AJAX 요청에 매우 비용이 많이 드는 작업을 시작, 당신이 할 수있는 최선의 요청을 취소하고하고있어 어떤 서버가 중지 통지 별도의 AJAX 요청을 보내 수신하는 서버가 열려 있습니다.

    그렇지 않으면, 단순히 AJAX 응답을 무시합니다.

  4. 4.당신이 배열 할 호출 저장 한 다음 각 xhr.abort ()를 호출합니다.

    당신이 배열 할 호출 저장 한 다음 각 xhr.abort ()를 호출합니다.

    거대한 경고 : 당신이 요청을 중단 할 수 있지만, 단지 클라이언트 측입니다. 서버 측이 여전히 요청을 처리 할 수있다. 당신이 세션 데이터와 PHP 나 ASP 같은 것을 사용하는 경우 아약스이 완료 될 때까지, 세션 데이터가 잠겨 있습니다. 따라서, 사용자가 웹 사이트를 탐색을 계속 할 수 있도록, 당신이 전화 session_write_close에있다 (). 이 세션을 저장하고 다른 페이지가 진행됩니다 계속 기다리고 있도록 잠금을 해제합니다. 이 없다면, 여러 페이지가 락을 대기 할 수 있습니다 제거 할 수 있습니다.

  5. 5.AJAX 요청은 시작된 순서대로 완료하지 않을 수 있습니다. 대신 중단, 당신은 가장 최근 제외한 모든 AJAX 응답을 무시하도록 선택할 수 있습니다 :

    AJAX 요청은 시작된 순서대로 완료하지 않을 수 있습니다. 대신 중단, 당신은 가장 최근 제외한 모든 AJAX 응답을 무시하도록 선택할 수 있습니다 :

    코드의 거친 개요 :

    var xhrCount = 0;
function sendXHR() {
    // sequence number for the current invocation of function
    var seqNumber = ++xhrCount;
    $.post("/echo/json/", { delay: Math.floor(Math.random() * 5) }, function() {
        // this works because of the way closures work
        if (seqNumber === xhrCount) {
            console.log("Process the response");
        } else {
            console.log("Ignore the response");
        }
    });
}
sendXHR();
sendXHR();
sendXHR();
// AJAX requests complete in any order but only the last 
// one will trigger "Process the response" message

    jsFiddle에 데모

  6. 6.우리는이 문제를 해결하려면했고, 세 가지 다른 방법을 시험했다.

    우리는이 문제를 해결하려면했고, 세 가지 다른 방법을 시험했다.

    VAR Ajax1 = { 호출 기능 () { 경우 (this.xhr 대해서 typeof! == '정의되지 않은') this.xhr.abort (); this.xhr = $ 아약스 ({ URL : '당신의 / 긴 / 실행 / 요청 / 경로' 입력 : 'GET'를, 성공 : 기능 (데이터) { // 프로세스 응답 } }); } }; VAR Ajax2 = { 카운터 : 0, 호출 기능 () { VAR 자체는,이 = 서열 = ++ this.counter; {(아약스 $ URL : '당신의 / 긴 / 실행 / 요청 / 경로' 입력 : 'GET'를, 성공 : 기능 (데이터) { 경우 (서열 === self.counter) { // 프로세스 응답 } } }); } }; VAR Ajax3 = { 활성 : 거짓, 호출 기능 () { 경우 (this.active === 거짓) { this.active 사실 =; var에 자신이 =; {(아약스 $ URL : '당신의 / 긴 / 실행 / 요청 / 경로' 입력 : 'GET'를, 성공 : 기능 (데이터) { // 프로세스 응답 }, 완료 : 기능 () { self.active = 거짓; } }); } } }; () {(기능 $ $ ( '# 버튼'). 클릭 (함수 (전자) { Ajax3.call (); }); }) <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    우리의 경우 우리는 서버에 대한 적은 부하를 생산으로 접근 # 3를 사용하기로 결정했다. 방법이 교착 상태 상황을 생산할 수있는 -하지만 100 % 확인 jQuery를이 .complete의 전화를 () 보장 경우입니다. 우리의 테스트에서 우리는 이러한 상황을 재현 할 수 있습니다.

  7. 7.항상 이런 식으로 뭔가를 할 수있는 가장 좋은 방법입니다.

    항상 이런 식으로 뭔가를 할 수있는 가장 좋은 방법입니다.

    var $request;
if ($request != null){ 
    $request.abort();
    $request = null;
}

$request = $.ajax({
    type : "POST", //TODO: Must be changed to POST
    url : "yourfile.php",
    data : "data"
    }).done(function(msg) {
        alert(msg);
    });

    그러나 아약스 요청이 null인지 여부를 확인하기 위해 훨씬 더 문 경우가를 확인하는 경우입니다.

  8. 8.그냥 전화 xhr.abort () 그것의 JQuery와 아약스 개체 또는 네이티브하는 XMLHTTPRequest 객체 여부.

    그냥 전화 xhr.abort () 그것의 JQuery와 아약스 개체 또는 네이티브하는 XMLHTTPRequest 객체 여부.

    예:

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

  9. 9.나는 라이브 검색 솔루션을하고 최신 / 가장 최근의 요청보다 더 오래 촬영했을 수 보류중인 요청을 취소 할 필요했다.

    나는 라이브 검색 솔루션을하고 최신 / 가장 최근의 요청보다 더 오래 촬영했을 수 보류중인 요청을 취소 할 필요했다.

    내 경우에는 내가 이런 식으로 뭔가를 사용 :

    //On document ready
var ajax_inprocess = false;

$(document).ajaxStart(function() {
ajax_inprocess = true;
});

$(document).ajaxStop(function() {
ajax_inprocess = false;
});

//Snippet from live search function
if (ajax_inprocess == true)
{
    request.abort();
}
//Call for new request

  10. 10.스레드에 많은 사람들이 지적했듯이, 요청이 클라이언트 측에 중단해서, 서버는 여전히 요청을 처리합니다. 이 일을하고 있기 때문에 이것은 우리가 프런트 엔드에 듣는 종료 한 것을 서버에 불필요한 부하를 만듭니다.

    스레드에 많은 사람들이 지적했듯이, 요청이 클라이언트 측에 중단해서, 서버는 여전히 요청을 처리합니다. 이 일을하고 있기 때문에 이것은 우리가 프런트 엔드에 듣는 종료 한 것을 서버에 불필요한 부하를 만듭니다.

    내가 (다른 사람뿐만 아니라에 실행할 수 있음) 해결하려고하는 문제는 사용자가 입력 필드에 정보를 입력 할 때, 나는 느낌의 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의 (당신이 당신의 자신의 필요에 따라 사용자 정의 할 수있는 변수를) 요청 보낼 것입니다. 당신은 문제가 정확히 여기 무슨 일이 일어나고 있는지 이해하는 데 문제가있는 경우 바로 경우 블록 전에 콘솔에 xhrCount 및 xhrQueue를 기록합니다.

  11. 11.다만이 같은 다른 하나를 전송하기 전에 대기중인 아약스 요청을 취소 할 수 예를 들어 ajax.abort ()를 사용

    다만이 같은 다른 하나를 전송하기 전에 대기중인 아약스 요청을 취소 할 수 예를 들어 ajax.abort ()를 사용

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

  12. 12.이 작업을 사용하여 모든 연속 아약스 호출을 중단 할 수 있습니다

    이 작업을 사용하여 모든 연속 아약스 호출을 중단 할 수 있습니다

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

  13. 13.거기에 그것을 할 신뢰할 수있는 방법은 없으며, 요청이 이동되면 난 그것을 시도하지 것이다; 합리적으로 반응 할 수있는 유일한 방법은 응답을 무시하는 것이다.

    거기에 그것을 할 신뢰할 수있는 방법은 없으며, 요청이 이동되면 난 그것을 시도하지 것이다; 합리적으로 반응 할 수있는 유일한 방법은 응답을 무시하는 것이다.

    사용자가 많은 연속 XHR을 트리거 버튼에 너무 자주 클릭, 여기 당신이 많은 옵션이 있습니다, 하나 XHR까지 버튼을 반환 차단, 또는 또 다른 힌트를 실행하는 동안 새로운 XHR을 트리거도 그나마 : 대부분의 경우,이 같은 상황에서 발생할 수 있습니다 사용자는 다시 기댈 - 또는 보류중인 XHR 응답하지만 최근 폐기합니다.

  14. 14.Ajax 요청을 중단뿐만 아니라 시작 다음 코드 쇼 :

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

  15. 15.나는 폴링의 문제를했고 페이지가 여론 조사 내 원인 그렇게 계속 폐쇄 된 후 MySQL의 값이 나는 아약스 요청을 살해에도 불구하고, 페이지 폐쇄 후 향후 50 초간 세트 당하고으로 사용자는 I를 업데이 트를 그리워 것 난 반면, 그 종료하고 새로운 시작 때까지 내가 0 = offpage로 내 데이터베이스에 값을 설정했다 그래서 뭐, 설문 조사에 자체 업데이트되지 않습니다 VAR을 설정 $ _SESSION을 사용하여, 주변에 떨어져 생각 폴링 I 쿼리 행과 반환 거짓 그; 이 공을 때 폴링 쿼리하는 것은 분명히 당신에게 현재 값을 얻을 것이다으로 ...

    나는 폴링의 문제를했고 페이지가 여론 조사 내 원인 그렇게 계속 폐쇄 된 후 MySQL의 값이 나는 아약스 요청을 살해에도 불구하고, 페이지 폐쇄 후 향후 50 초간 세트 당하고으로 사용자는 I를 업데이 트를 그리워 것 난 반면, 그 종료하고 새로운 시작 때까지 내가 0 = offpage로 내 데이터베이스에 값을 설정했다 그래서 뭐, 설문 조사에 자체 업데이트되지 않습니다 VAR을 설정 $ _SESSION을 사용하여, 주변에 떨어져 생각 폴링 I 쿼리 행과 반환 거짓 그; 이 공을 때 폴링 쿼리하는 것은 분명히 당신에게 현재 값을 얻을 것이다으로 ...

    나는 희망이 도움이

  16. 16.) xhr.abort (만약; 페이지를 다시로드의 원인

    ) xhr.abort (만약; 페이지를 다시로드의 원인

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

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

  17. 17.나는 데이터가 미리 정의 된 대기 시간 내에 서버에서 반환되지 않는 경우 AJAX가 request-- 취소하는 방법을 보여주는 데모를 공유했다.

    나는 데이터가 미리 정의 된 대기 시간 내에 서버에서 반환되지 않는 경우 AJAX가 request-- 취소하는 방법을 보여주는 데모를 공유했다.

    HTML :

    <div id="info"></div>

    JS CODE :

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

    18. from https://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery의 $ .ready의 순수 자바 스크립트 상당 () - 함수를 호출하는 방법을 페이지가 / DOM은 그것을위한 준비가되면 [중복]  (0) 2020.09.21
[JQUERY] 어떻게 jQuery로 쿠키 설정 해제 / 설정합니까?  (0) 2020.09.21
[JQUERY] 요소의 jQuery 스크롤  (0) 2020.09.21
[JQUERY] jQuery를 / 자바 스크립트 : iframe이 내용에 접근  (0) 2020.09.21
[JQUERY] jQuery.Ajax하여 파일을 다운로드  (0) 2020.09.21
,

티스토리툴바