01情境八任務(wù)1：創(chuàng)建AJAX程序

1、 網(wǎng)絡(luò)技術(shù)專(zhuān)業(yè)教學(xué)資源庫(kù)WEB 應(yīng)用開(kāi)發(fā)課程教案學(xué)習(xí)情境授課班級(jí)創(chuàng)建無(wú)刷新網(wǎng)頁(yè)學(xué)習(xí)任務(wù)上課時(shí)間能力目標(biāo)教 學(xué)了解什么是 AJAX了解 AJAX 技術(shù)的構(gòu)成了解 ASP .NET AJAX 技術(shù)教學(xué)內(nèi)容和教學(xué)組織教 學(xué)教學(xué)內(nèi)容（工作任務(wù)）步 驟教學(xué)方法學(xué)生行 考核動(dòng)方式回 顧使用 LINQ 編輯數(shù)據(jù)點(diǎn) 評(píng)提問(wèn)法通過(guò)創(chuàng)建一個(gè) ASP .NET AJAX 程序讓大家直觀1. 新建 ASP .NET 空 WEB 項(xiàng)目 Task8-1,添加頁(yè) 任 務(wù) 驅(qū)歸 納 4. 掌握了在 ASP .NET 應(yīng)用程序?qū)崿F(xiàn)局部刷新完成作業(yè)作業(yè)使用 AJAX 技術(shù)完成一個(gè)局部刷新頁(yè)面的制作。提交作業(yè)1 網(wǎng)絡(luò)技術(shù)專(zhuān)業(yè)教學(xué)資

2、源庫(kù)主要教學(xué)內(nèi)容1.任務(wù)1任務(wù)描述：一個(gè) ASP .NET AJAX 程序通過(guò)創(chuàng)建一個(gè) ASP .NET AJAX 程序讓大家直觀了解頁(yè)面局部刷新。當(dāng)點(diǎn)擊標(biāo)準(zhǔn)回發(fā)按鈕時(shí)，整個(gè)頁(yè)面會(huì)被 PostBack,服務(wù)器傳回?cái)?shù)據(jù)后，瀏覽器將刷新整個(gè)頁(yè)面。當(dāng)點(diǎn)擊異步回發(fā)按鈕時(shí)，僅陰影部分被刷新。2.基本知識(shí)與技能2.1 什么是 AJAXAJAX (Asynchronous JavaScript + XML) 是一種在客戶(hù)端與服務(wù)器端異步通信的技術(shù)，通俗點(diǎn)來(lái)說(shuō)就是無(wú)刷新的頁(yè)面請(qǐng)求技術(shù)。在 ASP .NET 中，每當(dāng)用戶(hù)請(qǐng)求頁(yè)面時(shí)，無(wú)論是第一次請(qǐng)求還是頁(yè)面回發(fā)請(qǐng)求，都將導(dǎo)致 Server 端重新生成一個(gè) Web

3、 頁(yè)面，并被發(fā)送到客戶(hù)端。此時(shí)客戶(hù)端會(huì)重新加載一個(gè)全新的 Web 頁(yè)面，瀏覽器的進(jìn)度條會(huì)顯示重新加載時(shí)的進(jìn)度，整個(gè)過(guò)程都由客戶(hù)端和服務(wù)器端直接通信來(lái)完成。AJAX 技術(shù)則在客戶(hù)端和服務(wù)器端增加了一個(gè)客戶(hù)端代理層，當(dāng)客戶(hù)端需要與服務(wù)器端通信時(shí)，由客戶(hù)端代理層向服務(wù)器端異步地發(fā)出請(qǐng)求。服務(wù)器端收到請(qǐng)求，執(zhí)行一系列行為并傳回更新信息給客戶(hù)端代理，代理層將提取出服務(wù)器端返回的信息更新客戶(hù)端。整個(gè)過(guò)程由代理異步的在后臺(tái)完成，客戶(hù)端不需要進(jìn)行任何的刷新動(dòng)作，因此通常有人稱(chēng) AJAX 頁(yè)面為無(wú)刷新 Web 頁(yè)面。2.2 AJAX 技術(shù)簡(jiǎn)介AJAX 技術(shù)看似非常的復(fù)雜，其實(shí) AJAX 并不是新技術(shù)，AJAX

4、只是一些老技術(shù)的混合體，AJAX 通過(guò)將這些技術(shù)進(jìn)行一定的修改、整合和發(fā)揚(yáng)，就形成了 AJAX 技術(shù)。這些老技術(shù)包括有：2 網(wǎng)絡(luò)技術(shù)專(zhuān)業(yè)教學(xué)資源庫(kù)XHTML ：基于 XHTML1.0 規(guī)范的 XHTML 技術(shù)。CSS ：基于 CSS2.0 的 CSS 布局的 CSS 編程技術(shù)。DOM ： HTML DOM ，XML DOM 等 DOM 技術(shù)。JavaScript：JavaScript編程技術(shù)。XML ：XML DOM 、XSLT 、XPath 等 XML 編程技術(shù)。除了上面的一些老技術(shù)，AJAX 還包含另一個(gè)技術(shù)，這個(gè)技術(shù)就是 XMLHttpRequest 。在AJAX 中，最重要的就是XML

5、HttpRequest 對(duì)象，XMLHttpRequest 對(duì)象是 JavaScript對(duì)象，正是 XMLHttpRequest 對(duì)象實(shí)現(xiàn)了 AJAX 可以在服務(wù)器和瀏覽器之間通過(guò) JavaScript創(chuàng)建一個(gè)中間層，從而實(shí)現(xiàn)了異步通信。2.3 ASP.NET AJAX 技術(shù)ASP .NET AJAX 是 AJAX 的 Microsoft實(shí)現(xiàn)方式，專(zhuān)用于 ASP .NET 開(kāi)發(fā)人員。使用ASP .NET 中的 AJAX 功能，可以生成豐富的 Web 應(yīng)用程序。與傳統(tǒng)的 Web 應(yīng)用程序相比，基于 ASP .NET AJAX 的 Web 應(yīng)用程序具有以下優(yōu)點(diǎn)：局部頁(yè)刷新，即只刷新已發(fā)生更改的網(wǎng)頁(yè)

6、部分。自動(dòng)生成的代理類(lèi)，可簡(jiǎn)化從客戶(hù)端腳本調(diào)用 Web 服務(wù)方法的過(guò)程。支持大部分流行的瀏覽器。因?yàn)榫W(wǎng)頁(yè)的大部分處理工作是在瀏覽器中執(zhí)行的，所以大大提高了效率2.4 ASP.NET AJAX 架構(gòu)微軟公司將 AJAX 技術(shù)組合到已有的 ASP .NET 基礎(chǔ)架構(gòu)中，形成了自己的 AJAX 技術(shù)開(kāi)發(fā)框架。 ASP .NET AJAX 由客戶(hù)端腳本庫(kù)和服務(wù)器組件組成，它們一起提供了一個(gè)健壯的開(kāi)發(fā)框架。3.任務(wù)1 的實(shí)施3 網(wǎng)絡(luò)技術(shù)專(zhuān)業(yè)教學(xué)資源庫(kù)（1）新建 ASP .NET 空 WEB 項(xiàng)目 Task8-1,添加頁(yè)面 AjaxTest.aspx，設(shè)置頁(yè)面布局全頁(yè)面的更新時(shí)間局部可更新區(qū)域的更新時(shí)間（

7、2）為控件進(jìn)行事件操作編寫(xiě)代碼，示例代碼如下所示。public partial class AjaxTest : System.Web.UI.Pageprotected void Page_Load(object sender, EventArgs e)Label1.Text = DateTime.Now.ToString();Label2.Text = DateTime.Now.ToString();protected void Button1_Click(object sender, EventArgs e)Label1.Text = DateTime.Now.ToString();pro

8、tected void Button2_Click(object sender, EventArgs e)Label2.Text = DateTime.Now.ToString();4 網(wǎng)絡(luò)技術(shù)專(zhuān)業(yè)教學(xué)資源庫(kù)4.任務(wù)結(jié)果分析在異步更新模式下，服務(wù)器端的頁(yè)面類(lèi)仍然經(jīng)歷與傳統(tǒng)回發(fā)一樣的生命周期。這就是說(shuō)：不管是異步回發(fā)還是傳統(tǒng)回發(fā)，服務(wù)器端該執(zhí)行的代碼還是會(huì)執(zhí)行，但在發(fā)回給瀏覽器數(shù)據(jù)時(shí)有差別。如果是異步回發(fā)，服務(wù)器會(huì)根據(jù)異步回發(fā)送來(lái)的數(shù)據(jù)僅發(fā)送要更新的那部分頁(yè)面給瀏覽器，而傳統(tǒng)回發(fā)時(shí)，服務(wù)器則會(huì)發(fā)回整個(gè)頁(yè)面。當(dāng)異步回發(fā)代碼需要訪問(wèn) UpDatePanel 之外的控件時(shí)，注意它對(duì)這些控件所修改的值有可能會(huì)消失，因?yàn)榉?wù)器發(fā)給瀏覽器的僅是瀏覽器更新頁(yè)面局部所需要的那部分?jǐn)?shù)據(jù)而非整個(gè)頁(yè)面，因此這些控件的狀態(tài)可能不能被正確保存和恢復(fù)。5.小結(jié)（1）了解了什么是 AJAX 技術(shù)（2）了解了 AJAX 實(shí)現(xiàn)異步回調(diào)的原理（3）了解了 ASP .NET A