jQuery를 사용하여 아직 응답을받지 못한 Ajax 요청 을 취소 / 취소하려면 어떻게 해야합니까?
답변
대부분의 jQuery Ajax 메소드는 XMLHttpRequest (또는 이와 동등한) 객체를 리턴하므로을 사용할 수있다 abort().
설명서를 참조하십시오.
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 메소드는 이제 중단과 같은 추가 메소드를 사용하여 promise를 반환하므로 반환되는 객체가 xhr더 이상 아니지만 위의 코드는 여전히 작동합니다 . 3.0 블로그를 참조 하십시오 .
업데이트 3 : xhr.abort()여전히 jQuery 3.x에서 작동합니다. 업데이트 2 가 올바른 것으로 가정하지 마십시오 . jQuery Github 저장소에 대한 추가 정보 .
답변
요청을 불러올 수는 없지만 응답이 무시되는 시간 초과 값을 설정할 수 있습니다. jquery AJAX 옵션에 대해서는이 페이지 를 참조하십시오 . 시간 초과 기간이 초과되면 오류 콜백이 호출됩니다. 모든 AJAX 요청에는 이미 기본 시간 초과가 있습니다.
요청 오브젝트 에서 abort () 메소드를 사용할 수도 있지만, 클라이언트가 이벤트 수신을 중지하게하지만 서버가 처리를 중지하지 않을 수도 있습니다 .
답변
그것은의 비동기 거기의 보낸 된 후에는 의미 요청.
서버가 AJAX 요청으로 인해 비용이 많이 드는 작업을 시작하는 경우 취소 요청을 수신하기 위해 서버를 열고 별도의 AJAX 요청을 보내서 서버에서 수행중인 작업을 중지하는 것이 가장 좋습니다.
그렇지 않으면 단순히 AJAX 응답을 무시하십시오.
답변
호출 한 내용을 배열에 저장 한 다음 각각에 대해 xhr.abort ()를 호출하십시오.
거대한 경고 : 요청을 중단 할 수는 있지만 클라이언트 측뿐입니다. 서버 측에서 여전히 요청을 처리 중일 수 있습니다. 세션 데이터와 함께 PHP 또는 ASP와 같은 것을 사용하는 경우 세션 데이터는 ajax가 완료 될 때까지 잠 깁니다. 따라서 사용자가 웹 사이트를 계속 탐색 할 수있게하려면 session_write_close () 를 호출해야합니다 . 세션을 저장하고 잠금을 해제하여 계속 대기중인 다른 페이지가 진행되도록합니다. 이것이 없으면 여러 페이지가 잠금이 제거되기를 기다릴 수 있습니다.
답변
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
답변
우리는이 문제를 해결하기 위해 3 가지 접근법을 테스트했습니다.
- @meouw가 제안한대로 요청을 취소합니다.
- 모든 요청을 실행하지만 마지막 제출 결과 만 처리
- 다른 요청이 여전히 보류중인 한 새로운 요청을 방지합니다.
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 () 메서드의 호출을 보장하는지 확실하지 않으면 교착 상태가 발생할 수 있습니다. 테스트에서 우리는 그러한 상황을 재현 할 수 없었습니다.
답변
항상 이런 식으로하는 것이 가장 좋습니다.
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인지 아닌지를 확인하는 것이 훨씬 좋습니다.
