多AJAX请求的解决方案 AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。正是由于AJAX的此种特性，使其在项目中的使用很是频繁。因此通过解析AJAX核心原理及特点对以后的项目开发将有很大的帮助，能够很大程度简化编程。 Ajax 的核心是 JavaScript 对象 XMLHttpRequest。在使用过程中主要是涉及到多AJAX请求时的解决问题。 ajax带来很好的用户体验，于是一个稍微注重web系统使用ajax基本成为必然。当传统功能型web项目向用户体验型项目转变时，层出不穷的需求就来了。正如本篇所介绍的就是一个多个AJAX请求的情况下，如何利用jquery来处理几种case。 1. 多个ajax请求同时发送，相互无依赖。 2. 多个ajax请求相互依赖，必须有先后顺序。 3. 多个请求被同时发送，只需要最后一个请求。 第1种case 应用场景：这个场景很多，一个页面打开是多个区域同时请求后台得到各自的数据，没依赖，没顺序。 处理方案：直接用jquery的ajax函数。这个用的非常多，这里从略，可看后面的代码中例子。 第2种case 应用场景：多个ajax请求，需要顺序执行，后一个ajax请求的执行参数是前一个ajax的结果。例如：用户登录后我们发送一次请求得到用户的应用ID，然后利用应用ID发送一次请求得到具体的应用内容（例子虽然不是太恰当，但基本就是这个意思了）。 处理方法： 1. 利用ajax参数async设置为false，进行同步操作。(这个方法只适合同域操作，跨域需使用下面两种方法) 2. 利用ajax嵌套（这个同第1种情况） 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控件的操作，这个我们可以使用第2种情况的处理方法，但我们可能只需要最后次按键后返回的结果，这样利用第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);
研究这些方法不难发现，其实其中仍然有很多问题存在，比如http请求数的问题，就算被cancel掉也会发送到服务器，但是发送请求时间间隔都是很短的，影响基本也很小。如果想要解决这些小问题，简单的用setTimeout实现就可以了。 var t; for(var i=1;i<10;i++){ clearTimeout(t); t=setTimeout(function(){ $.ajax({ type:”post”, url:”PostPage.aspx”, data:”second=1”, success:function(msg){ }, error:function(){ } }); },100); } 这样子做的话：就不会因为时间间隔，执行速度等原因造成的请求删除不掉或者删除掉但服务器已经执行部分程序的情况，代码量少而且也很容易理解。 但是这也会有其他问题：比如用户等待数据的时候可能会偏长，这时候就要根据实际发送ajax请求的间隔来合理定义延迟时间(通常都不会长)。 通过这类问题不难发现。想要完美解决掉一类问题是很难的。解决问题的一方面往往会在其他一些问题上增加新的难题。这也是我们想要不断的维护更新代码的原因。记录并总结解决方案是一大好习惯。
