jQuery를 사용하여 Ajax 요청 중단
아직 답변을 받지 못한 Ajax 요청을 jQuery를 사용하여 취소/중지할 수 있습니까?
하므로 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 설명서)를 참조하십시오.
UPDATE 2: jQuery 3에서 ajax 메서드는 추가 메서드(abort 등)를 사용하여 약속을 반환하므로 반환되는 오브젝트는 networked가 아니지만 위의 코드는 계속 작동합니다.xhr더이상.3.0 블로그는 이쪽을 참조해 주세요.
업데이트 3:xhr.abort()jQuery 3.x에서도 동작합니다.업데이트 2가 맞다고 생각하지 마십시오.jQuery Github 저장소에 대한 자세한 정보.
요청을 호출할 수는 없지만 응답이 무시될 때까지 시간 초과 값을 설정할 수 있습니다.jquery AJAX 옵션에 대해서는, 이 페이지를 참조해 주세요.타임아웃 기간이 초과되면 에러 콜백이 호출될 것으로 생각합니다.모든 AJAX 요청에는 이미 기본 타임아웃이 있습니다.
요청 오브젝트에 abort() 메서드를 사용할 수도 있지만 클라이언트는 이벤트 수신을 중지합니다.
할 수 있다 서버의 처리를 정지하지 않을 가능성이 있습니다.
이건 요청이야. 일단 보내지면 밖으로 내보내진다는 뜻이지.
가 매우 는, 「」를 해 주세요.AJAX 요구를 의 " 요청"을 입니다.AJAX이치노
않으면 하세요.AJAX★★★★★★ 。
후합니다.xhr.abort()각자에게.
큰 경고: 요청을 중단할 수 있지만 이는 클라이언트 측뿐입니다.서버 측에서 요청을 처리하고 있을 수 있습니다.세션 데이터와 함께 PHP 또는 ASP와 같은 것을 사용하는 경우 세션 데이터는 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()-method 호출을 보증하는지 여부는 100% 확신할 수 없습니다.이 때문에 교착 상태가 발생할 수 있습니다.우리의 테스트에서 우리는 그러한 상황을 재현할 수 없었다.
항상 이런 일을 하는 것이 가장 좋은 방법입니다.
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 요구가 늘인지 아닌지를 확인하는 것이 훨씬 좋습니다.
jquery ajax 객체인지 네이티브 XMLHTTPRequest 객체인지에 관계없이 xhr.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 콜을 중단할 수 있습니다.
<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>
스레드 상의 많은 사용자가 지적했듯이 클라이언트 측에서 요청이 중단되었다고 해서 서버는 요청을 계속 처리합니다.프런트 엔드에서 듣기를 중단한 작업이 실행되고 있기 때문에 서버에 불필요한 부하가 발생합니다.
제가 해결하려고 했던 문제(다른 사람도 마찬가지로)는 사용자가 입력 필드에 정보를 입력했을 때 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마다 1개의 요청을 보냅니다(필요에 따라 맞춤화할 수 있는 변수).정확히 있는지 로그로 하십시오.xhrCount ★★★★★★★★★★★★★★★★★」xhrQueueif 블록 직전에 콘솔로 이동합니다.
라이브 검색 솔루션을 실행 중이어서 최신/최신 요청보다 시간이 더 걸릴 수 있는 보류 중인 요청을 취소해야 했습니다.
제 경우에는 다음과 같은 것을 사용했습니다.
//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
예를 들어 이와 같은 다른 요청을 보내기 전에 보류 중인 모든 Ajax 요청을 중단할 수 있습니다.
//check for existing ajax request
if(ajax){
ajax.abort();
}
//then you make another ajax request
$.ajax(
//your code here
);
신뢰할 수 있는 방법은 없습니다.요구가 진행되면 시도조차 하지 않습니다.합리적으로 반응하는 유일한 방법은 응답을 무시하는 것입니다.
대부분의 경우 사용자가 버튼을 너무 자주 클릭하여 연속되는 많은 XHR을 트리거하거나, XHR이 반환될 때까지 버튼을 차단하거나, 다른 XHR이 실행 중일 때 새로운 XHR을 트리거하지 않거나, 보류 중인 XHR 응답을 폐기하는 등의 상황에서 발생할 수 있습니다.
다음 코드는 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!" >
한다면xhr.abort();페이지 새로고침의 원인이 됩니다.
그럼 설정해 주세요.onreadystatechange중단 전 방지:
// ↓ prevent page reload by abort()
xhr.onreadystatechange = null;
// ↓ may cause page reload
xhr.abort();
폴링의 문제가 있었습니다.페이지가 닫히면 폴링은 계속 진행되어 페이지 클로즈 후 50초 동안 mysql 값이 설정되어 있기 때문에 사용자가 업데이트를 놓치게 됩니다.Ajax 요청을 죽였지만 $_SESSION을 사용하여 폴링 자체에서 var가 갱신되지 않고 새로운 var가 종료될 때까지 poll이 갱신되지 않도록 주의했습니다.시작되었으므로 폴링하는 동안 데이터베이스에서 값을 0 = offpage로 설정하고 해당 행을 쿼리하고 false를 반환합니다. 폴링에서 쿼리로 0이면 현재 값이 분명히 표시됩니다.
이게 도움이 됐으면 좋겠는데
미리 정의된 대기 시간 내에 서버에서 데이터가 반환되지 않는 경우 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);
});
이것은, 상기의 많은 회답에 근거하고 있는 실장입니다.
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;
}
});
}
언급URL : https://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery
'source' 카테고리의 다른 글
| SQL에서 날짜 간 평균 시간 계산 (0) | 2022.10.27 |
|---|---|
| 오류!: SQLSTATE[42000] [1226] 'max_user_connections' 리소스(현재 값: 30)가 1000으로 구성되어 있습니다. (0) | 2022.10.27 |
| const-correct는 컴파일러에 최적화를 위한 더 많은 공간을 제공합니까? (0) | 2022.10.27 |
| 테이블에서 모두 삭제 (0) | 2022.10.27 |
| ValueError: 기본이 10인 int()의 리터럴이 잘못되었습니다. (0) | 2022.10.27 |