Solutions to all kinds of problems with multiple ajax requests
This article mainly explains "all kinds of problem solutions for multi-ajax requests". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "all kinds of problem solutions for multi-ajax requests".
Multiple ajax requests are sent at the same time, independent of each other.
Multiple ajax requests depend on each other and must be sequenced.
Multiple requests are sent at the same time, and only the last request is needed.
The first kind of case
Application scenarios: there are many scenarios. When a page is opened, multiple regions are asked to get their own data at the same time. There is no dependence or order.
Solution: use the ajax function of jquery directly. This is used a lot, here from the brief, you can see the following examples in the code.
The second kind of case
Application scenario: multiple ajax requests need to be executed sequentially. The execution parameters of the last ajax request are the results of the previous ajax. For example: after the user logs in, we send a request to get the user's application ID, and then use the application ID to send a request to get the specific application content (the example is not very appropriate, but that's what it basically means).
Treatment method:
1. Synchronous operation is carried out by setting the ajax parameter async to false. (this method is only suitable for operating in the same domain, and cross-domain operations need to use the following two methods)
two。 Using ajax nesting (this is the same as in the first case)
3. Use the queue for operation
Core code for jquery ajax queue operation:
The copy code is 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) .queue > 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)
Case in the third
Application scenario: typical is the operation of the autocomplete control, which we can use in the second case, but we may only need the result returned after the last key press, so it is a bit wasteful to use the second method.
How to handle it: keep the last request, the request before cancel.
The copy code is 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 case are in multiple ajax requests, the response time can not be controlled. Here is the complete Demo code.
The copy code is 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) .queue > 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 + "+ 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 (12, mode, isAsync)
AjaxSleep.get (10, 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 () {
/ / the first case
$('# btnLaunchAsync') .click (function () {
Launch ({isAsync: true})
});
/ / the second case
$('# btnLaunchSync') .click (function () {
Launch ({})
});
/ / the second case
$('# btnLaunchQueue') .click (function () {
Launch ({mode: 'ajaxQueue', isAsync: true})
});
/ / the third case
$('# btnLaunchSingle') .click (function () {
Launch ({mode: 'ajaxSingle', isAsync: true})
});
});
Default.html
The copy code is as follows:
PostPage.aspx & ResponsePage.aspx
The copy code is 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 there is any mistake, please give us some advice. These are just based on some specific situations, if an ajax request can solve the problem, do not use two requests to deal with, after all, it takes up resources. I still believe that there is no best plan, only the most suitable one.
Thank you for reading, the above is the content of "all kinds of problem solutions for multi-ajax requests". After the study of this article, I believe you have a deeper understanding of all kinds of problem solutions requested by multi-ajax requests, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
