開發(fā)基于ajax和控件技術(shù)web應(yīng)用系統(tǒng)

第八章使用Ajax改善用戶體驗（一）回顧與作業(yè)點(diǎn)評簡述Ajax技術(shù)的原理簡述使用XMLHttpRequest獲取數(shù)據(jù)的步驟預(yù)習(xí)檢查ScriptManager有哪些作用？如何使用UpdatePanel控件實現(xiàn)局部刷新？本章任務(wù)實現(xiàn)“第三波書店”圖書列表的局部刷新效果實現(xiàn)“第三波書店”書籍評論局部刷新效果實現(xiàn)“第三波書店”書籍評論更新等待效果本章目標(biāo)理解AJAX框架各個組成部分的功能會使用ScriptManager注冊腳本和WebService會使用UpdatePanel實現(xiàn)局部刷新效果會使用UpdateProgress實現(xiàn)局部刷新等待效果為什么需要Ajax框架主要的缺點(diǎn)：重復(fù)性的工作手工編寫代碼量大、容易出錯要考慮兼容瀏覽器手寫Ajax代碼有什么缺點(diǎn)？常見的AJAX框架jQueryMootoolsDojoExtJSAJAX框架Microsoft的杰作和技術(shù)完美結(jié)合可視化的Ajax技術(shù)（支持控件）AJAX框架技術(shù)AJAX框架的組成AJAX核心組件簡介AJAX核心組件主要包括：ScriptManager：全局腳本控制器UpdatePanel：更新面板Timer：時鐘控件UpdateProgress：等待提示控件ScriptManagerProxy：全局腳本控制代理控件ScriptManager控件ScriptManager控件——全局腳本控制器<asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>操作演示：使用ScriptManager客戶端代碼<scriptsrc="/AjaxTest/ScriptResource.axd?d=t82UozELRU2awXiDl-A5OXdQttVZloeUFx_ZdjVFcLFg3MUGxPrfw5BxLDiAmRNioa39_mftDURbltdDIfHDu60Y4l614cQhBsBRESC9lUavT9AKlsXgsxKIEzG9gQu0&t=16ab2387"type="text/javascript"></script><scripttype="text/javascript">//<![CDATA[

Sys.WebForms.PageRequestManager._initialize('ScriptManager1','form1',[],[],[],90,'');//]]></script>初始化客戶端腳本控制器使用ScriptManager后頁面中的腳本引用AjaxLibrary

中的腳本ScriptManager用法一注冊腳本使用ScriptManager注冊腳本<asp:ScriptManagerID="ScriptManager1"runat="server"><Scripts>

<asp:ScriptReferencePath="a.js"/><asp:ScriptReferencePath="b.js"/></Scripts></asp:ScriptManager>演示示例1：ScriptManager注冊腳本

ScriptManager用法一調(diào)用WebService使用ScriptManager調(diào)用WebService基本步驟：

1、創(chuàng)建WebService

2、使用ScriptManager注冊WebService

3、使用JavaScript調(diào)用WebService演示示例2：ScriptManager調(diào)用WebService關(guān)鍵代碼回顧實現(xiàn)WebService使用ScriptManager注冊WebService在頁面中調(diào)用WebService[System.Web.Script.Services.ScriptService]publicclassWebService:System.Web.Services.WebService{publicWebService(){}

[WebMethod]publicintAdd(inta,intb){returna+b;}}<asp:ScriptManagerID="ScriptManager1"runat="server"><Services>

<asp:ServiceReferencePath="~/WebService.asmx"/></Services></asp:ScriptManager><scripttype="text/javascript">functioncallService(){WebService.Add(document.getElementById("input1").value,document.getElementById("input2").value,

processCallBack);//WebService為類名

}functionprocessCallBack(result){document.getElementById("result").value=result;}</script>……<inputtype="button"value="="onclick="callService()"/>

使用ScriptManager的要求ScriptManager的使用要求每個頁面都必須包括此控件每個頁面只能有一個ScriptManger必須放在其它AJAX組件前面ScriptManagerProxy使用ScriptManagerProxy可代替ScriptManager的某些作用，如注冊腳本或WebService等母版頁添加了一個ScriptManager，如何在內(nèi)容頁中注冊WebService?<asp:ScriptManagerProxyID="ScriptManagerProxy1"runat="server"><Services><asp:ServiceReferencePath="~/WebService.asmx"/></Services></asp:ScriptManagerProxy>語法和ScriptManager類似UpdatePanel控件UpdatePanel控件——更新面板用來實現(xiàn)無刷新效果只需把需要更新的部分放在該控件內(nèi)容模板中即可<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Always"></asp:UpdatePanel>設(shè)置采用獲取服務(wù)器端資源的方式，包括Always和Conditional兩種模式Always：每次請求時無條件刷新面板內(nèi)容Conditional：有觸發(fā)條件的更新兩個重要的子元素：<ContentTemplate>：內(nèi)容模板，類似GridView等控件的模板列<Triggers>：相當(dāng)于觸發(fā)器，只有滿足條件后才更新實現(xiàn)頁面無刷新如何實現(xiàn)無刷新的圖書列表顯示？單擊“查詢”和頁號，不刷新整個頁面演示示例3：無刷新的圖書列表顯示關(guān)鍵代碼回顧<asp:ScriptManagerID="ScriptManager1"runat="server"/><asp:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<asp:ButtonID="btnQuery"runat="server"Text="查詢"OnClick="btnQuery_Click"CssClass="opt_sub"/>

<asp:GridViewrunat="server"ID="gvBooks"

</asp:GridView></ContentTemplate></asp:UpdatePanel>把需要更新的部分放在內(nèi)容模板中練習(xí)——無刷新的圖書列表顯示需求說明：使用UpdatePanel將“第三波書店”的管理后臺書籍列表頁面改為無刷新效果完成時間：15分鐘共性問題集中講解常見調(diào)試問題及解決辦法代碼規(guī)范問題共性問題集中講解Triggers屬性Triggers屬性：只有當(dāng)定義的觸發(fā)條件滿足后才更新演示示例4：無刷新顯示時間關(guān)鍵代碼回顧<div><asp:ScriptManagerID="ScriptManager1"runat="server"/><asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="conditional">

<ContentTemplate>

<asp:LabelID="lblDateTimeInPanel"runat="server">

</asp:Label></ContentTemplate>

<Triggers><asp:AsyncPostBackTriggerControlID="btnInOutPanel"

EventName="Click"/>

</Triggers>

</asp:UpdatePanel><asp:ButtonID="btnInOutPanel"runat="server"Text="顯示當(dāng)前時間"/></div>添加Triggers屬性實現(xiàn)有條件刷新可以不放在UpdatePanel中“第三波書店”書籍評論功能如何實現(xiàn)“第三波書店”評論功能的無刷新效果？演示示例5：“第三波書店”評論功能注冊腳本的方式ScriptManager.RegisterClientScriptBlock(ment,//UpdatePanel中的任意控件typeof(TextBox),//正在注冊該腳本的控件的類型"alert",//腳本塊的唯一標(biāo)識符"alert('請先登錄再發(fā)表評論！')",//腳本true//是否用<script>和</script>標(biāo)記括起該腳本塊);使用UpdatePanel時注冊腳本的方法ScriptManager.RegisterClientScriptBlock(this.Page,//注冊該客戶端腳本塊的頁對象

this.GetType(),//正在注冊該腳本的控件的類型

"alert",//腳本塊的唯一標(biāo)識符

"alert('書籍評論不能超過500字！')",//腳本

true//是否用<script>和</script>標(biāo)記括起該腳本塊

);重載方法一重載方法二練習(xí)——書籍評論功能需求說明：實現(xiàn)“第三波書店”書籍評論功能的局部刷新效果單擊“提交評價”，列表顯示最新數(shù)據(jù)，清空表單單擊“顯示所有評論”，刷新評論列表提交評論的腳本提示用戶必須先登錄才能發(fā)布評論評價內(nèi)容不能為空評價內(nèi)容不能大于500個字完成時間：25分鐘共性問題集中講解常見調(diào)試問題及解決辦法代碼規(guī)范問題共性問題集中講解UpdateProgress控件

UpdateProgress控件：用來在更新過程中給出提示可以起到類似進(jìn)度條的功能等待中的友情提示UpdateProgress控件示例怎樣為評論功能實現(xiàn)“等待”效果？演示示例6：“第三波書店”提交評論等待關(guān)鍵代碼回顧protectedvoidbtnSubmit_Click(objectsender,EventArgse){