ASP.NET AJAX框架下Web网页的设计与实现
开篇：润墨网以专业的文秘视角，为您筛选了一篇ASP.NET AJAX框架下Web网页的设计与实现范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！
摘要：ajax是Web应用的一种新方法，使用AJAX可以强化网站的功能，提高用户体验。本文介绍了 AJAX 的功能结构，并以显示服务器的进程信息的Web页面设计为例，展示了 AJAX 在Web网页设计中的应用。
关键词：；AJAX；进程；Web网页
中图分类号：TP311文献标识码：A文章编号：1009-3044(2008)21-30462-03
AJAX and its Application in Web Page Design
ZHANG Lian-jiao
(Heyuan Polytechnic,Heyuan 517000,China)
Abstract: AJAX is a new approach to Web application. It can strengthen the function of the website, enhances the user experience. The paper introduces the function structure of AJAX, and takes the Web page design of server's process information's as example to demonstrate the application AJAX in the Web page design.
Key words: AJAX;process;Web page
1 AJAX 功能介绍
使用 中的 AJAX 功能，可以生成丰富的Web应用程序。与完全基于服务器的Web应用程序相比，这些应用程序具有很多优点。支持 AJAX 的应用程序可以提供：
1)增强的效率，因为网页的大部分处理工作是在浏览器中执行的。
2)熟悉的 UI 元素，如进度指示器、工具提示和弹出窗口。
3)部分页更新，只刷新已发生更改的网页部分。
4)客户端与用于 Forms 身份验证的 应用程序服务、角色和用户配置文件的集成。
5)自动生成的类，可简化从客户端脚本调用Web服务方法的过程。
6)一个框架，可让您自定义服务器控件以包含客户端功能。
7)对大部分流行的和常用的浏览器的支持，其中包括 Microsoft Internet Explorer、Mozilla Firefox 和 Apple Safari。[3]
2 中的 AJAX 功能的结构
中的AJAX功能结构由两部分组成：客户端脚本库和服务器组件。这两个组成部分集成在一起以提供可靠的开发框架。
AJAX 服务器控件由服务器和客户端代码组成，这些代码集成在一起可生成丰富的客户端行为。当您将 AJAX 控件添加到 网页上时，该页会自动将支持的客户端脚本发送到浏览器以获取 AJAX 功能。可以提供其他的客户端代码来自定义控件的功能。[3]
AJAX只有在适合的场景下使用才可以改善系统性能，提高用户体验。AJAX的优势在与异步交互，动态更新web页面，因此它适用于频繁交互的web应用，如数据验证、按需读取数据，定时刷新等场景。[2]
下面以显示服务器的进程信息的Web页面设计为例描述AJAX的应用过程。
该实例显示服务器的进程信息，通过应用AJAX可以避免页面的频繁刷新，异步传输服务器的进程信息，不用刷新页面获得进程信息。步骤如下：
1)启动Microsoft Visual Web Developer 2008 Express Edition，在页面上拖入一个ScriptManager控件以支持页面的局部的更新，它的作用是处理页面上的所有组件以及页面局部更新。
2)在页面上拖入一个UpdatePanel控件，在UpdatePanel控件的ContentTemplate标签内插入一个2行3列的表格，拖入3个Label控件（用来显示进程的相关信息）放在表格的第二行。
3)插入一个Timer控件，实现UpdatePanel控件内页面的定时局部更新。Timer控件的Interval属性制定时间间隔值，这里设置为1000，即1秒后刷新UpdatePanel控件内的内容，OnTick事件属性制定定时触发的处理函数，本例在隐藏代码文件中编写OnTick事件的处理函数。主要关键代码如下：
＜form id="form1" runat="server"＞
＜div＞
＜asp:ScriptManager ID="ScriptManager1" runat="server"＞
＜/asp:ScriptManager＞
＜asp:Timer ID="Timer1" runat="server"Interval="1000" ontick="Timer1_Tick"＞
＜/asp:Timer＞
＜asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"＞
＜Triggers＞
＜asp:AsyncPostBackTrigger ControlID="Timer1" /＞
＜/Triggers＞
＜ContentTemplate＞
＜table style="width: 100%;"＞
＜tr＞
＜td class="style1"＞ 进程＜/td＞
＜td class="style2"＞ id＜/td＞
＜td class="style2"＞ 内存使用＜/td＞
＜/tr＞
＜tr＞
＜td class="style1"＞
＜asp:Label ID="Label1" runat="server" Text="Label"＞＜/asp:Label＞
＜/td＞
＜td class="style2"＞
＜asp:Label ID="Label2" runat="server" Text="Label"＞＜/asp:Label＞
＜/td＞
＜td class="style2"＞
＜asp:Label ID="Label3" runat="server" Text="Label"＞＜/asp:Label＞
＜/td＞
＜/tr＞
＜/table＞
＜/ContentTemplate＞
＜/asp:UpdatePanel＞
＜/div＞
＜/form＞
隐藏代码文件中的主要关键代码：
public partial class GetProcess : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e) ＜br＞
{
GetPro(); //显示服务器进程信息函数
}
protectedvoid GetPro()
{
System.Diagnostics.Process[] processes;
processes = System.Diagnostics.Process.GetProcesses();
foreach (System.Diagnostics.Process instance in processes)
{
Label1.Text += instance.ProcessName +"＜br＞";// Label1显示进程名称
Label2.Text += instance.Id + "＜br＞";// Label2显示进程ID
Label3.Text += (instance.WorkingSet64 / 1024).ToString() + "KB" + "＜br＞";
// Label3显示进程使用内存的情况
}
}
// Timer控件的OnTick事件的处理函数
protected void Timer1_Tick(object sender, EventArgs e){
Label1.Text = "";
Label2.Text = "";
Label3.Text = "";
GetPro();
}
}
4 结束语
运行设计好的Web页面，在页面里显示服务器的进程信息，可以发现在内存使用情况更新的过程中，我们可以看到页面不用刷新，就可以显示更新的数据。正是使用了 AJAX中的UpdatePanel控件可以把现有网页的一部分包围起来，使得部分页面以异步的方式更新，给用户带来更好的体验，降低了Web服务器的开销。
参考文献：
[1] 贺伟,陈哲,龚涛,等.新一代 2.0网络编程入门与实践[M].北京:清华大学出版社,2007.
[2] 谢延红,钱爱增,胡凯,等 AJAX框架及在Web开发中的应用[J].长春工程学院学报:自然科学版,2007,8(2):77-80.
[3] AJAX 概述[EB/OL].[2008-3-11]./zh-cn/library/bb398874.aspx.
[4] UpdatePanel类[EB/OL].[2008-3-11]./zh-cn/library/bb398874.aspx.