代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > ajax技巧 > 实现多个ajax同步或队列请求数据的源码实例

实现多个ajax同步或队列请求数据的源码实例

ajax技巧 围观5066次 更新日期:2017-07-18 13:36:01 留下足迹

•多个ajax请求同时发送,相互无依赖。
•多个ajax请求相互依赖,必须有先后顺序。
•多个请求被同时发送,只需要最后一个请求。

第1种情况:
应用场景: 这个场景很多,一个页面打开是多个区域同时请求后台得到各自的数据,没依赖,没顺序。
处理方案: 直接用jqueryajax函数。这个用的非常多,这里从略,可看后面的代码中例子。

第2种情况:
应用场景: 多个ajax请求,需要顺序执行,后一个ajax请求的执行参数是前一个ajax的结果。例如: 用户登录后我们发送一次请求得到用户的应用ID,然后利用应用ID发送一次请求得到具体的应用内容(例子虽然不是太恰当,但基本就是这个意思了)。
处理方法:
1. 利用ajax参数async设置为false,进行同步操作。(这个方法只适合同域操作,跨域需使用下面两种方法)
2. 利用ajax嵌套(这个同第1种情况)
3. 利用队列进行操作
jquery ajax队列操作核心代码:
  1. (function ($) { 
  2. var ajaxRequest = {}; 
  3. $.ajaxQueue = function (settings) { 
  4. var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings); 
  5. var _complete = options.complete; 
  6. $.extend(options, { 
  7. complete: function () { 
  8. if (_complete)    _complete.apply(this, arguments); 
  9. if ($(document).queue(options.className).length > 0) { 
  10. $(document).dequeue(options.className); 
  11. else { 
  12. ajaxRequest[options.className] = false
  13. }); 
  14. $(document).queue(options.className, function () { 
  15. $.ajax(options); 
  16. }); 
  17. if ($(document).queue(options.className).length == 1 && !ajaxRequest[options.className]) { 
  18. ajaxRequest[options.className] = true
  19. $(document).dequeue(options.className); 
  20. }; 
  21. })(jQuery); 

第3中情况
应用场景: 比较典型的是autocomplete控件的操作,这个我们可以使用第2种情况的处理方法,但我们可能只需要最后次按键后返回的结果,这样利用第2种处理方法未免有些浪费。
处理方法: 保留最后一次请求,cancel之前的请求。
代码如下:
  1. (function ($) { 
  2. var jqXhr = {}; 
  3. $.ajaxSingle = function (settings) { 
  4. var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings); 
  5. if (jqXhr[options.className]) { 
  6. jqXhr[options.className].abort(); 
  7. jqXhr[options.className] = $.ajax(options); 
  8. }; 
  9. })(jQuery); 

对于这些case都是在多个ajax请求,响应时间不能控制的情况。
下面是完整Demo代码如下:
  1. (function ($) { 
  2. var jqXhr = {}, 
  3. ajaxRequest = {}; 
  4. $.ajaxQueue = function (settings) { 
  5. var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings); 
  6. var _complete = options.complete; 
  7. $.extend(options, { 
  8. complete: function () { 
  9. if (_complete) 
  10. _complete.apply(this, arguments); 
  11. if ($(document).queue(options.className).length > 0) { 
  12. $(document).dequeue(options.className); 
  13. else { 
  14. ajaxRequest[options.className] = false
  15. }); 
  16. $(document).queue(options.className, function () { 
  17. $.ajax(options); 
  18. }); 
  19. if ($(document).queue(options.className).length == 1 && !ajaxRequest[options.className]) { 
  20. ajaxRequest[options.className] = true
  21. $(document).dequeue(options.className); 
  22. }; 
  23. $.ajaxSingle = function (settings) { 
  24. var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings); 
  25. if (jqXhr[options.className]) { 
  26. jqXhr[options.className].abort(); 
  27. jqXhr[options.className] = $.ajax(options); 
  28. }; 
  29. })(jQuery); 
  30. var ajaxSleep = (function () { 
  31. var _settings = { 
  32. type: 'GET'
  33. cache: false
  34. success: function (msg) { 
  35. var thtml = $('#txtContainer').html(); 
  36. $('#txtContainer').html(thtml + "<br />" + msg); 
  37. }; 
  38. return { 
  39. get: function (seconds, mode, isAsync) { 
  40. var mode = mode || 'ajax'
  41. isAsync = isAsync || false
  42. $[mode]($.extend(_settings, { 
  43. url: "ResponsePage.aspx?second=" + seconds, 
  44. async: isAsync, 
  45. className: 'GET' 
  46. })); 
  47. }, 
  48. post: function (seconds, mode, isAsync) { 
  49. var mode = mode || 'ajax'
  50. isAsync = isAsync || false
  51. $[mode]($.extend(_settings, { 
  52. type: 'POST'
  53. url: "PostPage.aspx"
  54. data: { second: seconds }, 
  55. async: isAsync, 
  56. className: 'POST' 
  57. })); 
  58. }; 
  59. } ()); 
  60. var launch = function (settings) { 
  61. $('#txtContainer').html(''); 
  62. var mode = settings.mode, 
  63. isAsync = settings.isAsync; 
  64. ajaxSleep.get(12, mode, isAsync); 
  65. ajaxSleep.get(10, mode, isAsync); 
  66. ajaxSleep.get(8, mode, isAsync); 
  67. ajaxSleep.post(6, mode, isAsync); 
  68. ajaxSleep.post(4, mode, isAsync); 
  69. ajaxSleep.post(2, mode, isAsync); 
  70. $(document).ready(function () { 
  71. //第1种case 
  72. $('#btnLaunchAsync').click(function () { 
  73. launch({ isAsync: true }); 
  74. }); 
  75. //第2种case 
  76. $('#btnLaunchSync').click(function () { 
  77. launch({}); 
  78. }); 
  79. //第2种case 
  80. $('#btnLaunchQueue').click(function () { 
  81. launch({ mode: 'ajaxQueue', isAsync: true }); 
  82. }); 
  83. //第3种case 
  84. $('#btnLaunchSingle').click(function () { 
  85. launch({ mode: 'ajaxSingle', isAsync: true }); 
  86. }); 
  87. }); 
  88.  
  89. default.html 
  90. 代码如下: 
  91.  
  92. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  93. <html xmlns="http://www.w3.org/1999/xhtml"
  94. <head id="Head1" runat="server"
  95. <title></title> 
  96. <script src="http://www.uxuew.cn/statics/js/lmphp/jquery-1.8.3.min.js" type="text/javascript"></script> 
  97. <script type="text/javascript" src="js/default.js"></script> 
  98. </head> 
  99. <body> 
  100. <form id="form1" runat="server"
  101. <input type="button" id="btnLaunchAsync" value="Launch Asynchronous Request" /> 
  102. <input type="button" id="btnLaunchSync" value="Launch Synchronous Request" /> 
  103. <input type="button" id="btnLaunchQueue" value="Launch Requested Queue" /> 
  104. <input type="button" id="btnLaunchSingle" value="Launch Single Request" /> 
  105. <div id="txtContainer"></div> 
  106. </form> 
  107. </body> 
  108. </html> 
  109.  
  110. PostPage.aspx & ResponsePage.aspx 
  111. 代码如下: 
  112.  
  113. //ResponsePage.aspx 
  114. protected void Page_Load(object sender, EventArgs e) 
  115. int seconds = int.Parse(Request.QueryString["second"]); 
  116. Thread.Sleep(seconds*1000); 
  117. Response.Write("GET: selpt for "+ seconds.ToString() +" sec(s)"); 
  118. //PostPage.aspx 
  119. protected void Page_Load(object sender, EventArgs e) 
  120. int seconds = int.Parse(Request.Form["second"]); 
  121. Thread.Sleep(seconds * 1000); 
  122. Response.Write("POST: selpt for " + seconds.ToString() + " sec(s)"); 
  123. }  

 

转载请注明:代码学堂>web前端 > ajax技巧 > 实现多个ajax同步或队列请求数据的源码实例

喜欢 (308) or 分享 (164)