單元8：創(chuàng)建無刷新網(wǎng)頁任務(wù)1：創(chuàng)建AJAX程序WEB應(yīng)用開發(fā) 單元8：創(chuàng)建無刷新網(wǎng)頁任務(wù)1：創(chuàng)建AJAX程序WEB應(yīng)主要內(nèi)容AJAX介紹1ASP.NETAJAX技術(shù)2ASP.NETAJAX架構(gòu)3ASP.NETAJAX應(yīng)用程序4主要內(nèi)容AJAX介紹1ASP.NETAJAX技術(shù)2ASP學(xué)習(xí)目標(biāo)知識目標(biāo)了解什么是AJAX了解AJAX技術(shù)的構(gòu)成了解ASP.NETAJAX技術(shù)掌握AJAX技術(shù)如何在ASP.NET應(yīng)用程序中發(fā)揮作用能力目標(biāo)能夠創(chuàng)建AJAX程序?qū)W習(xí)目標(biāo)知識目標(biāo)技術(shù)應(yīng)用背景現(xiàn)今，在Web開發(fā)領(lǐng)域最流行的就屬AJAX，AJAX能夠提升用戶體驗，更加方便的與Web應(yīng)用程序進(jìn)行交互。在傳統(tǒng)的Web開發(fā)中，對頁面進(jìn)行操作往往需要進(jìn)行回發(fā)，從而導(dǎo)致頁面刷新，而使用AJAX就無需產(chǎn)生回發(fā)從而實現(xiàn)無刷新效果。AJAX英文全稱是AsynchronousJavaScriptandXML，中文稱為異步JavaScript和XML。事實上AJAX本身不能稱為一門技術(shù)、語言或者是軟件，它是多種技術(shù)組合，這些技術(shù)存在了很多年，現(xiàn)在借助于AJAX的出現(xiàn)，開始越來越受到開發(fā)人員的重視。技術(shù)應(yīng)用背景現(xiàn)今，在Web開發(fā)領(lǐng)域最流行的就屬AJAX，AJ一、任務(wù)1：一個ASP.NETAJAX程序任務(wù)描述本次任務(wù)通過創(chuàng)建一個ASP.NETAJAX程序讓大家直觀了解頁面局部刷新。當(dāng)點(diǎn)擊“標(biāo)準(zhǔn)回發(fā)”按鈕時，整個頁面會被PostBack,服務(wù)器傳回數(shù)據(jù)后，瀏覽器將刷新整個頁面。當(dāng)點(diǎn)擊“異步回發(fā)”按鈕時，僅陰影部分被刷新。單擊更新整個頁面單擊更新局部區(qū)域一、任務(wù)1：一個ASP.NETAJAX程序任務(wù)描述單擊更AJAX(AsynchronousJavaScript+XML)是一種在客戶端與服務(wù)器端異步通信的技術(shù)，通俗點(diǎn)來說就是無刷新的頁面請求技術(shù)。在ASP.NET中，每當(dāng)用戶請求頁面時，無論是第一次請求還是頁面回發(fā)請求，都將導(dǎo)致Server端重新生成一個Web頁面，并被發(fā)送到客戶端。此時客戶端會重新加載一個全新的Web頁面，瀏覽器的進(jìn)度條會顯示重新加載時的進(jìn)度，整個過程都由客戶端和服務(wù)器端直接通信來完成。AJAX技術(shù)則在客戶端和服務(wù)器端增加了一個客戶端代理層，當(dāng)客戶端需要與服務(wù)器端通信時，由客戶端代理層向服務(wù)器端異步地發(fā)出請求。服務(wù)器端收到請求，執(zhí)行一系列行為并傳回更新信息給客戶端代理，代理層將提取出服務(wù)器端返回的信息更新客戶端。整個過程由代理異步的在后臺完成，客戶端不需要進(jìn)行任何的刷新動作，因此通常有人稱AJAX頁面為無刷新Web頁面。二、基本知識與技能—什么是AJAX

AJAX(AsynchronousJavaScript二、基本知識與技能—AJAX技術(shù)簡介AJAX技術(shù)看似非常的復(fù)雜，其實AJAX并不是新技術(shù)，AJAX只是一些老技術(shù)的混合體，AJAX通過將這些技術(shù)進(jìn)行一定的修改、整合和發(fā)揚(yáng)，就形成了AJAX技術(shù)。這些老技術(shù)包括有：XHTML：基于XHTML1.0規(guī)范的XHTML技術(shù)。CSS：基于CSS2.0的CSS布局的CSS編程技術(shù)。DOM：HTMLDOM，XMLDOM等DOM技術(shù)。JavaScript：JavaScript編程技術(shù)。XML：XMLDOM、XSLT、XPath等XML編程技術(shù)。二、基本知識與技能—AJAX技術(shù)簡介AJAX技術(shù)看似非常的復(fù)二、基本知識與技能—AJAX技術(shù)簡介除了上面的一些老技術(shù)，AJAX還包含另一個技術(shù)，這個技術(shù)就是XMLHttpRequest。在AJAX中，最重要的就是XMLHttpRequest對象，XMLHttpRequest對象是JavaScript對象，正是XMLHttpRequest對象實現(xiàn)了AJAX可以在服務(wù)器和瀏覽器之間通過JavaScript創(chuàng)建一個中間層，從而實現(xiàn)了異步通信。AJAX頁面請求示意如圖所示。二、基本知識與技能—AJAX技術(shù)簡介除了上面的一些老技術(shù)，A二、基本知識與技能—AJAX技術(shù)簡介簡而言之，AJAX技術(shù)是通過使用XHTML、CSS、DOM等實現(xiàn)的，具體實現(xiàn)如下所示。使用XHTML+CSS進(jìn)行頁面表示。使用DOM進(jìn)行動態(tài)顯示和交互。使用XML和XSLT進(jìn)行數(shù)據(jù)交換。使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)查詢、檢索使用JavaScript進(jìn)行頁面綁定。二、基本知識與技能—AJAX技術(shù)簡介簡而言之，AJAX技術(shù)是二、基本知識與技能—AJAX技術(shù)和傳統(tǒng)Web程序比較二、基本知識與技能—AJAX技術(shù)和傳統(tǒng)Web程序比較二、基本知識與技能—ASP.NETAJAX技術(shù)ASP.NETAJAX是AJAX的Microsoft實現(xiàn)方式，專用于ASP.NET開發(fā)人員。使用ASP.NET中的AJAX功能，可以生成豐富的Web應(yīng)用程序。與傳統(tǒng)的Web應(yīng)用程序相比，基于ASP.NETAJAX的Web應(yīng)用程序具有以下優(yōu)點(diǎn)：局部頁刷新，即只刷新已發(fā)生更改的網(wǎng)頁部分。自動生成的代理類，可簡化從客戶端腳本調(diào)用Web服務(wù)方法的過程。支持大部分流行的瀏覽器。因為網(wǎng)頁的大部分處理工作是在瀏覽器中執(zhí)行的，所以大大提高了效率二、基本知識與技能—ASP.NETAJAX技術(shù)ASP.NE二、基本知識與技能—ASP.NETAJAX架構(gòu)微軟公司將AJAX技術(shù)組合到已有的ASP.NET基礎(chǔ)架構(gòu)中，形成了自己的AJAX技術(shù)開發(fā)框架。ASP.NETAJAX由客戶端腳本庫和服務(wù)器組件組成，它們一起提供了一個健壯的開發(fā)框架。二、基本知識與技能—ASP.NETAJAX架構(gòu)微軟公司將A二、基本知識與技能—AJAX在ASP.NET程序的應(yīng)用

雖然AJAX的原理聽上去非常的復(fù)雜，但是AJAX的使用卻是非常方便的。ASP.NET提供了AJAX控件以便開發(fā)人員快速的進(jìn)行AJAX應(yīng)用程序開發(fā)。在進(jìn)行AJAX頁面開發(fā)時，首先需要使用腳本管理控件（ScriptManger），示例代碼如下所示。

<asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>開發(fā)人員無需對ScriptManger控件進(jìn)行配置，只需保證ScriptManger控件在UpdatePanel控件之前即可。使用了ScriptManger控件之后，可以使用UpdatePanel用來確定需要進(jìn)行局部更新的控件。二、基本知識與技能—AJAX在ASP.NET程序的應(yīng)用雖然三、任務(wù)1的實施新建ASP.NET空WEB項目Task8-1,添加頁面AjaxTest.aspx，頁面布局代碼如下：<form

id="form1"

runat="server">

<asp:ScriptManager

ID="ScriptManager1"

runat="server">

</asp:ScriptManager>

<div

align="center">

全頁面的更新時間

<asp:Label

ID="Label1"

runat="server"

Text="Label"></asp:Label><br

/>

<asp:Button

ID="Button1"

runat="server"

Text="更新整個頁面（標(biāo)準(zhǔn)回發(fā)）

onclick="Button1_Click"

/>

</div>

<div

align="center"

style="background-color:#C0C0C0;margin-top:10px;">

<asp:UpdatePanel

ID="UpdatePanel1"

runat="server">

<ContentTemplate>

局部可更新區(qū)域的更新時間

<asp:Label

ID="Label2"

runat="server"

Text="Label"></asp:Label><br

/>

<asp:Button

ID="Button2"

runat="server"

Text="更新局部區(qū)域（異步回發(fā)）

onclick="Button2_Click"

/>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>三、任務(wù)1的實施新建ASP.NET空WEB項目Task8-1三、任務(wù)1的實施上述代碼使用了UpdatePanel控件將服務(wù)器控件進(jìn)行綁定，當(dāng)瀏覽者操作UpdatePanel控件中的控件實現(xiàn)某種特定的功能時，頁面只會針對UpdatePanel控件之間的控件進(jìn)行刷新操作，而不會進(jìn)行整個頁面的刷新。為控件進(jìn)行事件操作編寫代碼，示例代碼如下所示。public

partial

class

AjaxTest:System.Web.UI.Page{

protected

voidPage_Load(objectsender,EventArgse){Label1.Text=DateTime.Now.ToString();Label2.Text=DateTime.Now.ToString();}

protected

voidButton1_Click(objectsender,EventArgse){Label1.Text=DateTime.Now.ToString();}

protected

voidButton2_Click(objectsender,EventArgse){Label2.Text=DateTime.Now.ToString();}}三、任務(wù)1的實施上述代碼使用了UpdatePanel控件將服三、任務(wù)1的實施運(yùn)行結(jié)果如下：一個重要疑問：當(dāng)點(diǎn)擊放在UpdatePanel中的按鈕局部更新陰影部分區(qū)域時，在服務(wù)器端是不是僅執(zhí)行與陰影部分頁面區(qū)域更新的C#代碼？三、任務(wù)1的實施運(yùn)行結(jié)果如下：一個重要疑問：三、任務(wù)1的實施任務(wù)結(jié)果分析在異步更新模式下，服務(wù)器端的頁面類仍然經(jīng)歷與傳統(tǒng)回發(fā)一樣的生命周期。這就是說：不管是異步回發(fā)還是傳統(tǒng)回發(fā)，服務(wù)器端該執(zhí)行的代碼還是會執(zhí)行，但在發(fā)回給瀏覽器數(shù)據(jù)時有差別。如果是異步回發(fā)，服務(wù)器會根據(jù)異步回發(fā)送來的數(shù)據(jù)僅發(fā)送要更新的那部分頁面給瀏覽器，而傳統(tǒng)回發(fā)時，服務(wù)器則會發(fā)回整個頁面。當(dāng)異步回發(fā)代碼需要訪問UpDatePanel之外的控件時，注意它對這些控件所修改的值有可能會消失，因為服務(wù)器發(fā)給瀏覽器的僅是瀏覽器更新頁面局部所需要的那部分?jǐn)?shù)據(jù)而非整個頁面，因此這些控件的狀態(tài)可能不能被正確保存和恢復(fù)。三、任務(wù)1的實施任務(wù)結(jié)果分析四、小結(jié)了解了什么是AJAX技術(shù)了解了AJAX實現(xiàn)異步回調(diào)的原理了解了ASP.NETAJAX的框架掌握了在ASP.NET應(yīng)用程序?qū)崿F(xiàn)局部刷新的方法實現(xiàn)局部刷新必須要有ScriptManager控件要實現(xiàn)局部刷新的控件必須包含在UpdatePanel控件之內(nèi)通過學(xué)習(xí)本單元的內(nèi)容可以了解AJAX技術(shù)在ASP.NET應(yīng)用程序的作用，并能在ASP.NET應(yīng)用程序中使用AJAX技術(shù)實現(xiàn)局部刷新的功能。四、小結(jié)了解了什么是AJAX技術(shù)通過學(xué)習(xí)本單元的內(nèi)容可以了解五、作業(yè)使用AJAX技術(shù)完成一個局部刷新頁面的制作。五、作業(yè)使用AJAX技術(shù)完成一個局部刷新頁面的制作。ThankYou!ThankYou! 單元8：創(chuàng)建無刷新網(wǎng)頁任務(wù)1：創(chuàng)建AJAX程序WEB應(yīng)用開發(fā) 單元8：創(chuàng)建無刷新網(wǎng)頁任務(wù)1：創(chuàng)建AJAX程序WEB應(yīng)主要內(nèi)容AJAX介紹1ASP.NETAJAX技術(shù)2ASP.NETAJAX架構(gòu)3ASP.NETAJAX應(yīng)用程序4主要內(nèi)容AJAX介紹1ASP.NETAJAX技術(shù)2ASP學(xué)習(xí)目標(biāo)知識目標(biāo)了解什么是AJAX了解AJAX技術(shù)的構(gòu)成了解ASP.NETAJAX技術(shù)掌握AJAX技術(shù)如何在ASP.NET應(yīng)用程序中發(fā)揮作用能力目標(biāo)能夠創(chuàng)建AJAX程序?qū)W習(xí)目標(biāo)知識目標(biāo)技術(shù)應(yīng)用背景現(xiàn)今，在Web開發(fā)領(lǐng)域最流行的就屬AJAX，AJAX能夠提升用戶體驗，更加方便的與Web應(yīng)用程序進(jìn)行交互。在傳統(tǒng)的Web開發(fā)中，對頁面進(jìn)行操作往往需要進(jìn)行回發(fā)，從而導(dǎo)致頁面刷新，而使用AJAX就無需產(chǎn)生回發(fā)從而實現(xiàn)無刷新效果。AJAX英文全稱是AsynchronousJavaScriptandXML，中文稱為異步JavaScript和XML。事實上AJAX本身不能稱為一門技術(shù)、語言或者是軟件，它是多種技術(shù)組合，這些技術(shù)存在了很多年，現(xiàn)在借助于AJAX的出現(xiàn)，開始越來越受到開發(fā)人員的重視。技術(shù)應(yīng)用背景現(xiàn)今，在Web開發(fā)領(lǐng)域最流行的就屬AJAX，AJ一、任務(wù)1：一個ASP.NETAJAX程序任務(wù)描述本次任務(wù)通過創(chuàng)建一個ASP.NETAJAX程序讓大家直觀了解頁面局部刷新。當(dāng)點(diǎn)擊“標(biāo)準(zhǔn)回發(fā)”按鈕時，整個頁面會被PostBack,服務(wù)器傳回數(shù)據(jù)后，瀏覽器將刷新整個頁面。當(dāng)點(diǎn)擊“異步回發(fā)”按鈕時，僅陰影部分被刷新。單擊更新整個頁面單擊更新局部區(qū)域一、任務(wù)1：一個ASP.NETAJAX程序任務(wù)描述單擊更AJAX(AsynchronousJavaScript+XML)是一種在客戶端與服務(wù)器端異步通信的技術(shù)，通俗點(diǎn)來說就是無刷新的頁面請求技術(shù)。在ASP.NET中，每當(dāng)用戶請求頁面時，無論是第一次請求還是頁面回發(fā)請求，都將導(dǎo)致Server端重新生成一個Web頁面，并被發(fā)送到客戶端。此時客戶端會重新加載一個全新的Web頁面，瀏覽器的進(jìn)度條會顯示重新加載時的進(jìn)度，整個過程都由客戶端和服務(wù)器端直接通信來完成。AJAX技術(shù)則在客戶端和服務(wù)器端增加了一個客戶端代理層，當(dāng)客戶端需要與服務(wù)器端通信時，由客戶端代理層向服務(wù)器端異步地發(fā)出請求。服務(wù)器端收到請求，執(zhí)行一系列行為并傳回更新信息給客戶端代理，代理層將提取出服務(wù)器端返回的信息更新客戶端。整個過程由代理異步的在后臺完成，客戶端不需要進(jìn)行任何的刷新動作，因此通常有人稱AJAX頁面為無刷新Web頁面。二、基本知識與技能—什么是AJAX

AJAX(AsynchronousJavaScript二、基本知識與技能—AJAX技術(shù)簡介AJAX技術(shù)看似非常的復(fù)雜，其實AJAX并不是新技術(shù)，AJAX只是一些老技術(shù)的混合體，AJAX通過將這些技術(shù)進(jìn)行一定的修改、整合和發(fā)揚(yáng)，就形成了AJAX技術(shù)。這些老技術(shù)包括有：XHTML：基于XHTML1.0規(guī)范的XHTML技術(shù)。CSS：基于CSS2.0的CSS布局的CSS編程技術(shù)。DOM：HTMLDOM，XMLDOM等DOM技術(shù)。JavaScript：JavaScript編程技術(shù)。XML：XMLDOM、XSLT、XPath等XML編程技術(shù)。二、基本知識與技能—AJAX技術(shù)簡介AJAX技術(shù)看似非常的復(fù)二、基本知識與技能—AJAX技術(shù)簡介除了上面的一些老技術(shù)，AJAX還包含另一個技術(shù)，這個技術(shù)就是XMLHttpRequest。在AJAX中，最重要的就是XMLHttpRequest對象，XMLHttpRequest對象是JavaScript對象，正是XMLHttpRequest對象實現(xiàn)了AJAX可以在服務(wù)器和瀏覽器之間通過JavaScript創(chuàng)建一個中間層，從而實現(xiàn)了異步通信。AJAX頁面請求示意如圖所示。二、基本知識與技能—AJAX技術(shù)簡介除了上面的一些老技術(shù)，A二、基本知識與技能—AJAX技術(shù)簡介簡而言之，AJAX技術(shù)是通過使用XHTML、CSS、DOM等實現(xiàn)的，具體實現(xiàn)如下所示。使用XHTML+CSS進(jìn)行頁面表示。使用DOM進(jìn)行動態(tài)顯示和交互。使用XML和XSLT進(jìn)行數(shù)據(jù)交換。使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)查詢、檢索使用JavaScript進(jìn)行頁面綁定。二、基本知識與技能—AJAX技術(shù)簡介簡而言之，AJAX技術(shù)是二、基本知識與技能—AJAX技術(shù)和傳統(tǒng)Web程序比較二、基本知識與技能—AJAX技術(shù)和傳統(tǒng)Web程序比較二、基本知識與技能—ASP.NETAJAX技術(shù)ASP.NETAJAX是AJAX的Microsoft實現(xiàn)方式，專用于ASP.NET開發(fā)人員。使用ASP.NET中的AJAX功能，可以生成豐富的Web應(yīng)用程序。與傳統(tǒng)的Web應(yīng)用程序相比，基于ASP.NETAJAX的Web應(yīng)用程序具有以下優(yōu)點(diǎn)：局部頁刷新，即只刷新已發(fā)生更改的網(wǎng)頁部分。自動生成的代理類，可簡化從客戶端腳本調(diào)用Web服務(wù)方法的過程。支持大部分流行的瀏覽器。因為網(wǎng)頁的大部分處理工作是在瀏覽器中執(zhí)行的，所以大大提高了效率二、基本知識與技能—ASP.NETAJAX技術(shù)ASP.NE二、基本知識與技能—ASP.NETAJAX架構(gòu)微軟公司將AJAX技術(shù)組合到已有的ASP.NET基礎(chǔ)架構(gòu)中，形成了自己的AJAX技術(shù)開發(fā)框架。ASP.NETAJAX由客戶端腳本庫和服務(wù)器組件組成，它們一起提供了一個健壯的開發(fā)框架。二、基本知識與技能—ASP.NETAJAX架構(gòu)微軟公司將A二、基本知識與技能—AJAX在ASP.NET程序的應(yīng)用

雖然AJAX的原理聽上去非常的復(fù)雜，但是AJAX的使用卻是非常方便的。ASP.NET提供了AJAX控件以便開發(fā)人員快速的進(jìn)行AJAX應(yīng)用程序開發(fā)。在進(jìn)行AJAX頁面開發(fā)時，首先需要使用腳本管理控件（ScriptManger），示例代碼如下所示。

<asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>開發(fā)人員無需對ScriptManger控件進(jìn)行配置，只需保證ScriptManger控件在UpdatePanel控件之前即可。使用了ScriptManger控件之后，可以使用UpdatePanel用來確定需要進(jìn)行局部更新的控件。二、基本知識與技能—AJAX在ASP.NET程序的應(yīng)用雖然三、任務(wù)1的實施新建ASP.NET空WEB項目Task8-1,添加頁面AjaxTest.aspx，頁面布局代碼如下：<form

id="form1"

runat="server">

<asp:ScriptManager

ID="ScriptManager1"

runat="server">

</asp:ScriptManager>

<div

align="center">

全頁面的更新時間

<asp:Label

ID="Label1"

runat="server"

Text="Label"></asp:Label><br

/>

<asp:Button

ID="Button1"

runat="server"

Text="更新整個頁面（標(biāo)準(zhǔn)回發(fā)）

onclick="Button1_Click"

/>

</div>

<div

align="center"

style="background-color:#C0C0C0;margin-top:10px;">

<asp:UpdatePanel

ID="UpdatePanel1"

runat="server">

<ContentTemplate>

局部可更新區(qū)域的更新時間

<asp:Label

ID="Label2"

runat="server"

Text="Label"></asp:Label><br

/>

<asp:Button

ID="Button2"

runat="server"

Text="更新局部區(qū)域（異步回發(fā)）

onclick="Button2_Click"

/>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>三、任務(wù)1的實施新建ASP.NET空WEB項目Task8-1三、任務(wù)1的實施上述代碼使用了UpdatePanel控件將服務(wù)器控件進(jìn)行綁定，當(dāng)瀏覽者操作UpdatePanel控件中的控件實現(xiàn)某種特定的功能時，頁面只會針對UpdatePanel控件之間的控件進(jìn)行刷新操作，而不會進(jìn)行整個頁面的刷新。為控件進(jìn)行事件操作編寫代碼，示例代碼如下所示。public

partial

class

AjaxTest:System.Web.UI.Page{

protected

voidPage_Load(objectsender,EventArgse){Label1.Text=DateTime.Now.ToString();Label2.Text=DateT