当前项目对用户体验的要求层出不穷，本篇通过所历项目与前辈网文日志加以记录总结。
多个 ajax 请求的各类解决方案：同步，队列，cancel 请求，本章末尾提供 demo，或点这里。
注意：能一个 ajax 请求解决的问题绝不用两个 ajax 请求来处理，没有最好的方案，只有最合适的方案。
需求：
1.多个 ajax 请求同时发送，相互无依赖。
2.多个 ajax 请求互相依赖，必须有先后顺序。
3.多个 ajax 请求被同时发送，只需要最后一个请求。
第 2 种 case
应用场景：多个 ajax 请求，需要顺序执行，后一个 ajax 请求的执行参数是前一个 ajax 的结果。
一个非常经典的例子：用户登录后我们发送一次请求得到用户的应用 ID，然后利用应用 ID 发送一次请求得到具体的应用内容。
处理方法：
1.利用 ajax 参数 async 设置为 false，进行同步操作（这个方法只适合同域操作，跨域需使用下面两种方法）
2.利用 ajax 嵌套
3.利用队列进行操作，jquery ajax 队列操作核心代码：
(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);第 3 种 case
应用场景：比较典型的是 autocomplete 控件的操作，case 2 解决方案有些浪费。
解决方法：保留最后一次请求，cancel之前的请求，代码如下：
(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);某500强企业操作平台解决方案，待整理。
由于多个 ajax 请求的响应时间无法控制，可以用 ？解决。完整 demo 如下：
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>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(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(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 () { ???//第1种case ???$(‘#btnLaunchAsync‘).click(function () { ???????launch({ isAsync: true }); ???}); ???//第2种case ???$(‘#btnLaunchSync‘).click(function () { ???????launch({}); ???}); ???//第2种case ???$(‘#btnLaunchQueue‘).click(function () { ???????launch({ mode: ‘ajaxQueue‘, isAsync: true }); ???}); ???//第3种case ???$(‘#btnLaunchSingle‘).click(function () { ???????launch({ mode: ‘ajaxSingle‘, isAsync: true }); ???});});摘自：多ajax请求的各类解决方案（同步, 队列, cancel请求）
ajax请求解决方法及案例
原文地址：https://www.cnblogs.com/yuqlblog/p/9160287.html