高级 jQuery：让好的应用程序变成强大的应用程序

核心提示： 另外，因为调用是异步的，高级 jQuery：让好的应用程序变成强大的应用程序(8)，不能保证从服务器返回的响应的顺序与发送时一样，例如，这个示例不是调用相互依赖的例子，但它能够向您展示如何使用该插件（要为这个插件的应用创建一个完美的真实例子，如果您几乎同时发出 2 个 Ajax 调用，您就不能保

另外，因为调用是异步的，不能保证从服务器返回的响应的顺序与发送时一样。例如，如果您几乎同时发出 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

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");　
　　　　　　}　
　　　　　}　
　　　　　});