ajax取消挂起请求的处理方法


Posted in PHP onMarch 18, 2013

我们在切换选项卡的时候,如果使用的是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="https://3water.com/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文件中,用浏览器运行
PHP 相关文章推荐
如何在PHP中使用Oracle数据库(6)
Oct 09 PHP
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
Jan 29 PHP
PHP开发中常用的三个表单验证函数使用小结
Mar 03 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
Jan 12 PHP
解析thinkphp中的导入文件标签
Jun 20 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
Aug 23 PHP
Zend Framework教程之Application用法实例详解
Mar 14 PHP
php实现图片缩略图的方法
Mar 29 PHP
各种快递查询--Api接口
Apr 26 PHP
php实现websocket实时消息推送
Mar 30 PHP
PHP实现的mongoDB数据库操作类完整实例
Apr 10 PHP
PHP 二维array转换json的实例讲解
Aug 21 PHP
smarty 缓存控制前的页面静态化原理
Mar 15 #PHP
PHP中使用cURL实现Get和Post请求的方法
Mar 13 #PHP
php文本转图片自动换行的方法
Mar 13 #PHP
用Php编写注册后Email激活验证的实例代码
Mar 11 #PHP
php 生成唯一id的几种解决方法
Mar 08 #PHP
PHP Directory 函数的详解
Mar 07 #PHP
PHP重定向的3种方式
Mar 07 #PHP
You might like
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
用Python编写简单的定时器的方法
2015/05/02 Python
12步教你理解Python装饰器
2016/02/25 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python实现读取json文件到excel表
2017/11/18 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
毕业生医学检验求职信
2013/10/16 职场文书
思想政治教育专业个人求职信范文
2013/12/20 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
运动会100米解说词
2014/01/23 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers