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中HTTP方式下的Gzip压缩传输方法举偶
Feb 15 PHP
PHP Google的translate API代码
Dec 10 PHP
php短域名转换为实际域名函数
Jan 17 PHP
PHP读取ACCESS数据到MYSQL的代码
May 11 PHP
PHP--用万网的接口实现域名查询功能
Dec 13 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
May 04 PHP
php中$_GET与$_POST过滤sql注入的方法
Nov 03 PHP
php从memcache读取数据再批量写入mysql的方法
Dec 29 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
Jun 10 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
Feb 15 PHP
一个实用的php验证码类
Jul 06 PHP
Yii使用DbTarget实现日志功能的示例代码
Jul 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
围观tangram js库
2010/12/28 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
pandas-resample按时间聚合实例
2019/12/27 Python
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
青蓝工程实施方案
2014/03/27 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
车辆年审委托书范本
2014/09/18 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书