前言

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

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

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

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

方案簡介

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

[[2865]]

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

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

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

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

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

[[2866]]

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

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

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

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

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

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

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

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

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

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

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

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

#p#

范例

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

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

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

將其導(dǎo)入網(wǎng)站項目中的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參數(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;
}
}

}

再添加一個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完成。

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

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

right:6px;
}

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

查看其源代碼：

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

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

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

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

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

/// 
$(function() 

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

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

"Name": 

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

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

添加一個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;

/// 

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

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

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

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

 Web 服務(wù)，請取消對下行的注釋。

 
// 

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

public WebService () {

//如果使用設(shè)計的組件，請取消注釋以下行 
//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();
}

}

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

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

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

一定要用JQuery嗎？

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

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

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

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

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

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

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

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

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

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

【編輯推薦】

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