下面我们来看一下使用组件思想重新编写的这个应用。首先看一下aspx页面：
Default.aspx:
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head runat="server"＞
＜title＞Untitled Pagetitle＞
head＞
＜body＞
＜form id="form1" runat="server"＞
＜asp:ScriptManager ID="ScriptManager1" runat="server"＞
＜Scripts＞
＜asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" /＞
＜asp:ScriptReference Path="~/ajax.js" /＞
Scripts＞
＜Services＞
＜asp:ServiceReference Path="~/SayHelloService.asmx" /＞
Services＞
asp:ScriptManager＞
＜div＞
＜input id="btnSayHello" type="button" value="SayHello" /＞
＜div id="result"＞div＞
div＞
form＞24body＞25html＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head runat="server"＞
＜title＞Untitled Pagetitle＞
head＞
＜body＞
＜form id="form1" runat="server"＞
＜asp:ScriptManager ID="ScriptManager1" runat="server"＞
＜Scripts＞
＜asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" /＞
＜asp:ScriptReference Path="~/ajax.js" /＞
Scripts＞
＜Services＞
＜asp:ServiceReference Path="~/SayHelloService.asmx" /＞
Services＞
asp:ScriptManager＞
＜div＞
＜input id="btnSayHello" type="button" value="SayHello" /＞
＜div id="result"＞div＞
div＞
form＞24body＞25html＞
这里有两处变化，一是在ScriptManager控件里增加了对PreviewScript.js的引用。这里要注意，客户端组件的内容并不包含在ASP.NET AJAX1.0正式版里，而是包换在ASP.NET AJAX Futures CTP部分。所以，要使用这些功能，首先要添加对Microsoft.Web.Preview.dll文件的引用，这个文件在ASP.NET AJAX Futures CTP的安装目录里，然后要在页面中添加对PreviewScript.js文件的引用。
第二个变化是这里的btnSayHello已经没有了onclick属性，那么如何知道单击这个按钮的时候需要执行何种代码呢？答案在js文件里。
ajax.js:
var btnSayHello;
var lblResult;
Sys.Application.add_init(onPageInit);
function onPageInit()
{ btnSayHello=new Sys.Preview.UI.Button($get("btnSayHello"));
btnSayHello.initialize();
lblResult=new Sys.Preview.UI.Label($get("result"));
lblResult.initialize(); btnSayHello.add_click(btnSayHello_onClick);
}
function btnSayHello_onClick(){
SayHelloService.SayHello(OnSucceeded,OnFailded);
}function OnSucceeded(resultText){
lblResult.set_text(resultText);
}function OnFailded(error){
lblResult.set_text("调用失败。错误信息："+error.get_message());}
var lblResult;
Sys.Application.add_init(onPageInit);
function onPageInit()
{ btnSayHello=new Sys.Preview.UI.Button($get("btnSayHello"));
btnSayHello.initialize();
lblResult=new Sys.Preview.UI.Label($get("result"));
lblResult.initialize(); btnSayHello.add_click(btnSayHello_onClick);
}
function btnSayHello_onClick(){
SayHelloService.SayHello(OnSucceeded,OnFailded);
}function OnSucceeded(resultText){
lblResult.set_text(resultText);
}function OnFailded(error){
lblResult.set_text("调用失败。错误信息："+error.get_message());}
我们看到，应用组件编程思想后，JavaScript发生了巨大的改变。不着急，我们一步一步解析这个文件。
