ajax 취소 요청 처리 방법

옵션 을 전환 할 때 ajax 기술 을 사용 하면 다음 과 같은 상황 에 부 딪 힐 수 있 습 니 다.tab 1 옵션 을 누 르 면 서버 에서 Ajax 가 이 옵션 tab 1 의 내용 데 이 터 를 가 져 오 라 고 요청 합 니 다.요청 이 처리 되 고 있 으 며,이 과정 에서 tab 2 옵션 을 누 르 고 새로운 요청 을 보 내 면 서버 에 두 개의 요청 이 걸 립 니 다.페이지 에 나타 난 결 과 는 데이터 내용 을 표시 할 때 tab 1 옵션 의 내용 데 이 터 를 먼저 표시 한 다음 tab 2 옵션 의 내용 을 표시 하 는 것 입 니 다.이러한 상황 에서 우 리 는 tab 1 이 걸 어 놓 은 요청 을 취소 해 야 합 니 다.현재(tab 2)에서 index.html 코드 를 새로 만 들 기 를 요청 할 수 있 습 니 다.

<style><!--
*{margin:0;padding:0;}
li{list-style-type:none;}
.tab{
width:240px;
margin: 50px auto;
}
.nav ul{
clear:both;
}
.nav ul li{
margin-right: 4px;
padding: 1px 6px;
border:1px solid #ccc;
width:60px;
background: #f1f1f1;
float: left;
text-align: center;
cursor: pointer;
}
.nav ul li.selected{
color:#fff;background:blue;
}
#box{
width:238px;
border: 1px solid #ccc;
height: 100px;
clear: both;
overflow: hidden;
}
.addBg{
background: url('./img/loading.gif') no-repeat center;
}
--></style>
<script type="text/javascript" src="https://www.jb51.net/itoks/admin/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(function()
{
var ajax;
$.ajax({
type: 'GET',
url: '4.php',
data: 'what=1',
success:function(data)
{
//          
// $("#box").removeClass("addBg");
// $('#box').html(data);
$("#box").removeClass("addBg").html(data);
},
beforeSend:function() //
{
//           ,   box   
$("#box").html('').addClass("addBg");
}
});
$('.nav ul li').click(function()
{
$(this).addClass('selected')
.siblings().removeClass('selected');
var liName = $(this).attr('name');
//alert(liName);
//           ,   box   
$("#box").html('').addClass("addBg");
if(ajax)
{
ajax.abort();
//alert(ajax);
}
ajax = $.get(
'4.php',
{what : liName},
function(data)
{
//          
$("#box").removeClass("addBg");
$('#box').html(data);
}
);
});
});
// ]]></script>
<div class="tab">
<div class="nav">
<ul>
<li class="selected">tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
</ul>
</div>
<div id="box">&nbsp;</div>
</div>

4.phop 파일 코드 를 다시 만 들 려 면 다음 과 같 습 니 다.

<?php 
sleep(1); 
if(isset($_GET['what'])) 
{ 
switch($_GET['what'])
{ 
case 1: echo '111111111111111';
break; 
case 2:
echo '22222222222222222';
break;
case 3:
echo '33333333333333333';
break;
default: echo '    '; 
}
}
?>

폴 더 js 를 만 들 려 면 jquery-1.4.4.min.js 파일 을 넣 어야 합 니 다.꼭 1.4.4 버 전이 아 닙 니 다.폴 더 img 을 만 들 고 loading.gif 가 기다 리 는 그림 을 넣 어 index.html+4.phop+js(폴 더)+img(폴 더)을 ww 파일 에 넣 고 브 라 우 저 로 실행 합 니 다.