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

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

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

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

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

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

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

7、2）為控件進行事件操作編寫代碼，示例代碼如下所示。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)絡技術專業(yè)教學資源庫4.任務結(jié)果分析在異步更新模式下，服務器端的頁面類仍然經(jīng)歷與傳統(tǒng)回發(fā)一樣的生命周期。這就是說：不管是異步回發(fā)還是傳統(tǒng)回發(fā)，服務器端該執(zhí)行的代碼還是會執(zhí)行，但在發(fā)回給瀏覽器數(shù)據(jù)時有差別。如果是異步回發(fā)，服務器會根據(jù)異步回發(fā)送來的數(shù)據(jù)僅發(fā)送要更新的那部分頁面給瀏覽器，而傳統(tǒng)回發(fā)時，服務器則會發(fā)回整個頁面。當異步回發(fā)代碼需要訪問 UpDatePanel 之外的控件時，注意它對這些控件所修改的值有可能會消失，因為服務器發(fā)給瀏覽器的僅是瀏覽器更新頁面局部所需要的那部分數(shù)據(jù)而非整個頁面，因此這些控件的狀態(tài)可能不能被正確保存和恢復。5.小結(jié)（1）了解了什么是 AJAX 技術（2）了解了 AJAX 實現(xiàn)異步回調(diào)的原理（3）了解了 ASP .NET A