Ajax.net Onloading Example

博客园 - 鬼手

有趣的网页效果杀毒软件测试代码 Gmail邀请函 Office的组织结构图博客园出问题了？利用js在网页中插入flash JS实现marquee效果获取网页内容关于IE WebControl 无法加载XML的问题（后续） KBSBBS安装 SQL企业管理器打不开的解决办法 IE WebControl 无法显示XML的问题自己制作的一些网站开始要忙了记录一些网址备忘获取地址栏参数用JAVASCRIPT 控制FRMAE的子窗口在css中加入事件

鬼手 · 2006-10-20 · via 博客园 - 鬼手

一直想使用Ajax技术，可总是没有时间。最近由于新网站需要用到Ajax技术，所以下载学习了一下。由于使用的是.net1.1sp1，所以Atlas是没法用了，以下文字仅针对AjaxPro。AjaxPro.dll可以在http://www.ajaxpro.info/下载，该网站也提供了详细的教程和实例供下载。

1.首先下载AjaxPro（ latest version 6.10.6.1.），压缩包中提供了asp.net2.0和1.1的版本，以及web.config配置文件模板；

2.在项目中引用AjaxPro.Dll(For asp.net 1.1版本的)；

3.配置web.config文件，在<configuration>中<system.web>外，添加以下文字：

<location path="ajaxpro">
        <system.web>
            <httpHandlers>
                <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro"/>
            </httpHandlers>
        </system.web>
    </location>

4.添加Web窗体，如：LoadingDemo.aspx（参考：http://www.ajaxpro.info/Examples/Special/onloading.aspx）
源码如下：

<%@ Page language="c#" ClassName="LoadingDemo" Inherits="System.Web.UI.Page" %>
<script runat="server" language="c#">

private

void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(LoadingDemo));
}

[AjaxPro.AjaxMethod]
public DateTime LongOperation()
{
System.Threading.Thread.Sleep(

2000);
    return DateTime.Now;
}</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Ajax.NET - OnLoading Example</title>
    <link rel="stylesheet" type="text/css" href="../../css/main.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>

<form id="Form1" method="post" runat="server"></form><div class="content"><h1>OnLoading Examples</h1><p>Click <a href="javascript:doTest1();void(0);">here</a>
to start a long operating method (2 seconds). After you have clicked on the link you should see a
<i>Loading...</i> message in the upper left corner.</p></div><div id="loadinfo"
style="visibility:hidden;position:absolute;left:0px;top:0px;background-color:Red;color:White;">
Loading...</div><p class="footer">Last updated: November 2, 2005 by
<a href="http://weblogs.asp.net/mschwarz/contact.aspx" target="_blank">Michael Schwarz</a></p>
<p><a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional"
height="31" width="88" /></a></p><script type="text/javascript" defer="defer">

AjaxPro.onLoading

= function(b) {
    var l = document.getElementById("loadinfo");
    l.style.visibility = b ? "visible" : "hidden";
}function doTest1() {
    ASP.LoadingDemo.LongOperation(doTest1_callback);
}function doTest1_callback(res) {
    alert(res.value);
}</script>
  </body>
</html>

5.注意事项：
a.在作者的先前一个版本中（参考http://www.schwarz-interactive.de/Examples/Special/onloading.aspx）

AjaxPro.onLoading

= function(b) {
......

这里是下面这样的：

ASP.LoadingDemo.onLoading

= function(b) {
......

测试结果是第一种可行，第二种写法不会显示loading的字样，不知道是不是因为Ajax的版本问题。

b.作者没有使用cs文件，所以需要注意的是，这时名字空间为ASP，即：

ASP.LoadingDemo.LongOperation(doTest1_callback);

如果使用cs文件，那么上面一行要相应改成自己的名字空间，比如：
LoadingDemo.aspx.cs：

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;namespace PhantomPro.AjaxProject
{
    /// <summary>
    /// LoadingDemo 的摘要说明。
    /// </summary>
    public class LoadingDemo : System.Web.UI.Page
    {
        private void Page_Load(object sender, System.EventArgs e)
        {
            // 在此处放置用户代码以初始化页面
            AjaxPro.Utility.RegisterTypeForAjax(typeof(LoadingDemo));
        }#region Web 窗体设计器生成的代码
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
            //
            InitializeComponent();
            base.OnInit(e);
        }

        /// <summary>
        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
        /// 此方法的内容。
        /// </summary>
        private void InitializeComponent()
        {
            this.Load += new System.EventHandler(this.Page_Load);
        }
        #endregion
        [AjaxPro.AjaxMethod]
        public DateTime LongOperation()
        {
            System.Threading.Thread.Sleep(2000);//延时2秒，方便查看Loading效果
            return DateTime.Now;
        }
    }
}

LoadingDemo.aspx:

<%@ Page language="c#" Codebehind="LoadingDemo.aspx.cs" AutoEventWireup="false"
Inherits="PhantomPro.AjaxProject.LoadingDemo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
    <HEAD>
        <title>Ajax.NET - OnLoading Example</title>

        <link rel="stylesheet" type="text/css" href="../../css/main.css">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </HEAD>
    <body>
        <form id="Form1" method="post" runat="server">
        </form>
        <div class="content">
            <h1>OnLoading Examples</h1>
            <p>Click <a href="javascript:doTest1();void(0);">here</a> to start a long operating
                method (2 seconds). After you have clicked on the link you should see a <i>Loading</i>
                message in the upper left corner.</p>
        </div>
        <div id="loadinfo"
style="LEFT:0px;VISIBILITY:hidden;COLOR:white;POSITION:absolute;TOP:0px;BACKGROUND-COLOR:red">
Loading...</div>
        <p class="footer">Last updated: November 2, 2005 by
<a href="http://weblogs.asp.net/mschwarz/contact.aspx" target="_blank">
                Michael Schwarz</a></p>
        <p><a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31"
                    width="88"></a></p>
        <script type="text/javascript" defer>

AjaxPro.onLoading

= function(b) {
    var l = document.getElementById("loadinfo");
    l.style.visibility = b ? "visible" : "hidden";
}function doTest1() {
    PhantomPro.AjaxProject.LoadingDemo.LongOperation(doTest1_callback);//这里换成自己的名字空间
}function doTest1_callback(res) {
    alert(res.value);
}</script>
    </body>
</HTML>

6.顺便测试一下DataSet的效果：
AjaxDemo.aspx.cs:

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Configuration;
using System.Data.SqlClient;namespace PhantomPro.AjaxProject
{
    /// <summary>
    /// AjaxDemo 的摘要说明。
    /// </summary>
    public class AjaxDemo : System.Web.UI.Page
    {
        private void Page_Load(object sender, System.EventArgs e)
        {
            // 在此处放置用户代码以初始化页面
            AjaxPro.Utility.RegisterTypeForAjax(typeof(PhantomPro.AjaxProject.AjaxDemo));
        }#region Web 窗体设计器生成的代码
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
            //
            InitializeComponent();
            base.OnInit(e);
        }

        /// <summary>
        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
        /// 此方法的内容。
        /// </summary>
        private void InitializeComponent()
        {
            this.Load += new System.EventHandler(this.Page_Load);

}

#endregion


        [AjaxPro.AjaxMethod]
        public string GetTable(string str)
        {
            System.Threading.Thread.Sleep(2000);  //进程睡眠(延时)2秒
            string s="";
            DataSet ds=new DataSet();
            try
            {
                SqlConnection conn=new SqlConnection(ConfigurationSettings.AppSettings["DbString"]);
                string strSql="select * from Employees where EmployeeID="+str;
                conn.Open();
                SqlDataAdapter ap=new SqlDataAdapter(strSql,conn);
                ap.Fill(ds,"table1");
                conn.Close();

                if(ds.Tables["table1"].Rows.Count>0)
                {
                    DataGrid dg = new DataGrid();

dg.DataSource

=ds.Tables["table1"].DefaultView;
                   dg.DataBind();
                    //以下是网站摘录的//实例化一个HtmlTextWriter的类
                    System.Text.StringBuilder strb = new System.Text.StringBuilder();
                    System.IO.StringWriter sw = new System.IO.StringWriter( strb );
                    System.Web.UI.HtmlTextWriter htw = new HtmlTextWriter( sw );//执行控件的render并输出到HtmlTextWriter里
                    dg.RenderControl( htw );

= strb.ToString();
                }
                else
                {
                    s="没有相关数据！";
                }

            }
            catch
            {
                s="error!!";
            }

        return s;//最后就是返回这个html啦
        }
    }
}

AjaxDemo.aspx：

<%@ Page language="c#" Codebehind="AjaxDemo.aspx.cs" AutoEventWireup="false"
Inherits="PhantomPro.AjaxProject.AjaxDemo" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>AjaxDemo</title>
        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" Content="C#">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    </HEAD>
    <body>
        <form id="Form1" method="post" runat="server">
            <div id="div1">
                <span id="span1">A DEMO of AjaxPro</span>
                <div id="div2">
                    Employee ID: <INPUT id="TextBox3" type="text"> 
                    <br><a href="javascript:getTable();">test</a>
                </div>
                <div id="save_ing" style="visibility:hidden;"><img src="uploading.gif">请等待</div>
                <div id="div3" style="visibility:hidden;"></div>
            </div>

        <script type="text/javascript">
        AjaxPro.onLoading = function(b) {
    var l = document.getElementById("save_ing");
    l.style.visibility = b ? "visible" : "hidden";
    document.getElementById("div3").style.visibility=b?"hidden" : "visible";

  }

    function getTable()
    {
PhantomPro.AjaxProject.AjaxDemo.GetTable(document.getElementById("TextBox3").value,getTable_callback);
    }
    function getTable_callback(res)
    {
        var p=res.value;
        var d3=document.getElementById("div3");

        d3.innerHTML=p;

    }



        </script>
        </form>
    </body>
</HTML>

需要注意的是，如果按下面的方式：

......

function getTable()
{
var p=document.getElementById("div3");
var t=document.getElementById("TextBox3");
p.innerHTML=PhantomPro.AjaxProject.AjaxDemo.GetTable(t.value).value;
}</script>
......

可以显示结果，不过不能显示Loading效果。
7.初次体验Ajax，有些不太适应，尤其的是调试的阶段。传统的方式可以得到具体的错误消息，比如Sql连接错误等，Ajax得到的是js错误代码，很难判断是哪里错了。曾经花费很长时间调试DataSet，结果发现是Sql密码写错了，呵呵。也可能有调试的办法，自己还不知道吧。还有一些代码的实例，方法基本一样，不再记录了。总得来说，虽然花费了一整天的时间调试，不过最终Ajax的效果是令人兴奋的。

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

博客园 - 鬼手