原文位址：http://dotnetslackers.com/articles/atlas/xml_script_tutorial_part2.aspx
asp.net ajax xml-script教程（二）
原文釋出日期：2006.12.11
作者：Alessandro Gallo
翻譯：webabcd
概述
在xml-script教程的第一部分（譯者注：中文在這裡）裡我們介紹了類型描述符并且知道了如何看懂它們。在本文（第二部分）中我們将了解如何在聲明代碼裡通過用戶端控件處理事件。
處理事件
在教程的第一部分讨論類型描述符的時候，我們使用xml-script執行個體化有類型描述符的用戶端元件。有了類的類型描述符，我們就知道如何使用xml-script建立一個執行個體。例如，Sys.Preview.UI.Button和Sys.Preview.UI.Label類包含在PreviewScript.js檔案下，其暴露出的類型描述符如下：
Sys.Preview.UI.Button.descriptor = {
properties: [ { name: 'command', type: String },
{ name: 'argument', type: String } ],
events: [ { name: 'click' } ]
}
Sys.Preview.UI.Label.descriptor = {
properties: [ { name: 'htmlEncode', type: Boolean },
{ name: 'text', type: String } ]
}
在接下來的示例代碼中包含了上述的所有描述符。這段代碼是一段标準的xml-script代碼塊。建立了一個Button和一個Label執行個體，Button的click事件調用一段javascript函數，該函數用于在Label上顯示一條資訊。
<%@ Page %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Hello XML-script</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="TheScriptManager" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Microsoft.Web.Preview"
Name="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js" />
</Scripts>
</asp:ScriptManager>
<div>
<input type="button" id="btnSay" value="Click Me" />
</div>
<h1><span id="lblHello"></span></h1>
<script type="text/xml-script">
<page xmlns="http://schemas.microsoft.com/xml-script/2005">
<components>
<label id="lblHello" />
<button id="btnSay" click="btnSay_click" />
</components>
</page>
</script>
<script type="text/javascript">
<!--
function btnSay_click(evt) {
$find('lblHello').set_text('Hello XML-script!');
}
//-->
</form>
</body>
</html>
我們主要來看看頁中xml-script代碼，和在components節點下的一些元素。第一個是Label标簽，它把一個用戶端類型映射到了Sys.Preview.UI.Label執行個體，雙方的映射是通過id屬性來相關聯的。第二個标簽是button，通過id屬性把相關聯的用戶端類型映射到了Sys.Preview.UI.Button執行個體。
button的click屬性是我們感興趣的部分，它的值是一個全局javascript函數的名字 - btnSay_click，該javascript函數寫在後面的javascript代碼塊裡。類型描述符中的一個事件被映射到了xml屬性中的同名事件，這個屬性的值就是用來處理該事件的javascript函數的名稱。
讓我們來看看第二種觸發事件的方法 - 通過用戶端控件。用下面這段代碼取代上面的button标簽。
<button id="btnSay">
<click>
<setPropertyAction target="lblHello" property="text"
value="Hello XML-script!" />
</click>
</button>
現在運作這個頁，它将做如代碼改變之前一樣的工作，這是怎麼回事呢？
Actions
類型描述符中的事件可以用與事件名相同的名字作為xml标簽而被解析。它包括一個或多個子元素用來調用action。
一個action就是一個内置了一個事件的執行邏輯的對象。在最後的那個例子中我們用一個被稱作SetProperty的action來處理click事件。這個action實際上就是Sys.Preview.SetPropertyAction類的執行個體，它也有自己的一些類型描述符
Sys.Preview.SetPropertyAction.descriptor = {
properties: [ {name: 'property', type: String},
{name: 'propertyKey' },
{name: 'value', type: String} ]
你可以比較一下SetPropertyAction類和其相關的xml标簽，事實上類的名字就映射到了相關的xml元素。xml中的target屬性的值就是Lable控件的id，該Label控件的text屬性将被更改。value屬性的值就是設定Lable控件的text屬性的值。
SetPropertyAction還有一個被稱作propertyKey的類型描述符。它的作用是設定一些屬性的子屬性，下面就是一段示例代碼，你可以用它替換掉原來的相關代碼
<setPropertyAction target="lblHello"
property="text"
property="element"
propertyKey="style.backgroundColor"
value="#FFFF00" />
這樣，我們就有兩個action了。第一個action用于設定Lable的text屬性，第二個action使用者把Label的背景顔色設為×××。第二個action的property屬性設定成了“element”，它傳回一個關聯到Label的DOM（span标簽）。我們通過get_的方式來取得屬性，propertyKey屬性包含了擴充屬性，如果我們要通路style對象的backgroundColor屬性的話，應該使用像下面這樣的javascript語句
$find('lblHello').get_element().style.backgroundColor = '#FFFF00';
總結
xml-script允許通過聲明代碼執行個體化有類型描述符的用戶端元件。它允許調用一段javascript函數，或者執行一個或多個action去處理事件。
在下一篇教程裡，我們将繼續讨論事件，并且介紹一下Microsoft Ajax Library裡的其它一些内置action。
![SpringMVC(六) | 前後端互動之ajax與jsonjsonajax[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)