首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

高级 jQuery-3

高级 jQuery-3

Ajax Queue/Sync在服务器中使用 Ajax 调用成为 Web 2.0 公司度量自身的度量指标。我们已经多次讨论过,在 jQuery 中使用 Ajax 就像调用普通的方法一样简单。这意味着您可以轻松地调用任何服务器端 Ajax 函数,就像调用客户端的 JavaScript 函数一样。但是美中存在一些不足之处,当对服务器进行过多的 Ajax 调用时,就会出现一些负面效应。如果 Web 应用程序使用的 Ajax 调用过多,就会导致问题。
第一个问题是一些浏览器限制打开的服务器连接的数量。在 Internet Explorer 中,当前版本仅支持打开 2 个服务器连接。Firefox 支持打开 8 个连接,但仍然是一个限制。如果 Web 应用程序不对 Ajax 调用进行控制,它就很可能打开 2 个以上的连接,尤其是服务器端调用属于时间密集型调用时。这个问题可能源于 Web 应用程序的不良设计,或用户不对请求加以限制。不管是那种情况都是不可取的,因为您不希望由浏览器决定使用哪些连接。
另外,因为调用是异步的,不能保证从服务器返回的响应的顺序与发送时一样。例如,如果您几乎同时发出 2 个 Ajax 调用,您就不能保证服务器的响应是以相同的顺序返回。因此,如果第二个调用依赖于第一个调用的结果,那么就会出现问题。想象这样一种场景,其中第一个调用获取数据,第二个调用在客户端操作该数据。如果第二个调用的响应返回得比第一个 Ajax 调用快,那么您的代码就会导致错误。您完全不能保证响应速度。当调用更多时,就更容易导致问题。
jQuery 的创建者意识到这个潜在的问题,但同时也认识到它仅会给 1% 的 Web 应用程序带来问题。但 1% 开发 Web 应用程序的开发人员需要一个解决办法。因此创建了一个插件,通过创建一个 Ajax Queue 和一个 Ajax Sync 来筛查该问题。Queue 和 Sync 的功能是很相似的:Queue 一次发出一个 Ajax 调用,并且等待其响应返回之后才发出另一个调用。Sync 几乎同时发出多个调用,但调用的响应是按先后顺序返回的。
通过在客户端控制 Ajax 调用解决了超载问题,同时也控制和规范了将响应发送回客户端的方式。现在,您可以确保知道响应返回到客户端的顺序,从而可以根据事件的顺序编写代码。我们看看这个插件是如何工作的,以及如何在您的代码中使用它(见清单 7)。记住,这仅是为 1% 的 Web 应用程序设计的,它们拥有多个 Ajax 调用,并且后一个调用严重依赖于前一个调用的结果。这个示例不是调用相互依赖的例子,但它能够向您展示如何使用该插件(要为这个插件的应用创建一个完美的真实例子,并让其易于理解是很困难的)。            
清单 7. Ajax Queue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var newRow = "<tr id='?'>" +
             "<td><input type=checkbox value='?'></td>" +
             "<td>?</td>" +
             "<td>?</td>" +
             "<td>?</td>" +
             "<td>?</td></tr>";
   
   
$("#mailtable").everyTime(30000, "checkForMail", function(){

   // by using the Ajax Queue here, we can be sure that we will check for mail
   // every 30 seconds, but ONLY if the previous mail check has already returned.
   // This actually would be beneficial in a mail application, if one check for
   // new mail takes longer than 30 seconds to respond, we wouldn't want the
   // next Ajax call to kick off, because it might duplicate messages (depending
   // on the server side code).
   // So, by using the Ajax Queue plug-in, we can ensure that our Web client
   // is only checking for new mail once, and will never overlap itself.

    $.ajaxQueue({
         url: "check_for_mail.jsp",
         success: function(data)
         {
           var message = eval('(' + data + ')');
           if (message.id != 0)
           {
             var row = newRow.replace("?", message.id);
             row = row.replace("?", message.id);
             row = row.replace("?", message.to);
             row = row.replace("?", message.from);
             row = row.replace("?", message.subject);
             row = row.replace("?", message.sentTime);
             $("#mailtable tbody").prepend(row);
             $("#mailtable #"+message.id).addClass("mail_unread").addClass("messageRow");
             $("#mailtable #"+message.id+ " td").addClass("mail");
             $("#mailtable :checkbox").addClass("selectable");
            }
          }
          });




记住:如果您的应用程序有多个相互依赖的 Ajax 调用,那么要考虑使用 Ajax Queue 或 Ajax Sync。
返回列表