Ajax Request Solutions and cases

The current project to the user experience of the endless, this article through the calendar of the project and the predecessor of the blog record Summary.

　　Multiple AJAX requests for various solutions: Sync, queue, cancel request, offer demo at the end of this chapter, or click here.

　　Note: A problem that can be solved by an AJAX request is never handled with two AJAX requests, there is no best solution, only the most appropriate scenario.

Demand:

1. Multiple AJAX requests are sent at the same time and are not dependent on each other.

2. Multiple AJAX requests are dependent on each other and must be in order.

3. Multiple AJAX requests are sent at the same time, requiring only the last request.

　　2nd case

Scenario: Multiple AJAX requests that need to be executed sequentially, followed by an AJAX request execution parameter are the result of the previous Ajax.

A very classic example: after the user logs in We send a request to get the user's app ID, and then use the app ID to send a request to get specific application content.

Processing method:

1. Using the AJAX parameter async set to False, synchronous operation (this method is only suitable for the same domain operation, cross-domain using the following two methods)

2. Using AJAX nesting

3. Using the queue to operate the jquery Ajax queue operation Core Code:

(function ($) {    varAjaxrequest = {}; $.ajaxqueue=function(settings) {varOptions = $.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 case

Scenario: The typical operation of the AutoComplete control is a waste of case 2 solution.

Workaround: Keep the last request, cancel the previous request, with the following code:

(function  ($) {var jqxhr =function  (settings) {        var options = $.extend ({className: ' Defeartname ' }, $.ajaxsettings, settings);         if (Jqxhr[options.classname]) {            jqxhr[options.classname].abort ();        }         = $.ajax (options);}    ) (jQuery);

A top 500 enterprise Operation platform solution, to be sorted out.

Because the response time of multiple AJAX requests cannot be controlled, can it be used? Solve. The complete demo is as follows:

Body:<formID= "Form1"runat= "Server">    <inputtype= "button"ID= "Btnlaunchasync"value= "Launch asynchronous Request" />    <inputtype= "button"ID= "Btnlaunchsync"value= "Launch synchronous Request" />    <inputtype= "button"ID= "Btnlaunchqueue"value= "Launch requested Queue" />    <inputtype= "button"ID= "Btnlaunchsingle"value= "Launch single Request" />    <DivID= "Txtcontainer"></Div>    </form>  JavaScript: (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 (th                is, 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:func            tion (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: {sec        Ond:seconds}, Async:isasync, ClassName: ' POST '}); }    };}    ()); var launch = function (settings) {$ (' #txtContainer '). html (');    var mode = Settings.mode, IsAsync = Settings.isasync;    Ajaxsleep.get (n, 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}); });});

Excerpt from: Various solutions for multiple AJAX requests (synchronization, queue, cancel request)

Ajax Request Solutions and cases