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 相关文章推荐
PHP4实际应用经验篇(9)
Oct 09 PHP
如何用C语言编写PHP扩展的详解
Jun 13 PHP
PHP输出缓存ob系列函数详解
Mar 11 PHP
php自定义函数截取汉字长度
May 15 PHP
深入分析PHP引用(&amp;)
Sep 04 PHP
php生成zip文件类实例
Apr 07 PHP
php 类自动载入的方法
Jun 03 PHP
WordPress中缩略图的使用以及相关技巧
Nov 24 PHP
visual studio code 调试php方法(图文详解)
Sep 15 PHP
thinkPHP5框架中widget的功能与用法详解
Jun 11 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
May 13 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
May 02 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支持页面回退的两种方法[转]
2007/02/14 PHP
mysql 字段类型说明
2007/04/27 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
PHP数据过滤的方法
2013/10/30 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
Python_LDA实现方法详解
2017/10/25 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
Python函数参数分类原理详解
2020/05/28 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
财务总经理岗位职责
2014/02/16 职场文书
2014年客房部工作总结
2014/11/22 职场文书