基于Ajax.N et组件的简单Ajax程序架构

来源：互联网发布：mac版阿里旺旺下载编辑：程序博客网时间：2024/06/07 10:24

开篇先牢骚两句，各位看官可以跳过本段，呵呵。最近考试考的有些头大，还好前几天考的七七八八了。明天下午还有门英语。本着能过为金的态度，这几天着实进行了一段时间的考前大扫荡。哎，其实做学生也不容易啊。7月1号小弟就打道回家了。呵呵，着实是一件幸福的事情啊。好，闲话休提，且来回顾下Ajax框架搭建的前前后后。

谈到Ajax，我想各位在编程界打滚多年的人都会有各自不同的见解（路人甲鄙视的眼神，废话）。不过为了照顾一些对此不了解的人。我且在此重新整理下各位前人的劳动成果。

一．Ajax的前世今生

了解Ajax的前世今生其实就是了解B/S架构下的发展史。我并不是一个擅长记忆历史的人。所以对于这段历史只能做个大致的了解。所以这里的所有言语希望能够达到一个抛砖引玉的作用。如果有错误请各位谅解。各位看官如果有兴趣请到网上Google，Baidu之。（啊！不要丢鸡蛋啊！浪费粮食可耻）。好了，现在先来说一下浏览器的发展。相信不用我说，现在每一位网虫都可以脱口说出数种他们曾经或现在正在使用的浏览器类型。这些浏览器之间的战争在最近的几年时间里似乎有些愈演愈烈的姿势。不过寒星自我觉得这种竞争或许对于市场和各位网虫来说或许是好事。正常的竞争促进产品的新陈代谢。寒星当然愿意有一天他们对于CSS和JS达成一个共同的标准，那时候就能够偷着乐了。不过，不管怎样，现阶段的浏览器相较其最初的产品来说可以说是产生了一段飞跃。早期的浏览器支持的开发语言比较单一，而且表现元素也仅限于文字和图片（有的只支持文字）。当然那个时候的信息量不会像现在如此的巨大，但是随着信息量的加大，比如做一个商业性的网站，如果做成一个个静态的页面的话。估计当时的程序员都会崩溃。这时候的网站架构称为Web1.0时代，其最典型的特点就是静态。它的大概的架构如图1所示。

图1

这时候的用户在点击提交按钮的时候，浏览器将整个表单发至服务器，服务器再将其转至处理程序进行处理。当处理完成后页面以字节流火字符流的形式返回。再返回之前客户端浏览器将会是一片空白。所以当信息量增大，这种用户体验无疑成为了噩梦。所以有人就提出，能不能在提交表单的时候页面保持在原来页面呢？而当处理完成后再进行页面的更改。经过天才们的努力，终于他们研究出了Ajax技术。说是一种新的技术，其实，还是一种原有基础上的再创造。原来在当时的浏览器中，虽然支持的形式不一样。但是都有这样一个对象XMLHttpRequest，该对象有get和post等方法向服务器端以一定格式向服务器端传输数据。然后还可以接收从服务器端返回的XML或者字符串。刚好可以解决上面提出的一些棘手问题。所以风头一时无两，最终推动了时代的发展，迈向了Web2.0时代。这时候的Web页面当然是以Ajax为技术先导了。其中Google公司对于该技术的推广也有很大的作用。下面我们来看看这时候的网络架构。如图2所示。

图2

从上图可以看到，这时的浏览器不再将请求直接发送到后台处理器程序而是首先发送到Ajax引擎中，由它来当外交官和服务器进行交涉。而这个神秘的任务通常都是有Javascript程序传人担任（呵呵，恶搞下）。浏览器发送的数据首先在Ajax引擎中进行存储，然后转交至服务器（此时浏览器页面还是正常的），当服务器程序完成任务后将结果返回.Javascript外交官进行翻译，然后将翻译的内容显示给他的顶头上司（浏览器）。这样一次无刷新的数据传输过程就完成了。

最后抖落下Ajax的家底

Ajax全名:(Asynchronous Javascript and XML,异步Javascript和XML)

创作人：Jesse James Garrett

出现时间及事件：创作人在2005为Adaptive Path公司创作一篇文章Ajax：A new

Approach to Web Application.

主要技术：

² XHTML和CSS

² 文档对象模型

² Javascript

² XML和XSLT

² XMLHttpRequest

优势：N多

缺点：嘿嘿，卖个关子，请兴趣的大大们Google/baidu下。需要提醒的一点就是运用Ajax请保持清醒的头脑。

好了，到此打住吧。我的砖已经抛完了（希望没砸到人—砸到花花草草也不好哇），希望可以让各位对于Ajax有一个感性的认识吧。

二．Ajax架构之前的准备工作

所用开发平台：VS2005

需要安装组件：ASPAJAXCTP.msi和ASPAJAXExtSetup.msi

三．关键步骤和代码解释

1. 安装ASPAJAXCTP.msi和ASPAJAXExtSetup.msi

2. 创建一个网站程序，将其命名为Hello ajax

3. 将System.Web.Extensions引用添加进来（这步很重要）

单击解决方案资源管理器中的属性图标，在属性页中点击添加引用，在.Net选项中选择System.Web.Extensions，点击确定。

4．在项目中添加Webservice页面，我将其命名为DataProcess。这时在项目文件中会出现一个DataProcess.asmx和DataProcess.cs(在App_Code中)。其中DataProcess.cs的程序代码如下（如有不同请添加）：

using System;

using System.Web;

using System.Collections;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Web.Script.Services;

/// <summary>

/// WebService 的摘要说明

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

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

public WebService () {

//如果使用设计的组件，请取消注释以下行

//InitializeComponent();

}

[WebMethod]

public string HelloWorld() {

return "Hello World";

}

这个页面的代码可以作为后台程序的一个缓冲。比如把数据库的操作部分代码在这个页面中进行再次的封装。当调用时利用DataProcess类的方法进行调用。由于这个不是本篇的主要内容，所以不再多讲。

5.添加一个js文件夹并在其中添加一个名为Ajax.js的文件。

6．在Default.cs页面中添加一个按键。代码如下所示

<title>Hello Ajax</title>

</head>

<body>

</div>

</form>

</body>

</html>

可以看到，在这个页面中，我将刚才添加的Ajax.js页面已经包含了进来。并对添加进来的测试按钮绑定了一个名为sayHello的JS函数。id为doc的div层用来显示结果。

下面我们在js中完成这个函数。

function ReceiveServerData(rvalue)

{

document.getElementById('doc').innerHTML=rvalue;

}

function sayHello()

{

CallServer('hello');

}

是不是很惊讶于这么简短的代码？只是调用了一个CallServer函数就完成了Hello传递。而上面的ReceiveServerData函数从字面上相信你也可以猜到它就是前台接收数据的函数了。有些人这时候可能会喊了：这……这能行吗？别急。且听我慢慢道来。

7.现在前台的工作大体上已经完成了。还有一个后台的Default.cs页面没有完成。且来看看它有什么东西。

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page,ICallbackEventHandler

{

protected string backResult;

protected void Page_Load(object sender, EventArgs e)

{

ClientScriptManager cs = Page.ClientScript;//定义一个管理客户端脚本的方法cs

string cbReference = cs.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");//获取一个对ReceiveServerData客户端函数的引用,将启动一个对服务器端事件的客户端回调

string CallBackScript = "function CallServer(arg,context){" + cbReference + ";}";

cs.RegisterClientScriptBlock(this.GetType(), "CallServer", CallBackScript, true);//动态注册js脚本

}

public void RaiseCallbackEvent(string args)

{

backResult = "Hello Ajax!";

}

public string GetCallbackResult()

{

return backResult;

}

首先在代码中添加IcallbackEventHandler的继承。注意库的引用。然后就是在Page_Load中的几句代码和RaiseCallbackEvent及GetCallbackResult两个函数。其实在Page_Load动态注册了一个ScriptManerger控件。这个控件是ASP.NET AJAX框架所特有的Ajax控件。然后注册了一个客户端回调函数ReceiveServerData，这个函数的作用为接收从服务器端发来的数据。下面代码的答题意思就是让Callserver作为客户端的发送数据函数。而RaiseCallBackEvent为接收Callserver传来字符串的的函数（注意只能以字符串的形式传递数据，这是这个框架使用的前提，请特别注意），在这个函数中你可以进行一些事件的判断，并以字符串的形处理出结果储存在backResult函数中。然后在GetCallBack函数中进行返回。这两个函数已经在开发包中规定了。有兴趣的可以到官方的MSDN中去查找。

到这里一个简单实用的Ajax框架就构建完成了。下面我们看一下程序运行的效果。

当你完成后，你就会发现，Hello Ajax这行字是在页面无刷新的情况下出现的。

四．结束语

这个Ajax的构架，相信各位大大也看到了，很粗陋。我没有加入任何的后续代码，只是将这样一个Ajax的平台构建完成。现在只能说他是一个空壳。但是通过这个Ajax架构你却可以加入很多有用的元素进去，一方面是为了便于讲解，另一方面也是一种抛砖引玉（老大，能不能换个词！）。下面的工作就看个位牛人怎么发挥了。