• Multiple AJAX requests are sent at the same time and are not dependent on each other.
• Multiple AJAX requests are interdependent and must be sequential.
• Multiple requests are sent at the same time, only one last request is required.
1th case
Application scenario: A lot of this scene, a page open is multiple areas at the same time request the background to get their own data, no dependence, no order.
Processing scheme: Directly using jquery ajax functions. This is used very much, here Conlio, can look at the following code example.
2nd case
Scenario: Multiple AJAX requests that require sequential execution, and the execution parameters of the latter Ajax request are the result of the previous AJAX application. For example, when a user logs in, we send a request to get the user's application ID, and then send a request using the application ID to get a specific application (the example may not be too appropriate, but that's basically what it means).
Processing method:
1. Use ajax parameter Async set to False to perform the synchronization operation. (This method is only suitable for the same domain operation, the following two methods need to be used across domains)
2. Use Ajax nesting (this same 1th scenario)
3. Use the queue to operate
jquery Ajax Queue Operation Core Code:
Copy Code code as follows:
(function ($) {
var ajaxrequest = {};
$.ajaxqueue = function (settings) {
var options = $.extend ({className: ' Defeartname '}, $.ajaxsettings, settings);
var _complete = Options.complete;
$.extend (Options, {
Complete:function () {
if (_complete)
_complete.apply (this, arguments);
if ($ (document). Queue (options.classname). length > 0) {
$ (document). Dequeue (Options.classname);
} else {
Ajaxrequest[options.classname] = false;
}
}
});
$ (document). Queue (Options.classname, function () {
$.ajax (options);
});
if ($ (document). Queue (options.classname). length = = 1 &&!ajaxrequest[options.classname]) {
Ajaxrequest[options.classname] = true;
$ (document). Dequeue (Options.classname);
}
};
}) (JQuery);
3rd Chinese Case
Scenario: The typical operation of the AutoComplete control is that we can use the 2nd approach, but we may only need to return the result after the last keystroke, so it would be wasteful to use the 2nd approach.
Processing method: Leave the last request, cancel the request.
Copy Code code as follows:
(function ($) {
var jqxhr = {};
$.ajaxsingle = function (settings) {
var options = $.extend ({className: ' Defeartname '}, $.ajaxsettings, settings);
if (Jqxhr[options.classname]) {
Jqxhr[options.classname].abort ();
}
Jqxhr[options.classname] = $.ajax (options);
};
}) (JQuery);
For these cases are in the case of multiple AJAX requests, the response time cannot be controlled. Here is the complete demo code.
Copy Code code as follows:
(function ($) {
var jqxhr = {},
Ajaxrequest = {};
$.ajaxqueue = function (settings) {
var options = $.extend ({className: ' Defeartname '}, $.ajaxsettings, settings);
var _complete = Options.complete;
$.extend (Options, {
Complete:function () {
if (_complete)
_complete.apply (this, arguments);
if ($ (document). Queue (options.classname). length > 0) {
$ (document). Dequeue (Options.classname);
} else {
Ajaxrequest[options.classname] = false;
}
}
});
$ (document). Queue (Options.classname, function () {
$.ajax (options);
});
if ($ (document). Queue (options.classname). length = = 1 &&!ajaxrequest[options.classname]) {
Ajaxrequest[options.classname] = true;
$ (document). Dequeue (Options.classname);
}
};
$.ajaxsingle = function (settings) {
var options = $.extend ({className: ' Defeartname '}, $.ajaxsettings, settings);
if (Jqxhr[options.classname]) {
Jqxhr[options.classname].abort ();
}
Jqxhr[options.classname] = $.ajax (options);
};
}) (JQuery);
var Ajaxsleep = (function () {
var _settings = {
Type: ' Get ',
Cache:false,
Success:function (msg) {
var thtml = $ (' #txtContainer '). html ();
$ (' #txtContainer '). HTML (thtml + "<br/>" + msg);
}
};
return {
Get:function (seconds, mode, IsAsync) {
var mode = Mode | | ' Ajax ',
IsAsync = IsAsync | | False
$[mode] ($.extend (_settings, {
URL: "responsepage.aspx?second=" + seconds,
Async:isasync,
ClassName: ' Get '
}));
},
Post:function (seconds, mode, IsAsync) {
var mode = Mode | | ' Ajax ',
IsAsync = IsAsync | | False
$[mode] ($.extend (_settings, {
Type: ' POST ',
URL: "Postpage.aspx",
Data: {second:seconds},
Async:isasync,
ClassName: ' POST '
}));
}
};
} ());
var launch = function (settings) {
$ (' #txtContainer '). html (');
var mode = Settings.mode,
IsAsync = Settings.isasync;
Ajaxsleep.get (A, mode, isasync);
Ajaxsleep.get (ten, Mode, IsAsync);
Ajaxsleep.get (8, mode, IsAsync);
Ajaxsleep.post (6, mode, isasync);
Ajaxsleep.post (4, mode, isasync);
Ajaxsleep.post (2, mode, isasync);
}
$ (document). Ready (function () {
1th case
$ (' #btnLaunchAsync '). Click (function () {
Launch ({isasync:true});
});
2nd case
$ (' #btnLaunchSync '). Click (function () {
Launch ({});
});
2nd case
$ (' #btnLaunchQueue '). Click (function () {
Launch ({mode: ' Ajaxqueue ', isasync:true});
});
3rd case
$ (' #btnLaunchSingle '). Click (function () {
Launch ({mode: ' Ajaxsingle ', isasync:true});
});
});
Default.html
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script src= "Https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type= "Text/javascript" >< /script>
<script type= "Text/javascript" src= "Js/default.js" ></script>
<body>
<form id= "Form1" runat= "Server" >
<input type= "button" id= "Btnlaunchasync" value= "Launch asynchronous Request"/>
<input type= "button" id= "Btnlaunchsync" value= "Launch synchronous Request"/>
<input type= "button" id= "Btnlaunchqueue" value= "Launch requested Queue"/>
<input type= "button" id= "Btnlaunchsingle" value= "Launch single Request"/>
<div id= "Txtcontainer" ></div>
</form>
</body>
Postpage.aspx & Responsepage.aspx
Copy Code code as follows:
Responsepage.aspx
protected void Page_Load (object sender, EventArgs e)
{
int seconds = Int. Parse (request.querystring["second"]);
Thread.Sleep (seconds*1000);
Response.Write ("Get:selpt for" + seconds. ToString () + "SEC (s)");
}
Postpage.aspx
protected void Page_Load (object sender, EventArgs e)
{
int seconds = Int. Parse (request.form["second"]);
Thread.Sleep (seconds * 1000);
Response.Write ("Post:selpt for" + seconds. ToString () + "SEC (s)");
}
Post Note: Personal ability is limited, if have mistake please instruct. These are just some specific cases of processing, if an AJAX request can solve the problem do not use two of requests to deal with, after all, the need to occupy resources. I still believe that there is no best solution, only the most suitable solution.
