XML+XSLT+CSS+JQuery+WebService组建Asp.Net网站
前言早在Web标准化风潮到来之前,我就考虑过XML+XSLT建站了,我以为这是一种非常优雅、高效、低耦的方案,必将大行其道。 然而时至今日,使用这种方案建站的人依然寥寥无几,大家还都在抱着Web标准化不撒手,其实Web标准化只是将表现(Css)分离了出来,而数据和结构仍然混杂在一起,它绝对不是我们最终的归宿,它只是一个过渡品。 XHtml标准的建立初衷,其实也就是为了向XML过渡的,XML+XSLT+CSS才真正做到数据、结构、表现的完美分离,才是我们的终极目标。 诚然,XML+XSLT确实有其技术难度,我想这是它难于普及的最大障碍所在,但我觉得随着时间的推移、观念的更新、工具的发展,这仍旧是我们必会到达的一站。 方案简介XML+XSLT+CSS的方案将数据、结构、表现进行了分离,而依托JQuery我们又可以轻松地将交互也从中分离出来,这样在客户端就达到了近乎完美的解耦。
而在服务器端,我们只负责输入和输出: 输入部分使用WebService,主要用于接收客户端提交的数据,以更新服务器数据。 输出部分即为XML,可以有两种实现方案: 1. 动态型。使用一个扩展名为.ashx处理程序负责输出XML,只要通过此处理程序从数据库取出客户端需要的数据,并转换为XML文档输出即可。动态型的好处在于支持Url参数查询及其他复杂查询处理。 2. 静态型。放弃数据库,将所有用于呈现的数据都直接写为XML文件。静态型的好处当然就是服务器负荷极低了,在不提交数据的情况下,服务器会比纯静态HTML网站还要轻松很多。
优势对比以往的各种开发方案,我总结出此方案具有以下优势: 1. 更便于团队协作。充分解耦带来的就是细化分工及并行开发,以往的各种开发方案中,总有许多地方界限模糊,致使前台与后台、程序员与设计师频繁磋商,延误开发效率。 2. 更节省服务器资源。带宽资源方面:此方案中,用户每次切换页面,所需下载的都只是一个XML文档而已,其他XSLT、CSS、JS都只需下载一次,提交时也不需要表单回发,更不需要ViewState。处理器资源方面:客户端呈现完代码全由XSLT在客户端动态合成,服务器端的工作仅仅是处理业务逻辑和数据库交互,极其轻松。此方案的资源消耗水平略高于Ajax方案,低于MVC方案,相对于WebForm、MVP及传统脚本式的方案来说,节省的资源非常可观。 3. 更易于搜索引擎收录。首先就是此方案可以被搜索引擎收录,而Ajax方案的弊端就在这里;其次,搜索引擎喜欢冗余少的网站,这会一定程度上影响网站排名,而XML数据最为符合这一要求;再者,网址较为友好,这是相对MVC而言的,具体原因可参看我此前发表的一篇文章。 4. 更容易在其他客户端中使用。这一点Ajax方案也同样优秀,MVP方案实现起来有些困难,其他的方案都难以实现。 弊端没有完美的事物,此方案弊端如下: 1. 更高的技术要求。显然相比以往的方案,此方案需要开发者掌握更多知识,并组合应用。 2. 更高的客户端负荷。XSLT加重了客户端的处理压力,虽然我们大都觉得客户端的运算资源负荷是一个可以忽视的问题,从而将尽可能多的运算放到客户端,但并不是所有客户都使用中高端的机器,尤其是对一些上网本用户而言,JS已经让他们头疼了。 3. 更差的兼容性。HTML、JS、CSS在各个浏览器上本就有些兼容性问题,现在XSLT又掺合进来,开发者面临的问题更为严峻。并且对于移动客户端、盲人阅读器及其他非常规客户端而言,XSLT是否会被解析都是个疑问。 范例现在演示一个网站范例。 首先建立一个数据库,这里使用的Accesee 2000-2003数据库,命名为Database.mdb,在其中建立User表:
输入一些数据,用于测试显示:
将其导入网站项目中的App_Data目录。 添加一个ashx文件,名为Default.ashx:
输入以下代码: <%@ WebHandler Language="C#" Class="Default" %> using System; using System.Web; using System.Data.OleDb; using System.Data; using System.Xml; public class Default : IHttpHandler { public void ProcessRequest(HttpContext context) { OleDbConnection c = new OleDbConnection(string.Format(@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=""{0}"";Persist Security Info=True", HttpContext.Current.Server.MapPath(@"~\App_Data\Database.mdb"))); var ds = new DataSet(); c.Open(); //获取Url中的max参数 var max = 0; Int32.TryParse(HttpContext.Current.Request.QueryString["max"],out max); //读取数据 new OleDbDataAdapter(string.Format("select{0} * from [User]", max > 0 ? " top " + max : string.Empty), c).Fill(ds); c.Close(); //建立XML文档 var xml = new XmlDocument(); xml.LoadXml(ds.GetXml()); //添加文档声明 xml.InsertBefore(xml.CreateXmlDeclaration("1.0", "UTF-8", null), xml.DocumentElement); //添加xslt声明 var xsl = xml.CreateProcessingInstruction("xml-stylesheet", @"type=""text/xsl"" href=""Default.xslt"""); xml.InsertBefore(xsl, xml.DocumentElement); //输出 context.Response.ContentType = "application/xml"; context.Response.Write(xml.InnerXml); } public bool IsReusable { get { return false; } } } 再添加一个XSLT文件,命名为Default.xslt,输入以下代码: <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl" > <xsl:template match="/"> <html> <hread> <title>XML网站测试</title> <link href="Style.css" rel="stylesheet" type="text/css"/> <script src="jquery-1.3.2.js" type="text/javascript"/> <script src="Post.js" type="text/javascript"/> </hread> <body> <h1>XML网站测试</h1> <ul> <xsl:for-each select="//Table"> <li> <a href="#"> <xsl:value-of select="ID"/> </a> <xsl:value-of select="UserName"/> </li> </xsl:for-each> </ul> <input type="text" name="Name" id="Name" /> <input type="submit" name="PostName" id="PostName" value="提交" /> </body> </html> </xsl:template> </xsl:stylesheet> 注意,在XSLT中可包含用于提交数据的交互控件,但不需要为其定义事件处理,交互处理都由JS完成。
添加一个CSS文件,命名为Style.css,输入以下代码: body { background-color: Silver; } h1 { color: Gray; } a { color:White; margin-right:6px; } 编译并运行,即可看到输出的数据:
查看其源代码:
用户访问不同页面时,只有这些XML代码会被多次下载,其他客户端的文件都只需下载一次,大大节省了服务器网络资源。 由于此前在ashx中编写了支持Url参数查询的代码,我们可以通过设置max参数来决定显示的最大数据条目数:
输出部分至此就完成了,接下来是输入部分: 导入JQuery代码jquery-1.3.2.js到项目中。 添加一个JS文件,命名为Post.js,输入以下代码: /// <reference path="jquery-1.3.2-vsdoc2.js" /> $(function() { $("#PostName").click(function() { $.post("./webservice.asmx/AddName", { "Name": $("#Name").attr("value") }, function() { location.reload(); }) }); } ); 可以看到,通过JQuery在JS代码文件中为按钮注册处理函数非常简单,这样就将交互部分完全分离开来。 添加一个WebService,命名为WebService.asmx,在其后台代码文件WebService.cs中输入如下代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Data.OleDb; /// <summary> ///WebService 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] //若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。 // [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { public WebService () { //如果使用设计的组件,请取消注释以下行 //InitializeComponent(); } [WebMethod(Description="添加一个新的用户名")] public void AddName(string Name) { OleDbConnection c = new OleDbConnection(string.Format(@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=""{0}"";Persist Security Info=True", HttpContext.Current.Server.MapPath(@"~\App_Data\Database.mdb"))); c.Open(); new OleDbCommand(string.Format("INSERT INTO [User] VALUES (''{0}'',''{1}'')",Guid.NewGuid(),Name),c).ExecuteNonQuery(); c.Close(); } }
编译并执行,测试提交数据:
提交成功后会刷新页面(JS里的回调函数所为),刷新后的输出数据:
此范例完成,解决方案资源管理器中显示的目录结构如下:
可预见的问题一定要用JQuery吗? 不,只是方便而已,其他框架或自写JS也都可以实现。 我的网站需要侧边栏显示一些热门文章排行之类的东西,该怎么实现呢? 可以通过Ajax的方式,配合WebService异步获取数据,但这样的话搜索引擎没法收录这些数据。 也可以将这些数据直接写在XML里,但这样的话又会造成冗余。 比较妥当的方法是将XSLT也改为由ashx处理程序动态生成,在里面写入这些数据,但这样会增加服务器负荷,注意设好缓存应该影响不大,另外的副作用就是使后台开发人员和设计师又亲密接触了。 怎么使用Session?怎么使用Membership? 我们的XML文件是使用ashx处理的,实质上它和aspx没多大区别,可以通过HttpContext.Current.Session访问到Session,要干什么都可以在里面干了。如果要由客户端改变Session的值,只要通过WebService就可以了。 使用Membership也是同样道理,只不过少了那些登录控件什么的,你必须手动编写代码来控制了。 结语XML是XHtml的终极目标,虽然现在将XML用于网站开发或许还不够成熟,但是应该距成熟不远了,Ajax的诞生进一步奠定了前往XML的路,这路必定会越来越好走的。 我承认,我喜欢研究一些非主流的东西=。=,此前还研究过用XAML做网页,HOHO,也许RIA才是未来的王者也说不定。 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |