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 相关文章推荐
实用函数2
Nov 08 PHP
php 分页函数multi() discuz
Jun 21 PHP
php之XML转数组函数的详解
Jun 07 PHP
分享下页面关键字抓取components.arrow.com站点代码
Jan 30 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
Oct 16 PHP
讲解WordPress开发中一些常用的debug技巧
Dec 18 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
Feb 15 PHP
laravel学习教程之关联模型
Jul 30 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
Oct 19 PHP
PHP实现无限分类的实现方法
Nov 14 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
Sep 15 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
Dec 26 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
关于文本留言本的分页代码
2006/10/09 PHP
php中smarty区域循环的方法
2015/06/11 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
python进阶教程之循环对象
2014/08/30 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
python3.7.0的安装步骤
2018/08/27 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
python 魔法函数实例及解析
2019/09/25 Python
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
医院党员公开承诺书
2014/08/30 职场文书
安全生产月标语
2014/10/07 职场文书
初婚初育证明范本
2014/11/24 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
Python如何用re模块实现简易tokenizer
2022/05/02 Python