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支持页面回退的两种方法
Jan 10 PHP
THINKPHP+JS实现缩放图片式截图的实现
Mar 07 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
Aug 15 PHP
openPNE常用方法分享
Nov 29 PHP
PHP中如何判断AJAX提交的数据
Feb 05 PHP
php xml常用函数的集合(比较详细)
Jun 06 PHP
在wamp集成环境下升级php版本(实现方法)
Jul 01 PHP
删除html标签得到纯文本可处理嵌套的标签
Apr 28 PHP
PHP中的替代语法介绍
Jan 09 PHP
Laravel5.* 打印出执行的sql语句的方法
Jul 24 PHP
PHP中散列密码的安全性分析
Jul 26 PHP
PHP 裁剪图片
Mar 09 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递归方法实现无限分类实例代码
2014/02/28 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
python 读取文件并替换字段的实例
2018/07/12 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
python集合的新增元素方法整理
2020/12/07 Python
python lambda的使用详解
2021/02/26 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
法国体育用品商店:GO Sport
2019/10/23 全球购物
超市实习总结自我鉴定
2013/09/19 职场文书
集团公司人力资源部岗位职责
2014/01/03 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
优秀高中学生评语
2014/12/30 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
关于童年的读书笔记
2015/06/26 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫