ASP.NET AJAX客户端编程之旅(七)——剩下的问题(完结篇)
2010-05-26 18:05
519 查看
摘要
通过前面几篇文章,相信大家对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比较好的参考书。
通过前面几篇文章,相信大家对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比较好的参考书。
相关文章推荐
- ASP.NET AJAX客户端编程之旅(七)——剩下的问题(完结篇)
- ASP.NET AJAX客户端编程之旅(七)——剩下的问题(完结篇)
- ASP.NET AJAX客户端编程之旅(七)——剩下的问题(完结篇)(1)
- ASP.NET AJAX客户端编程之旅(七)——剩下的问题(完结篇)
- ASP.NET AJAX客户端编程之旅(七)——剩下的问题(完结篇)
- 解决IE6下Asp.net Ajax客户端框架未能加载的问题
- ASP.NET AJAX客户端编程之旅(一)——Hello!ASP.NET AJAX
- ASP.NET AJAX客户端编程之旅(五)——以组件的思想开发Ajax应用:行为、绑定及xml-script
- ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件(转载)
- ASP.NET AJAX客户端编程之旅(四)——以组件的思想开发Ajax应用:客户端组件初探
- ASP.NET AJAX客户端编程
- ASP.NET AJAX客户端编程之旅(二)
- ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件
- ASP.NET AJAX客户端编程之旅(三)——让JavaScript和C#无障碍沟通:数据类型自动转换&序列化
- Asp.net Ajax 客户端编程—面向对象
- 我发现ASP.NET AJAX在客户端调用 WebService时的一个奇怪的问题!问题更奇怪了!!
- ASP.NET AJAX客户端编程之旅(三)——让JavaScript和C#无障碍沟通:数据类型自动转换&序列化
- ASP.NET AJAX客户端编程之旅(五)——以组件的思想开发Ajax应用:行为、绑定及xml-script
- ASP.NET AJAX客户端编程之旅(搜这个标题有一个系列的好文章)
- 现存问题以及解决方案:在ASP.NET AJAX中从客户端向服务器端传送DataTable