How to handle ajax cancellation of pending requests

When we switch the tab, if ajax technology is used, we will encounter the following situation: Click the tab1 option, the server sends an Ajax request to obtain the content data of this option tab1. If the request is being processed and you click the tab2 option in the process and send a new request, the server now has two pending requests. The result displayed on the page is that the content data of the tab1 option is displayed first when the data content is displayed, and then the content of the tab2 option is displayed. In this case, we should cancel the tab1 pending request and only allow the current (tab2) request to be processed to create a new index.html Code as follows:

Copy codeThe Code is 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 the small icon after loading.
// $ ("# Box"). removeClass ("addBg ");
// Condition ('{box'}.html (data );
$ ("# Box"). removeClass ("addBg" ).html (data );

},
BeforeSend: function ()//
{
// Wait for a small icon in the loading process and clear the content of the box first.
$ ("# Box" pai.html (''). addClass (" addBg ");
}
});

$ ('. Nav ul li'). click (function ()
{

$ (This). addClass ('selected ')
. Siblings (). removeClass ('selected ');
Var liName = $ (this). attr ('name ');
// Alert (liName );
// Wait for a small icon in the loading process and clear the content of the box first.
$ ("# Box" pai.html (''). addClass (" addBg ");

If (ajax)
{
Ajax. abort ();
// Alert (ajax );
}

Ajax = $. get (
'4. php ',
{What: liName },
Function (data)
{
// Remove the small icon after loading.
$ ("# Box"). removeClass ("addBg ");
Certificate ('{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 another 4. php file Code as follows:Copy codeThe Code is as follows: <? Php
Sleep (1 );
If (isset ($ _ GET ['whe'])
{
Switch ($ _ GET ['whe'])
{
Case 1: echo '000000 ';
Break;
Case 2:
Echo '20140901 ';
Break;
Case 3:
Echo '20140901 ';
Break;
Default: echo 'no content ';
}
}

?>

Create a folder js,
Put a jquery-1.4.4.min.js file inside,
Not necessarily 1.4.4;
Create a folder img,
Put a loading.gif image in the picture, put index.html + 4.php + js (folder) + img (folder) in the www file, and run it in the browser.