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中的正规表达式(二)
Oct 09 PHP
php中的数组操作函数整理
Aug 18 PHP
php操作JSON格式数据的实现代码
Dec 24 PHP
PHP fopen 读取带中文URL地址的一点见解
Sep 25 PHP
PHP分页效率终结版(推荐)
Jul 01 PHP
PHP处理大量表单字段的便捷方法
Feb 07 PHP
php简单实现批量上传图片的方法
May 09 PHP
PHP标准类(stdclass)用法示例
Sep 28 PHP
PHP 应用容器化以及部署方法
Feb 12 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
Aug 06 PHP
Yii框架参数配置文件params用法实例分析
Sep 11 PHP
TP5框架实现自定义分页样式的方法示例
Apr 05 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结点属性的实现代码
2013/10/22 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
解决python 上传图片限制格式问题
2019/10/30 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
详解Python实现进度条的4种方式
2020/01/15 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
python如何调用百度识图api
2020/09/29 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
计算机应用专业毕业生求职信
2013/10/24 职场文书
大学生入党思想汇报
2014/01/01 职场文书
微观物理专业自荐信
2014/01/26 职场文书
检查接待方案
2014/02/27 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
工厂无线对讲系统解决方案
2022/02/18 无线电
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS