讲座展示：Live From Redmond: Microsoft AJAX Patterns

简介

这次我选择的讲座，是最近在Live From Redmond系列WebCast中Joe Stagner的讲座“Microsoft AJAX Patterns - Implementing Predictive Fetch with Microsoft ASP.NET 2.0 AJAX Extensions”。Joe Stagner是UI, Tools & Platforms Team的Program Manager。作者在他的Blog上也提供了这个讲座的PPT和演示代码下载（VB.NET编写，不过我想在阅读上应该不会有很大问题）。另外，Microsoft Events也以On-Demand Webcast Events的形式提供了这个讲座的完整视频（不过这个视频从形式到质量都比TechEd和Mix的要差远了）。

在AJAX形式的Web开发中存在着一些常用的编程模式。在这个讲座里，Joe会讲述并且使用ASP.NET 2.0 AJAX Extensions做一个简单的演示，用来说明“Predictive Fetch”模式。

关于Live From Redmond系列　　“Live From Redmond”是一系列由微软各个产品部门所设计，面向社区的Live Meeting讲座。这些讲座的演讲者都是来自真正的微软产品组，他们都为某个特定的技术工作。这些讲座都是从他们那里获得各种信息的好机会。

 

讲座内容

现在已经存在了一系列的有关AJAX的设计模式，或者说是一系列使用AJAX的形式。我们现在来看一下今天要实现的设计模式，这个AJAX模式叫做“Predictive Fetch”。我们现在已经有了增加用户体验，改善UI的方式，那就是更新页面的一部分，而避免对于整张页面进行完整的刷新，页面上其余的内容依旧留在页面上。也就是说，我们现在已经有了一个方法，能够使用JavaScript和服务器交换数据，而这个过程可以不为用户所察觉。那么我们现在就有了一个更加好的想法：用户下一步会做什么？我们需要预测用户下一步最有可能执行的操作，例如，最典型的“Predictive Fetch
”使用场景（不过我们这次不把它作为例子），就是在一篇有许多页的文章里，我们会想：“现在用户在第一页，他有90%的可能会点击下一页”、“如果他已经看到了所有6页中的第3页，那么他会有66%的可能性会查看下一页，而会有33%的可能性会看前一页。”这样，我们就根据UI的当前状况，我们可以预测用户下一步最有可能会作哪些事情，然后对于所需要的数据进行“预获取”。而这时候用户不会察觉到浏览器正在从服务器上获取数据。

我们在这里可以使用UpdatePanel来做到这一点，不过我更喜欢使用JavaScript从头开始开发——不要误会我的意思，UpdatePanel是个神奇的东西——不过有时候我还是比较乐意使用JavaScript进行开发。UpdatePanel的优点在于它非常容易使用，不过它的缺点在于每一次使用UpdatePanel做页面部分刷新时，都会产生一次完整的PostBack，包括所有的ViewState会被传递到服务器端，而在服务器上也会出现一次完整页面生命周期。我们能够很方便地将一个UpdatePanel拖到页面上产生部分刷新的效果，但是如果我们使用自己的Callback就会避免将页面的大量数据被传递到服务器端，也不会在服务器上出现完整的页面生命周期，因为我们很明确的去访问了一个Service Method，这就会高效许多。这也是我们这次演示会使用的方法。

使用AJAX的话我们也必须明白，在这里Page Navigation的含义变了。在大多数AJAX形式的应用中，“前进”和“后退”带来的效果和传统的应用不一样了，比如我父亲——他不会理解到底浏览器的运作方式和使用的技术——有时候他们会被搞糊涂，他们如果想看之前的内容，他们会去点击“后退”按钮。现在的AJAX应用都会使用一些方式去“弥补”这个问题。

在AJAX应用中，还必须考虑的一个话题就是“状态”。如果我在页面中使用了JavaScript获取了数据并且修改了内容，这些内容往往不会被带到服务器端，我们必须设法保留这些状态。一会儿我会演示该如何做到这些——您能够简单地使用Cookie，但是我在示例中将会使用JavaScript来编写一个简单的状态保存机制。

我们现在看一下应该如何创建这样一个应用。

自然一开始，依旧是要引入ASP.NET AJAX的功能：引入程序集，编辑web.config文件等等。然后在页面里添加一个ScriptManager，再添加一些必要的元素——一个图片控件、一个下拉框、一个按钮以及最后一个用来显示信息的DIV。如下：

<asp:ScriptManager ID="ScriptManager1" runat="server" /> <div style="text-align: center"> <asp:Image ID="FighterPhoto" runat="server" ImageUrl="~/images/blank_fighter.jpg" Height="223px" Width="162px" /> <br /><br /> <asp:DropDownList ID="ddFighterList" runat="server" AutoPostBack="True"> <asp:ListItem Selected="True" Value="None"> Select Athlete ... </asp:ListItem> <asp:ListItem>Jeff Roufus</asp:ListItem> <asp:ListItem>Rick Roufus</asp:ListItem> <asp:ListItem>Duane Ludwig</asp:ListItem> </asp:DropDownList> <br /><br /> <input id="btnMore" style="width: 171px" type="button" value="Get Stats" language="javascript" onclick="return btnMore_onclick()" /> <br /><br /> <div id="divDetails" style="width: 868px; height: 100px"></div> </div>

 

按理来说，我们应该从数据库里得到这些信息，但是在这里我完全使用了静态的信息——我不想让一个简单的演示也要动用数据库。请注意我们这里的按钮不是一个服务器控件，因为我们会对它们进行客户端的开发，进行“Predictive Fetch”，所以我们在这里使用了一个标准的HTML按钮。

如果您对于ASP.NET AJAX有什么意见的话，您可以写Email给我，我将会把这些功能整理后提交给负责所有功能的GPM。比如在1.0版的ASP.NET中，我们将会提供一个可以将程序集放在Bin目录下的解决方案，这样在没有安装ASP.NET AJAX的虚拟主机下也能使用ASP.NET AJAX的功能了。ASP.NET AJAX的正式版将在12月发布，虽然还没有确定一个时间，但是应该可以在12月份发布它的1.0正式版。

接下去我们将为下拉框在Code-Behind中响应它的事件。如下：

Protected Sub ddFighterList_SelectedIndexChanged (ByVal sender As Object, ByVal e As System.EventArgs) Handles ddFighterList.SelectedIndexChanged Select Case (ddFighterList.SelectedValue) Case "Jeff Roufus" FighterPhoto.ImageUrl = "images/Jeff Roufus.jpg" Case "Rick Roufus" FighterPhoto.ImageUrl = "images/Rick Roufus.jpg" Case "Duane Ludwig" FighterPhoto.ImageUrl = "images/Duane Ludwig.jpg" Case Else FighterPhoto.ImageUrl = "images/blank_fighter.jpg" End Select End Sub

 

然后我们就要开始编写客户端的功能了。再这之前我们还需要编写一个Web Service。它的作用是能够从客户端得到一个运动员的资料或战绩。如下（省去了许多代码）：

<%@ WebService Language="VB" Class="DataService" %> Imports System.Web Imports System.Web.Services Imports System.Web.Services.Protocols <WebService(Namespace:="http://tempuri.org/")> _ <WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _ <Microsoft.Web.Script.Services.ScriptService()> _ Public Class DataService Inherits System.Web.Services.WebService <WebMethod()> _ Public Function FetchData(ByVal strWho As String, ByVal strWhat As String) As String Dim strDetails As String strDetails = "" Select Case (strWho) Case "Rick Roufus" If strWhat = "Stats" Then strDetails = ... ElseIf strWhat = "Record" Then strDetails = ... End If Case "Jeff Roufus" ... End Select Return strDetails End Function End Class

 

我们的FetchData方法接受两个参数，第一个参数表示哪个运动员，第二个参数表示哪项信息，这里还是以拼接字符串的形式将数据拼接成HTML。

下面我们将编写代码来管理状态。我们必须知道当前页面中已经加载了哪种数据（currentDetails），然后我们才能够进行“预加载”。然后我们需要保存那些我们已经获取了，但是还没有被显示在页面上的信息（detailContent）。如下：

var currentDetails = "None"; var detailContent = "";

 

然后我们需要写一个JavaScript函数去向Web Service方法“预加载”数据。我们的Web Service方法有两个参数，一个是“Who”还有一个是“What”。“Who”的话比较简单，我们只需要获得当前下拉框的值即可，不过获得“What”就会相对困难些，我们需要使用一种简单的状态保留的机制，以得知我们需要获取什么样的数据。在这里我们使用了switch分支来判断currentDetails的值。如果是“None”，表示我们还没有获得任何数据，那么我们会去“预加载”这个运动员的“资料”，以此类推。最后我们会调用那个Web Service方法。如下：

function GetDetails() { switch(currentDetails) { case "None": currentDetails = "Stats"; break; case "Stats": currentDetails = "Record"; break; case "Record": currentDetails = "Stats"; break; } fighterDetails = DataService.FetchData( document.getElementById(\'ddFighterList\').value, currentDetails, OnComplete, OnTimeOut, OnError); } function OnComplete(retResult) { detailContent = retResult; } function OnTimeOut(retResult) { alert(retResult); } function OnError(retResult) { alert(retResult); }

 

自然我们还需要在ScriptManager里引入Web Service的使用。如下：

<asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="DataService.asmx" /> </Services> </asp:ScriptManager>

 

当用户点击按钮时，我们会将“预加载”的内容显示在下方的DIV中。然后会再次调用GetDetails方法，因为在显示了信息之后，用户一般会花一段时间查看这些信息，我们应该“预测”用户接下来的行为，以进行信息的“预加载”。当然最后会改变按钮上的文本，告诉用户接下来能够查看什么数据。如下：

function btnMore_onclick() { document.getElementById(\'divDetails\').innerHTML = detailContent; GetDetails(); document.getElementById(\'btnMore\').value = "Get " + currentDetails; }

 

现在还有一个问题，比如我们在选择另一个运动员之后，我们并没有进行任何数据的“预加载”，因此我们必须定义一个pageLoad函数。这个函数会被ASP.NET AJAX Client Library在页面被加载时访问。在这个函数中，我们会判断用户是否选择了一个运动员，并进行预加载。如下：

function pageLoad () { if(document.getElementById(\'ddFighterList\').value != "None") { GetDetails(); } }

 

感想

事实上我必须承认，这次讲座的质量并不高。这次的讲座，立意不错，可惜内容讲解的比较肤浅，还有这个例子举得实在是比较糟糕，过于简单。Live From Redmond其实也应该算是比较有特色的Web Cast了，可惜其质量——至少这次的质量非常的一般。也有可能是刚经过了TechEd Europe Edition的“溺爱”，对于讲座的“口味”也变得挑剔了。下一次我将会准备将讲述一下TechEd Europe中的“DEV370 -AJAX Patterns with ASP.NET AJAX”，相信大家也能够看出个中差距。

另外，我似乎觉得Joe Stagner对于ASP.NET AJAX不怎么熟悉。最近在它的Blog上发了这么一个Post，大意是说他不知道如何设置一个Web Service Call的Timeout，结果从ASP.NET AJAX Team里的一个人那里才知道……我想，园子里已经掌握这点的朋友应该不在少数吧？还有他在上面的例子里，为什么还在使用“document.getElementById”方法，而不是“$get”……:)