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 strcmp使用说明
Apr 22 PHP
php购物车实现代码
Oct 10 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
Jun 26 PHP
PHP调用MySQL存储过程并返回值的方法
Dec 26 PHP
php生成4位数字验证码的实现代码
Nov 23 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
Feb 15 PHP
微信公众平台DEMO(PHP)
May 04 PHP
PHP如何实现跨域
May 30 PHP
MAC下通过改apache配置文件切换php多版本的方法
Apr 26 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
Jun 07 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
Nov 17 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 函数执行效率的小比较
2010/10/17 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
PHP微信分享开发详解
2017/01/14 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python之列表实现栈的工作功能
2019/01/28 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
高中自我鉴定范文
2013/11/03 职场文书
便利店投资创业计划书
2014/02/08 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
机关作风建设工作总结
2014/10/23 职场文书
队名及霸气口号大全
2015/12/25 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS