jQuery를 사용하여 Ajax 요청 중단

질문자 :lukewm

jQuery를 사용하여 아직 응답을 받지 못한 Ajax 요청을 취소/중단할 수 있습니까?

대부분의 jQuery Ajax 메서드는 XMLHttpRequest(또는 이에 상응하는) 객체를 반환하므로 abort() 만 사용할 수 있습니다.

문서 참조:

• 중단 방법 ( MSDN ). 현재 HTTP 요청을 취소합니다.
• 중단() ( MDN ). 요청이 이미 전송된 경우 이 메서드는 요청을 중단합니다.

 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: jQuery 3부터 ajax 메서드는 이제 abort와 같은 추가 메서드가 포함된 promise를 반환하므로 위의 코드는 여전히 작동하지만 반환되는 객체는 더 이상 xhr 여기에서 3.0 블로그를 참조하십시오.

업데이트 3 : xhr.abort() 여전히 jQuery 3.x에서 작동합니다. 업데이트 2 가 정확하다고 가정하지 마십시오. jQuery Github 저장소에 대한 추가 정보 .

meouw

요청을 회수할 수 없지만 응답이 무시되는 시간 초과 값을 설정할 수 있습니다. jquery AJAX 옵션에 대해서는 이 페이지를 참조하십시오. 제한 시간이 초과되면 오류 콜백이 호출될 것이라고 생각합니다. 모든 AJAX 요청에는 이미 기본 시간 초과가 있습니다.

요청 객체에 abort() 메서드를 사용할 수도 있지만 클라이언트가 이벤트 수신을 중지하게 되지만 서버가 이벤트를 처리하는 것을 중지하지는 않을 수 있습니다.

tvanfosson

그것은 asynchronous 요청입니다. 즉, 일단 전송되면 밖으로 나옵니다.

AJAX 요청으로 인해 매우 비싼 작업을 시작하는 경우 가장 좋은 방법은 서버를 열어 취소 요청을 수신 대기하고 서버가 수행 중인 작업을 중지하도록 알리는 AJAX

그렇지 않으면 단순히 AJAX 응답을 무시하십시오.

Yuval Adam

호출을 배열에 저장한 다음 각각에 대해 xhr.abort()를 호출합니다.

엄청난 경고: 요청을 중단할 수 있지만 이는 클라이언트 측에서만 가능합니다. 서버 측에서 여전히 요청을 처리 중일 수 있습니다. 세션 데이터와 함께 PHP 또는 ASP와 같은 것을 사용하는 경우 Ajax가 완료될 때까지 세션 데이터가 잠깁니다. 따라서 사용자가 웹사이트를 계속 탐색할 수 있도록 하려면 session_write_close ()를 호출해야 합니다. 이렇게 하면 세션이 저장되고 잠금이 해제되어 계속 대기 중인 다른 페이지가 계속 진행됩니다. 이것이 없으면 잠금이 제거될 때까지 여러 페이지가 대기할 수 있습니다.

Tei

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

• 카운터 만들기
• AJAX 요청을 시작할 때 카운터 증가
• counter의 현재 값을 사용하여 요청을 "스탬프"합니다.
• 성공 콜백에서 스탬프를 카운터와 비교하여 가장 최근 요청인지 확인합니다.

대략적인 코드 개요:

 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에 대한 데모

Salman A

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

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% 확신할 수 없습니다. 이것은 교착 상태 상황을 일으킬 수 있습니다. 우리의 테스트에서는 그러한 상황을 재현할 수 없었습니다.

oyophant

항상 이와 같은 작업을 수행하는 것이 가장 좋습니다.

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

하지만 if 문을 확인하여 ajax 요청이 null인지 여부를 확인하는 것이 훨씬 좋습니다.

Tharindu Kumara

그냥 xhr에 전화하세요. abort() jquery ajax 객체 또는 기본 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);

cuixiping

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

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

불필요한 요청을 실행하지 않고 프런트 엔드의 빠른 속도를 유지하기 위해 다음을 수행했습니다.

 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마다 하나의 요청을 보냅니다(자신의 필요에 맞게 사용자 정의할 수 있는 변수). 여기서 정확히 무슨 일이 일어나고 있는지 이해하는 데 문제가 있으면 if 블록 직전에 xhrCount 및 xhrQueue

brianrhea

다음을 사용하여 지속적인 ajax 호출을 중단할 수 있습니다.

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

Soubhagya Kumar Barik

라이브 검색 솔루션을 수행 중이었고 최신/가장 최근 요청보다 오래 걸릴 수 있는 보류 중인 요청을 취소해야 했습니다.

제 경우에는 다음과 같이 사용했습니다.

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

Billy

예를 들어 ajax.abort()를 사용하면 이와 같이 다른 요청을 보내기 전에 보류 중인 Ajax 요청을 중단할 수 있습니다.

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

Joecoder001

신뢰할 수 있는 방법은 없으며 요청이 이동 중이면 시도조차 하지 않습니다. 합리적으로 반응하는 유일한 방법은 반응을 무시 하는 것입니다.

대부분의 경우 다음과 같은 상황에서 발생할 수 있습니다. 사용자가 많은 연속 XHR을 트리거하는 버튼을 너무 자주 클릭합니다. 여기에는 XHR이 반환될 때까지 버튼을 차단하거나 다른 사용자가 힌트를 실행하는 동안 새 XHR을 트리거하지 않는 다양한 옵션이 있습니다. 사용자가 뒤로 기대거나 보류 중인 XHR 응답을 폐기할 수 있습니다.

comeGetSome

다음 코드는 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!" >

zloctb

폴링에 문제가 있었고 페이지가 닫히면 폴링이 계속되었으므로 ajax 요청을 종료했음에도 불구하고 페이지를 닫은 후 다음 50초 동안 mysql 값이 설정되기 때문에 사용자가 업데이트를 놓칠 수 있었습니다. $_SESSION을 사용하여 var를 설정하면 종료되고 새로운 것이 시작될 때까지 자체적으로 업데이트되지 않습니다. 그래서 내가 한 일은 데이터베이스의 값을 0 = offpage 로 설정하는 것입니다 폴링 해당 행을 쿼리하고 false를 반환합니다. 폴링에서 쿼리하면 분명히 현재 값을 얻을 수 있으므로 0이면 ...

도움이 되었기를 바랍니다.

Marcus

만약 xhr.abort(); 페이지 새로고침을 유발하고,

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

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

vikyd

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

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

ganesh

이것은 위의 많은 답변을 기반으로 한 구현입니다.

 var activeRequest = false; //global var var filters = {...}; apply_filters(filters); //function triggering the ajax request function apply_filters(filters){ //prepare data and other functionalities var data = {}; //limit the ajax calls if (activeRequest === false){ activeRequest = true; }else{ //abort if another ajax call is pending $request.abort(); //just to be sure the ajax didn't complete before and activeRequest it's already false activeRequest = true; } $request = $.ajax({ url : window.location.origin + '/your-url.php', data: data, type:'POST', beforeSend: function(){ $('#ajax-loader-custom').show(); $('#blur-on-loading').addClass('blur'); }, success:function(data_filters){ data_filters = $.parseJSON(data_filters); if( data_filters.posts ) { $(document).find('#multiple-products ul.products li:last-child').after(data_filters.posts).fadeIn(); } else{ return; } $('#ajax-loader-custom').fadeOut(); }, complete: function() { activeRequest = false; } }); }

Adrian P.

출처 : http:www.stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery