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 文件扩展名 获取函数
Jun 03 PHP
在VS2008中编译MYSQL5.1.48的方法
Jul 03 PHP
发款php蜘蛛统计插件只要有mysql就可用
Oct 12 PHP
PHP数组循环操作详细介绍 附实例代码
Feb 03 PHP
PHP无限分类(树形类)
Sep 28 PHP
实现获取http内容的php函数分享
Feb 16 PHP
CodeIgniter中使用cookie的三种方式详解
Jul 18 PHP
PHP内核探索:哈希表碰撞攻击原理
Jul 31 PHP
PHP+AJAX实现投票功能的方法
Sep 28 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
Mar 21 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
Jul 04 PHP
php 函数中静态变量使用的问题实例分析
Mar 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 Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
php实现读取内存顺序号
2015/03/29 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
pip install命令安装扩展库整理
2021/03/02 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
常务副总经理任命书
2014/06/05 职场文书
公司董事长岗位职责
2014/06/08 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
企业法律事务工作总结
2015/08/11 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
Nginx的gzip相关介绍
2022/05/11 Servers
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript