Ajax canceling a Pending request processing method _php Tips

When we switch tabs, if we are using AJAX technology, we will encounter the following: Click the TAB1 option, the server sends an AJAX request to get the content data of this option TAB1. If the request is being processed and you click the TAB2 option and send a new request during this process, the server now has two requests pending. The result of the page is that when the content of the data is displayed, the content data of the TAB1 option is displayed first, and then the TAB2 option content is displayed. In this case, we should cancel the TAB1 pending request, allowing only the current (TAB2) request to be processed to create a new index.html code as follows:

Copy Code code as follows:

<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)
{
Remove small Icons after successful loading
$ ("#box"). Removeclass ("addbg");
$ (' #box '). HTML (data);
$ ("#box"). Removeclass ("addbg"). HTML (data);

},
Beforesend:function ()//
{
Wait for the small icon in the load process, first empty box contents
$ ("#box"). html ('). addclass ("addbg");
}
});

$ ('. Nav ul li '). Click (Function ()
{

$ (this). AddClass (' selected ')
. siblings (). Removeclass (' selected ');
var Liname = $ (this). attr (' name ');
alert (liname);
Wait for the small icon in the load process, first empty box contents
$ ("#box"). html ('). addclass ("addbg");

if (Ajax)
{
Ajax.abort ();
Alert (AJAX);
}

Ajax = $.get (
' 4.php ',
{What:liname},
function (data)
{
Remove small Icons after successful loading
$ ("#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>

Create a further 4.php file code as follows:

Copy Code code as follows:

<?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 ' no content ';
}
}

?>

Also want to build a folder JS,
Put a jquery-1.4.4.min.js file in it,
Not necessarily a version 1.4.4;
Build a folder img,
Inside put a loading.gif waiting picture will index.html + 4.php + JS (folder) +img (folder) in the WWW file, run with the browser