我们在切换选项卡的时候，如果使用的是ajax技术，会碰到如下情况：点击tab1选项，服务器发出一个Ajax请求获取该选项tab1的内容数据。如果请求正在处理，并且在此过程中你点击了tab2选项并发送一个新的请求，服务器现在就有了两个请求挂起。页面出现的结果是，在显示的数据内容时，先显示tab1选项的内容数据，再接着显示tab2选项内容。
在这种情况下，我们应该取消tab1挂起的请求，仅允许处理当前（tab2）请求新建一个index.html
代码如下：<!DOCTYPE HTML>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{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 src="./js/jquery-1.4.4.min.js" type="text/javascript"></script><script type="text/javascript">$(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></head><body><div class="tab"> <div class="nav"> <ul> <li class="selected" name="1">tab 1</li> <li name="2">tab 2</li> <li name="3">tab 3</li> </ul> </div><div id="box">
</div>
</div> </body></html>再建立一个4.php文件
代码如下：<?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.php + js(文件夹) +img(文件夹)放到www文件中，用浏览器运行