ASP.NET AJAX客户端编程之旅（七）——剩下的问题（完结篇）

摘要
      通过前面几篇文章，相信大家对ASP.NET AJAX框架的客户端编程已经有了一定了解。并且通过一个完整的控件开发，对这个框架有了整体的了解。这篇文章作为本系列的完结篇，将讨论几个比较琐碎但是与开发息息相关的问题。

关于Loading...
      相信做Ajax应用的朋友没有不使用loading的，不然网络延迟会让用户体验非常差，而且用户会不知道系统正在工作。那么当使用ASP.NET AJAX客户端编程时，怎么做loading呢？
      我们先来分析一下loading应该什么时候显示，什么时候终止。一个典型的异步交互过程如下：
      1.用户发出请求
      2.网络延迟
      3.服务器端处理
      4.服务器返回数据
      5.网络延迟
      6.客户端呈现数据
      在这个交互过程中，loading应该在第一步后出现，而在第六步结束后才消失。结合前面的知识可以知道，第一步结束的地方是事件处理函数的末尾，而第六步结束的地方是回调函数的末尾。于是，我们找到了loading开始的结束的地方。那么loading怎么实现呢？我的思路是：先在页面上放置一个span或div，里面有loading图片，但是开始时这个span或div是隐藏的。当loading开始时使其可见，而loading结束时使其重新不可见，于是就实现了loading效果。下面我们来看一个例子。

Default.aspx:

 1 <% @ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default"  %>
 2
 3 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 4
 5 < html  xmlns ="http://www.w3.org/1999/xhtml" >
 6 < head  runat ="server" >
 7      < title > Untitled Page </ title >
 8 </ head >
 9 < body >
10      < form  id ="form1"  runat ="server" >
11          < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >
12              < Scripts >
13                <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
14                <asp:ScriptReference Path="~/ajax.js" />
15             </ Scripts >
16              < Services >
17                  < asp:ServiceReference  Path ="~/WebService.asmx"   />
18              </ Services >
19          </ asp:ScriptManager >
20          < br  />
21          < span  id ="loading" >
22              < img  alt ="loading"  src ="Icon/loading.gif"   />
23          </ span >
24          < br  />
25          < span  id ="content" >
26          </ span >
27          < br  />
28          < input  id ="submit"  type ="button"  value ="获取内容"   />
29      </ form >
30 </ body >
31 </ html >

WebService.asmx:

 1 using  System;
 2 using  System.Collections;
 3 using  System.Linq;
 4 using  System.Web;
 5 using  System.Web.Services;
 6 using  System.Web.Services.Protocols;
 7 using  System.Xml.Linq;
 8 using  System.Web.Script.Services;
 9 using  System.Threading;
10
11 /**/ /// <summary>
12/// Summary description for WebService
13/// </summary>
14 [WebService(Namespace  =   " http://tempuri.org/ " )]
15 [WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)]
16 [ScriptService]
17 //  To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
18 //  [System.Web.Script.Services.ScriptService]
19 public   class  WebService : System.Web.Services.WebService  {
20
21    public WebService () {
22
23        //Uncomment the following line if using designed components 
24        //InitializeComponent(); 
25    }
26
27    [WebMethod]
28    public string GetContent() {
29        Thread.Sleep(5000);//延迟5秒返回数据
30        return "这是获取的内容";
31    }
32    
33}

ajax.js:

 1 var  lblLoading;
 2 var  lblContent;
 3 var  btnSubmit;
 4
 5 Sys.Application.add_init(onPageInit);
 6
 7 function  onPageInit()
 8 {
 9    lblLoading=new Sys.Preview.UI.Label($get("loading"));
10    lblLoading.initialize();
11    lblLoading.set_visible(false);//使得一开始loading为隐藏
12    lblContent=new Sys.Preview.UI.Label($get("content"));
13    lblContent.initialize();
14    btnSubmit=new Sys.Preview.UI.Button($get("submit"));
15    btnSubmit.initialize();
16    
17    btnSubmit.add_click(btnSubmit_onClick);
18}
19
20 function  btnSubmit_onClick()
21 {
22    WebService.GetContent(onSucceeded);
23    
24    //此处是显示loading的代码，放在事件处理函数的最后
25    lblContent.set_visible(false);
26    lblLoading.set_visible(true);
27}
28
29 function  onSucceeded(result)
30 {
31    lblContent.set_text(result);
32    
33    //此处是隐藏loading的代码，放在回调函数的最后
34    lblLoading.set_visible(false);
35    lblContent.set_visible(true);
36}

      相信通过前面的文件，大多数代码已经很少熟悉了，这里只拣关键的说一下。
      在WebService中，有一个“Thread.Sleep(5000);”，这是让返回数据时延时5秒，模拟网络延时，借此更清楚看到loading图标。而在js代码中，btnSubmint_onClick最后的两行代码是显示loading，而onSucceeded最后的两行代码是隐藏loading。
      运行这个例子，就可以看到效果。

ASP.NET AJAX还有什么功能
      ASP.NET AJAX是一个在茁长成长中的框架，其功能非常丰富，也不断有新功能增加进来。在这短短的几篇文章里，不可能把所有功能都讨论一遍。此系列文章没有涉及到但很有用的功能有很多，如拖放组件可以时我们很轻松的创建具有拖放功能的应用，如购物车、自定义布局等等，数据组件可以使我们在前台实现类似后台的数据绑定等等。

ASP.NET AJAX可以进行底层编程吗
      到目前为止，我们所做的程序都是比较“上层”的，都是直接调用了封装好的功能。那么我们有没有可能进行更底层、更细腻的操作呢？答案是肯定的。在这个框架中，有一个Sys.Net.WebRequest组件，利用它，可以从底层进行异步调用，从而进行更细致的操作。至于具体方法请参考相关文档。

ASP.NET AJAX可以用于其他语言或平台吗
      对于这个问题，答案是完全可以。其实，ASP.NET AJAX框架本身是纯JavaScript写成的，和.NET平台并无依赖。而服务器端组件只不过是使得使用这些脚本更简单一点。我们使用客户端编程就是直接使用这些脚本。
      既然是纯JavaScript的东西，当然可以应用于一切Web开发平台了，只要把相应的脚本文件导入就可以了。所以，你完全可以在J2EE、PHP或Ruby上使用ASP.NET AJAX，甚至可以开发属于这些平台的ScriptManager。

结束语
      这个系列的文章到这里就算结束了。短短七篇文章，不可能将整个ASP.NET AJAX框架讲的很透彻，何况这个框架还在不断开发中。只是希望这个系列的文章能起到抛砖引玉的作用，为各位朋友铺平入门的道路。
      本文Demo在这里下载：LoadingDemo.rar

书籍推荐
      最后，推荐几本学习ASP.NET AJAX比较好的参考书。