ajax取消挂起请求的处理方法
ajax取消挂起请求的处理方法,需要的朋友可以参考一下
我们在切换选项卡的时候,如果使用的是ajax技术,会碰到如下情况:点击tab1选项,服务器发出一个Ajax请求获取该选项tab1的内容数据。如果请求正在处理,并且在此过程中你点击了tab2选项并发送一个新的请求,服务器现在就有了两个请求挂起。页面出现的结果是,在显示的数据内容时,先显示tab1选项的内容数据,再接着显示tab2选项内容。 在这种情况下,我们应该取消tab1挂起的请求,仅允许处理当前(tab2)请求 新建一个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="http://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"> </div> </div>
再建立一个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文件中,用浏览器运行