我们在切换选项卡的时候，如果使用的是ajax技术，会碰到如下情况：点击tab1选项，服务器发出一个Ajax请求获取该选项tab1的内容数据。如果请求正在处理，并且在此过程中你点击了tab2选项并发送一个新的请求，服务器现在就有了两个请求挂起。页面出现的结果是，在显示的数据内容时，先显示tab1选项的内容数据，再接着显示tab2选项内容。 在这种情况下，我们应该取消tab1挂起的请求，仅允许处理当前（tab2）请求 新建一个index.html 代码如下：

#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=\"http://www.phpstudy.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\"> </div>
</div>