关于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>