现在的位置: 首页 > 综合 > 正文

AJAX for asp.net 插件安装及测试

2012年02月10日 ⁄ 综合 ⁄ 共 2371字 ⁄ 字号 评论关闭
一、安装篇

由于Google和Yahoo的推广,现在AJAX成为了网站的新兴技术。

AJAX是Asnychronize Javascript and XML(异步Javascript和XML)。其基本原理是当用户触发了网页中的事件时,网页中Javascript代码(理论上VBScript也能完成等效操作)先截获事件,然后在后台利用XmlHttp对象对网页进行提交。在返回的结果中提取需要部分来更新网页。这样免去了加载并没有变化的控件的时间,减少用户等待时间。而且利用AJAX还能轻松完成传统技术不能或者很难完成的特效,比如说拖拉操作。

虽然AJAX只是把现有技术进行重新组合,但是与传统编程有很大的区别。初学者学起来可能会感觉不习惯,尤其是目前还没有好的教材。好在微软ASP社区发布了能整合在Visual Studio 2005里的AJAX Extender和AJAX Control Toolkit。前者提供了AJAX技术的核心功能,也就是异步提交;而后者是控件集,内含32个AJAX控件。我先向大家介绍如何安装AJAX Extensionr和AJAX Control Toolkit。

首先需要安装.NET Framework 2.0和Visual Studio 2005。

微软ASP社区AJAX下载中心:[url=http://ajax.asp.net/downloads/default.aspx?tabid=47]http://ajax.asp.net/downloads/default.aspx?tabid=47[/url]

图1中,1为Ajax Extender的下载链接,只可惜需要Windows正版验证。2为AJAX Control Toolkit的下载链接,点击后会指向另外一个网页,网页中部有两个下载链接一个是2.2MB的完整版,一个是1.5MB的无源代码版。建议下载完全版。3为Ajax Control Toolkit的演示页面。
[attach]266232[/attach]

Ajax Extension是MSI安装程序,按照提示即可。安装完成以后会在VS里的控件工具栏里发现"Ajax Extensions"的组。里面有五个控件,具体功能以后介绍。现在就可以编译AJAX程序了。但是要进行编程,还需要下面的步骤。

Ajax Control Toolkit只能手动安装。首先将文件解压,由于其中包括实例程序,所以建议解压到方便浏览的位置。然后双击子目录AjaxControlExtender里的AjaxControlExtender.vsi。如图2。
[attach]266233[/attach]

如果安装了VS就能运行,按照提示即可。其中会提示文件可能会含有有害的代码,不用理会。接着打开VS,在控件工具栏里新建一个组,命名为"Ajax Control Toolkit"(叫什么无所谓的),如图3(不好意思,我用的是英文版的VS)。
[attach]266234[/attach]

在新组里点击右键,选"选择项目"(好烂的翻译),如图4。
[attach]266235[/attach]

在弹出对话框里点“浏览”,如图5。
[attach]266236[/attach]

选择解压出来的文件当中SampleWebsite/Bin子目录中的AjaxControlToolkit.dll文件然后确定退出,如图6。这样一来新组里就多了32个新控件了。
[attach]268111[/attach]

到此为止,就能运行Ajax Control Toolkit里面带的实例了。双击解压出来根目录里的AjaxControlToolkit.sln文件就能打开了。如果不能运行,下载本贴后面附的补丁,覆盖C:/Program Files/Microsoft Visual Studio 8/Xml/Schema里的同名文件即可。
 二、Hello World!
安装了Ajax以后是不是跃跃欲试自己做一个程序了?

我来演示如何做一个Hello World程序。

首先新建一个网站,安装了Ajax以后会多出一个"Ajax Control Toolkit Web Site"的模版了,我演示用的语言是C#,选择并确定,如图7。
[attach]266239[/attach]

打开一个网页的设计页面,这是应该会发现网页上已经有了一个ScriptManager的控件了,这个是每个使用Ajax的网页必备的控件,而且只能有一个。在网页上放一个Update Panel(在Ajax Extensions组里)、两个标签和一个按钮,分别命名为UpdatePanel1、Label1、Label2和Button1,如图8。
[attach]266240[/attach]

注意Label1和Button1在Update Panel里而Label2在Update Panel外。在Button1的Click事件里写Label1.Text = "Hello World!";。为了确定网页真的没有提交,在Page_Load里写Label2.Text = DateTime.Now.ToString();。为了体现Update Panel的作用,在Buton1的Click事件里再加上一句Label2.Text = "This should not be shown!";。如图9。
[attach]266241[/attach]

F5运行。图10跟图11是点击前后的对比。注意Label2既没有更新时间,也没有变成那一段长句子(但是在服务端,Label2的内容会正常更新,只是由于Update Panel的存在,更新没有在客户端显示出来而已。这点以后再讨论)。
[attach]266242[/attach]

[attach]266243[/attach]

怎么样,Ajax很简单吧?还等什么,接着去探索吧!
 

抱歉!评论已关闭.