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版(1)
Oct 09 PHP
解决phpmyadmin 乱码,支持gb2312和utf-8
Nov 20 PHP
PHP中Date获取时间不正确怎么办
Jun 05 PHP
PHP中使用gettext来支持多语言的方法
May 02 PHP
超级实用的7个PHP代码片段分享
Jan 05 PHP
PHP和javascript常用正则表达式及用法实例
Jul 01 PHP
解读PHP中上传文件的处理问题
May 29 PHP
PHP中header函数的用法及其注意事项详解
Jun 13 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
Jul 10 PHP
PHP实现的登录页面信息提示功能示例
Jul 24 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
Feb 25 PHP
使用PHP开发留言板功能
Nov 19 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的开合式多级菜单程序
2006/10/09 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
php中session定期自动清理的方法
2015/11/12 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
详解VUE调用本地json的使用方法
2019/05/15 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
使用python实现接口的方法
2017/07/07 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
在Python中使用Neo4j的方法
2019/03/14 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
python新手学习使用库
2020/06/11 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
医学生自我鉴定范文
2013/11/08 职场文书
校园达人秀策划书
2014/01/12 职场文书
超市开学活动方案
2014/03/01 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
图神经网络GNN算法
2022/05/11 Python
Java 数组的使用
2022/05/11 Java/Android