前言

早在Web標(biāo)準(zhǔn)化風(fēng)潮到來之前 ，我就考慮過XML+XSLT建站了，我以為這是一種非常優(yōu)雅、 高效、低耦的方案，必將大行其道。

然而時(shí)至今日，使用這種方案建站的人依然寥寥無幾，大家還都在抱著Web標(biāo)準(zhǔn)化不撒手，其實(shí)Web標(biāo)準(zhǔn)化只是 將表現(xiàn)（Css）分離了出來，而數(shù)據(jù)和結(jié)構(gòu)仍然混雜在一起 ，它絕對(duì)不是我們最終的歸宿，它只是一個(gè)過渡品。

XHtml標(biāo)準(zhǔn)的建立初衷，其實(shí)也就是為了向 XML過渡的，XML+XSLT+CSS才真正做到數(shù)據(jù)、結(jié)構(gòu)、表現(xiàn)的完美分離，才是我們的終極目標(biāo)。

誠然，XML+XSLT確實(shí)有其技術(shù)難度， 我想這是它難于普及的最大障礙所在，但我覺得隨著時(shí)間的推移、觀念的更新、工具的發(fā)展， 這仍舊是我們必會(huì)到達(dá)的一站。

方案簡介

XML+XSLT+CSS的方案將數(shù)據(jù)、結(jié)構(gòu)、表現(xiàn)進(jìn)行 了分離，而依托JQuery我們又可以輕松地將交互也從中分離 出來，這樣在客戶端就達(dá)到了近乎完美的解耦。

[[2865]]

而在服務(wù)器端，我們只負(fù)責(zé)輸入和輸出：

輸入部分使用WebService，主要用于 接收客戶端提交的數(shù)據(jù)，以更新服務(wù)器數(shù)據(jù)。

輸出部分即為XML，可以有兩種實(shí)現(xiàn)方 案：

1. 動(dòng) 態(tài)型。使用一個(gè)擴(kuò)展名為.ashx處理程序負(fù)責(zé)輸出 XML，只要通過此處理程序從數(shù)據(jù)庫取出客戶端需要的數(shù)據(jù) ，并轉(zhuǎn)換為XML文檔輸出即可。動(dòng)態(tài)型的好處在于支持 Url參數(shù)查詢及其他復(fù)雜查詢處理。

2.靜態(tài)型。放棄數(shù)據(jù)庫，將所有用于呈現(xiàn)的數(shù)據(jù)都直接寫為XML文件。靜態(tài)型的好處當(dāng)然就是服務(wù)器負(fù)荷極低了，在不提交數(shù)據(jù)的情況 下，服務(wù)器會(huì)比純靜態(tài)HTML網(wǎng)站還要輕松很多。

[[2866]]

對(duì)比以往的各種開發(fā)方案，我總結(jié)出此方案具有以下優(yōu)勢：

1.更便于團(tuán)隊(duì)協(xié)作。充分解耦帶來的就是細(xì)化分工及并行開發(fā)，以往的各 種開發(fā)方案中，總有許多地方界限模糊，致使前臺(tái)與后臺(tái)、程序員與設(shè)計(jì)師頻繁磋商，延誤開 發(fā)效率。

比如僅僅是一個(gè)XHTML文檔， 設(shè)計(jì)師要在上面定義文檔結(jié)構(gòu)，以及ID、Class，前臺(tái)程序員要在上面寫客戶端事件，后臺(tái)程序員得把從數(shù)據(jù)庫中取 得的數(shù)據(jù)插入到頁面中的某處，三方的工作都受其牽制，這時(shí)XHTML就像是一個(gè)接口，三方共用著這一個(gè)接口。

而我們的這個(gè)方案中的情況是怎樣的呢？后臺(tái)程序員只管怎么跟 數(shù)據(jù)庫打交道、怎么處理業(yè)務(wù)邏輯，客戶端需要數(shù)據(jù)時(shí)，只要扔出個(gè)XML文檔就可以了； 作為設(shè)計(jì)師，只要知道XML文檔結(jié)構(gòu)，就可以通過XSLT靈活地安排布局 ，即使需要大幅修改布局，也不需要?jiǎng)跓┖笈_(tái)程序員插手，簡單的XSLT語法對(duì)于設(shè)計(jì)師不是什么大問題；前臺(tái)程序員需要知道用戶界面中有哪些交互 控件，為他們安排事件邏輯，并提交到后臺(tái)的WebService中 去就可以了；這時(shí)XML、XSLT、WebService就像是三個(gè)接口，一方最多接 觸其中的兩個(gè)。

接口多了好，還是少了好？可以看看索愛手機(jī)的例子，索愛手機(jī) 大多是耳機(jī)、充電、數(shù)據(jù)傳輸都共用著一個(gè)接口，充電的時(shí)候不能插耳機(jī)聽歌、插耳機(jī)聽歌的 時(shí)候不能傳數(shù)據(jù)、傳數(shù)據(jù)的時(shí)候不能充電，而其他品牌的手機(jī)則大多是分別使用多個(gè)接口的， 哪個(gè)更方便不言自明吧。（當(dāng)然，從安全角度來看的話，索愛的單接口卻是更優(yōu)秀的，此前曾 有新聞報(bào)道過某男用手機(jī)邊聽歌邊充電被雷擊致死的事故，那人在死前還大喊：“?。∥宜览?！”-_-#，圍觀地址）

2.更節(jié)省服務(wù)器資源。帶寬資源方面：此方案中，用戶每次切換頁面，所 需下載的都只是一個(gè)XML文檔而已，其他XSLT、CSS、JS都只需下載一次，提交時(shí)也不需要表單回發(fā)，更不需要ViewState。處理器資源方面：客戶端呈現(xiàn)完代碼全由XSLT在客戶端動(dòng)態(tài)合成，服務(wù)器端的工作僅僅是處理業(yè)務(wù)邏輯和數(shù)據(jù)庫交互，極其 輕松。此方案的資源消耗水平略高于Ajax方案，低于 MVC方案，相對(duì)于WebForm、MVP及傳統(tǒng)腳本式的方案來說，節(jié)省的 資源非常可觀。

3.更易于搜索引擎收錄。首先就是此方案可以被搜索引擎收錄，而 Ajax方案的弊端就在這里；其次，搜索引擎喜歡冗余少的網(wǎng) 站，這會(huì)一定程度上影響網(wǎng)站排名，而XML數(shù)據(jù)最為符合這 一要求；再者，網(wǎng)址較為友好，這是相對(duì)MVC而言的，具體 原因可參看我此前發(fā)表的一篇文章 。

4.更容易在其他客戶端中使用。這一點(diǎn)Ajax方案也同樣優(yōu)秀，MVP方案實(shí)現(xiàn)起來有些困 難，其他的方案都難以實(shí)現(xiàn)。

沒有完美的事物，此方案弊端如下：

1. 更 高的技術(shù)要求。顯然相比以往的方案，此方案需要開發(fā)者掌握更多知識(shí)，并組合應(yīng)用。

2.更高的客戶端負(fù)荷。XSLT加重了客 戶端的處理壓力，雖然我們大都覺得客戶端的運(yùn)算資源負(fù)荷是一個(gè)可以忽視的問題，從而將盡 可能多的運(yùn)算放到客戶端，但并不是所有客戶都使用中高端的機(jī)器，尤其是對(duì)一些上網(wǎng)本用戶 而言，JS已經(jīng)讓他們頭疼了。

3.更差的兼容性。HTML、 JS、CSS在各個(gè)瀏覽器上 本就有些兼容性問題，現(xiàn)在XSLT又摻合進(jìn)來，開發(fā)者面臨的 問題更為嚴(yán)峻。并且對(duì)于移動(dòng)客戶端、盲人閱讀器及其他非常規(guī)客戶端而言，XSLT是否會(huì)被解析都是個(gè)疑問。

#p#

范例

現(xiàn)在演示一個(gè)網(wǎng)站范例。

首先建立一個(gè)數(shù)據(jù)庫，這里使用的Accesee 2000-2003數(shù)據(jù)庫，命名為Database.mdb，在其中建 立User表：

輸入一些數(shù)據(jù)，用于測試顯示：

將其導(dǎo)入網(wǎng)站項(xiàng)目中的App_Data目錄 。

添加一個(gè)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參數(shù)
var max = 0;
Int32.TryParse(HttpContext.Current.Request.QueryString["max"],out 

max);
//讀取數(shù)據(jù)
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;
}
}

}

再添加一個(gè)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網(wǎng)站測試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網(wǎng)站測試h1>
<ul>
<xsl:for-each select="http://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中可包含用于提交數(shù)據(jù)的交互控件， 但不需要為其定義事件處理，交互處理都由JS完成。

添加一個(gè)CSS文件，命名為 Style.css，輸入以下代碼：

body
{
background-color: Silver;
}
h1
{
color: Gray;
}
a
{
color:White;
margin-

right:6px;
}

編譯并運(yùn)行，即可看到輸出的數(shù)據(jù)：

查看其源代碼：

用戶訪問不同頁面時(shí)，只有這些 XML代碼會(huì)被多次 下載，其他客戶端的文件都只需下載一次，大大節(jié)省了服務(wù)器網(wǎng)絡(luò)資源。

由于此前在ashx中編寫了支持 Url參數(shù)查詢的代碼，我們可以通過設(shè)置max參數(shù)來決定顯示的最大數(shù)據(jù)條目數(shù)：

輸出部分至此就完成了，接下來是輸入部分：

導(dǎo)入JQuery代碼jquery-1.3.2.js到項(xiàng)目中。

添加一個(gè)JS文件，命名為 Post.js，輸入以下代碼：

/// 
$(function() 

{
$("#PostName").click(function() 

{
$.post("./webservice.asmx/AddName", { 

"Name": 

$("#Name").attr("value") }, function() { location.reload(); })
});
}
);

可以看到，通過JQuery在JS代碼文件中為按鈕注冊(cè)處理函 數(shù)非常簡單，這樣就將交互部分完全分離開來。

添加一個(gè)WebService，命名為 WebService.asmx，在其后臺(tái)代碼文件WebService.cs中輸入如下代碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.OleDb;

/// 

///WebService 的摘要說明
/// 

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

WsiProfiles.BasicProfile1_1)]
//若要允許使用

 ASP.NET AJAX 從腳本中調(diào)用此

 Web 服務(wù)，請(qǐng)取消對(duì)下行的注釋。

 
// 

[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

public WebService () {

//如果使用設(shè)計(jì)的組件，請(qǐng)取消注釋以下行 
//InitializeComponent(); 
}

[WebMethod(Description="添加一個(gè)新的用戶名")]
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();
}

}

編譯并執(zhí)行，測試提交數(shù)據(jù)：

提交成功后會(huì)刷新頁面（JS里的回調(diào) 函數(shù)所為），刷新后的輸出數(shù)據(jù)：

此范例完成，解決方案資源管理器中顯示的目錄結(jié)構(gòu)如下：

一定要用JQuery嗎？

不，只是方便而已，其他框架或自寫JS也都可以實(shí)現(xiàn)。

我的網(wǎng)站需要側(cè)邊欄顯示一些熱門文章排行之類的東西，該怎么 實(shí)現(xiàn)呢？

可以通過Ajax的方式，配合 WebService異步獲取數(shù)據(jù)，但這樣的話搜索引擎沒法收錄這 些數(shù)據(jù)。

也可以將這些數(shù)據(jù)直接寫在XML里，但 這樣的話又會(huì)造成冗余。

比較妥當(dāng)?shù)姆椒ㄊ菍?/SPAN>XSLT也改為由 ashx處理程序動(dòng)態(tài)生成，在里面寫入這些數(shù)據(jù)，但這樣會(huì)增 加服務(wù)器負(fù)荷，注意設(shè)好緩存應(yīng)該影響不大，另外的副作用就是使后臺(tái)開發(fā)人員和設(shè)計(jì)師又親 密接觸了。

怎么使用Session？怎么使 用Membership？

我們的XML文件是使用ashx處理的，實(shí)質(zhì)上它和aspx沒多大區(qū) 別，可以通過HttpContext.Current.Session訪問到 Session，要干什么都可以在里面干了。如果要由客戶端改 變Session的值，只要通過WebService就可以了。

使用Membership也是同樣道理，只不 過少了那些登錄控件什么的，你必須手動(dòng)編寫代碼來控制了。

XML是XHtml的終極目標(biāo)，雖然現(xiàn)在將XML用于網(wǎng)站開發(fā) 或許還不夠成熟，但是應(yīng)該距成熟不遠(yuǎn)了，Ajax的誕生進(jìn)一 步奠定了前往XML的路，這路必定會(huì)越來越好走的。

我承認(rèn)，我喜歡研究一些非主流的東西=。=，此前還研究過用XAML做網(wǎng)頁，HOHO，也許RIA才是未來的王者也說不定。

【編輯推薦】

1. 亮劍.NET：圖解ASP.NET網(wǎng)站開發(fā)實(shí)戰(zhàn)
2. 作為ASP.NET開發(fā)人員必須養(yǎng)成的編程習(xí)慣
3. 視頻教程:ASP.NET Web開發(fā)詳解