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 SQLite类
May 07 PHP
PHP Memcached应用实现代码
Feb 08 PHP
php实现图片添加描边字和马赛克的方法
Dec 10 PHP
php简单实现屏蔽指定ip段用户的访问
Apr 29 PHP
PHP中4种常用的抓取网络数据方法
Jun 04 PHP
php读取der格式证书乱码解决方法
Jun 22 PHP
php简单截取字符串代码示例
Oct 19 PHP
PHP数据库操作四:mongodb用法分析
Aug 16 PHP
PHP实现的字符串匹配算法示例【sunday算法】
Dec 19 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
Oct 16 PHP
Laravel 6.2 中添加了可调用容器对象的方法
Oct 22 PHP
PHP中通过getopt解析GNU C风格命令行选项
Nov 18 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
js获取form的方法
2015/05/06 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
python常用函数详解
2016/09/13 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
彻底搞懂Python字符编码
2018/01/23 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
AOP的定义以及作用
2013/09/08 面试题
网络安全类面试题
2015/08/01 面试题
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
本科毕业生求职自荐信
2014/04/09 职场文书
安全生产管理责任书
2014/04/16 职场文书
难忘的一天教学反思
2014/04/30 职场文书
重温入党誓词主持词
2015/06/29 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS