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

最新推荐文章于 2021-08-05 12:13:19 发布

六毛饭

最新推荐文章于 2021-08-05 12:13:19 发布

阅读量554

点赞数

分类专栏： asp.net

本文链接：https://blog.csdn.net/cruelchen/article/details/9307569

版权

asp.net 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

　本文示例源代码或素材下载

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

3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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:

1using System;

2using System.Collections;

3using System.Linq;

4using System.Web;

5using System.Web.Services;

6using System.Web.Services.Protocols;

7using System.Xml.Linq;

8using System.Web.Script.Services;

9using System.Threading;

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]

19public class WebService : System.Web.Services.WebService {

21　　public WebService () {

23　　　　//Uncomment the following line if using designed components

24　　　　//InitializeComponent();

25　　}

27　　[WebMethod]

28　　public string GetContent() {

29　　　　Thread.Sleep(5000);//延迟5秒返回数据

30　　　　return "这是获取的内容";

31　　}

33}

　　ajax.js:

1var lblLoading;

2var lblContent;

3var btnSubmit;

5Sys.Application.add_init(onPageInit);

7function onPageInit()

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();

17　　btnSubmit.add_click(btnSubmit_onClick);

18}

20function btnSubmit_onClick()

21{

22　　WebService.GetContent(onSucceeded);

24　　//此处是显示loading的代码，放在事件处理函数的最后

25　　lblContent.set_visible(false);

26　　lblLoading.set_visible(true);

27}

29function onSucceeded(result)

30{

31　　lblContent.set_text(result);

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框架讲的很透彻，何况这个框架还在不断开发中。只是希望这个系列的文章能起到抛砖引玉的作用，为各位朋友铺平入门的道路。

六毛饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET AJAX客户端编程之旅（七）——剩下的问题（完结篇）（1）

本文示例源代码或素材下载　　关于Loading...　　相信做Ajax应用的朋友没有不使用loading的，不然网络延迟会让用户体验非常差，而且用户会不知道系统正在工作。那么当使用ASP.NET AJAX客户端编程时，怎么做loading呢？　　我们先来分析一下loading应该什么时候显示，什么时候终止。一个典型的异步交互过程如下：　　1.用户发出请求　　2.网络延迟　　
复制链接

扫一扫