ajax取消挂起请求的处理方法

2015-01-24信息快讯网

ajax取消挂起请求的处理方法,需要的朋友可以参考一下

我们在切换选项卡的时候,如果使用的是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="http://www.jb51.net/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中如何判断一个网页请求是ajax请求还是普通请求
php一些错误处理的方法与技巧总结
解析php mysql 事务处理回滚操作(附实例)
浅析51个PHP处理字符串的函数
Ajax+PHP快速上手及简单应用说明
PHP与javascript实现变量交互的示例代码
php图像处理函数大全(推荐收藏)
php对图像的各种处理函数代码小结
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
如何使用PHP实现javascript的escape和unescape函数
解析CI的AJAX分页 另类实现方法
基于PHP+Ajax实现表单验证的详解
AJAX的跨域访问-两种有效的解决方法介绍
php页面消耗内存过大的处理办法
smarty 缓存控制前的页面静态化原理
PHP中使用cURL实现Get和Post请求的方法
php安全开发 添加随机字符串验证,防止伪造跨站请求
php处理文件的小例子(解压缩,删除目录)
PHP/Javascript/CSS/jQuery常用知识大全详细整理第1/2页
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
PHP数组无限分级数据的层级化处理代码
php和javascript之间变量的传递实现代码
ajax php传递和接收变量实现思路及代码
PHP获取http请求的头信息实现步骤
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
php+ajax做仿百度搜索下拉自动提示框(有实例)
ajax在joomla中的原生态应用代码
PHP中运用jQuery的Ajax跨域调用实现代码
shopex主机报错误请求解决方案(No such file or directory)
php中防止伪造跨站请求的小招式
苹果logo高高挂起 发布会真的不远了!
©2014-2024 dbsqp.com