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>

时间: 2024-09-17 03:58:59

ASP.NET AJAX客户端编程之旅(七)——剩下的问题(完结篇)的相关文章

ASP.NET AJAX客户端编程之旅(五)

ASP.NET AJAX客户端编程之旅(五)--以组件的思想开发Ajax应用:行为.绑定及xml-script 初识行为组件 行为组件一词中的"行为"是从单词Behavior直译过来的.但是我个人认为,就其作用来说,应该叫"属性赋予组件"更合适一点.因为行为组件实际的作用是:为某一控件赋予某种属性.例如ClickBehavior是为某个控件添加"具有单击事件"这个属性,而OpacityBehavior则是为控件添加"透明显示"

ASP.NET AJAX客户端编程之旅(四)

ASP.NET AJAX客户端编程之旅(四)--以组件的思想开发Ajax应用:客户端组件初探 以组件的思想重新审视Ajax客户端开发 在进入主题之前,我想和大家一起再来看一下本文章系列第一篇中的一个Demo:ASPNETAJAXTest.我现在将其中的客户端代码重新贴在这里. Default.aspx: 1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs&q

ASP.NET AJAX客户端编程之旅(三)

ASP.NET AJAX客户端编程之旅(三)--让JavaScript和C#无障碍沟通:数据类型自动转换&序列化 通过前两篇文章,我们知道使用了ASP.NET AJAX框架后,在JavaScript中调用后台WebService方法非常方便,几乎可以看做是"直接调用".那么,这里引出了一个问题:调用方法就牵扯到参数的传递,而JavaScript和C#毕竟是两种不同的语言,数据类型怎么沟通?简单型数据类型还好说,如果我们需要的参数是个复杂类型呢?如分层架构中经常用到实体类做参数,

ASP.NET AJAX客户端编程之旅(二)——知其所以然

如何在客户端直接调用WebService中的方法? 1.Web.config中需要配置好运行ASP.NET AJAX框架相应的配置项,当然,建立一个ASP.NET AJAX Enabled Web Site项目时,Web.config已经配置好了. 2.想让某个WebService可以被JS调用,需要做一下几步: I.在这个WebService文件里用"using System.Web.Script.Services;"引入这个命名空间. II.在这个类的上面添加"[Scri

ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件

通过前面的文章,我们了解了ASP.NET AJAX框架的很多知识.在这一篇文章中,我们来做一个自己的ASP.NET AJAX客户端控件:PasswordValidator.这个控件关联到的DOM元素是一个span或div,并且关联到一个password类型的input标签,当用户在input中输完密码并且这个input失去焦点时,检测用户输入的密码是否合理,如果合理,则给出这个密码的安全程度. 从这一篇开始,将使用VS2008作为IDE,请朋友们注意. 建立AJAX客户端控件控件的骨架 在以前的

ASP.NET AJAX客户端编程之旅(一)——Hello!ASP.NET AJAX

前言 我想,如果今天哪个Web开发人员说没有听说过Ajax技术,那实在太不可思议了.确实,近几年,Ajax这个词以超乎想象的速度红遍Web开发领域,大到Google.网易,小到一些地方公司的主页,都普遍开始加入Ajax元素.这种技术,给Web开发带来了革命性的意义,也使得Web产品及B/S系统的用户体验大大改善. 然而,Ajax用起来华丽.爽快,开发起来却困难重重.JavaScript语言怪异的语法.没有IDE支持以及难以调试,都成为Ajax开发的硬伤.另外B/S系统和C/S不同,浏览器的多样性

ASP.NET AJAX客户端生命周期分析(理论篇)

一.引言 微软的ASP.NET AJAX框架,作为一个相对比较完善的AJAX框架,有许多方面值得我们作深入研究.本文中,我们将结合一个具体的例子试图探究ASP.NET AJAX框架的客户端生命周期过程. [注]阅读本文最好要结合"ASP.NET应用程序生命周期概述"和"ASP.NET页面生命周期概述"两篇文章共同学习. 二.ASP.NET AJAX客户端生命周期原理 因为ASP.NET AJAX框架在开发思路上极大地借鉴了ASP.NET 2.0的开发技术,而且将会被

ASP.NET AJAX客户端生命周期分析(实践篇)

一.引言 在上篇中,我们对微软的ASP.NET AJAX框架的客户端生命周期过程作了理论上的分析.在本篇中,我们要结合一个具体示例针对页面的客户端生命周期期间有关重要事件的发生顺序进行剖析. 二.举例 (一)说明 下面的这个例子展示了在一个有两个嵌套的UpdatePanel控件的页面的客户端事件将被如何引发.请注意点击父面板中的按钮与内嵌的UpdatePanel控件中按钮之间的区别.在父面板中的按钮将引起父面板的更新,而嵌在内部的面板将被删除并重新创建.内嵌面板的按钮点击仅引起内嵌面板的更新.

现存问题以及解决方案:在ASP.NET AJAX客户端得到服务器端的Data Table

本文将分析这个异常产生的原因并给出相应的解决方案,包括异常重现.异常原因.解决方案.示例代码下载等部分. 异常重现 让我们先通过一个简单的示例程序重现这个异常,然后基于这个示例程序修改并解决这个问题. 首先在页面中声明一个ScriptManager控件.由于客户端DataTable定义与Value-add包中,还需要引入PreviewScript.js脚本: <asp:ScriptManager ID="ScriptManager1" runat="server&quo