Web2.0及Ajax技術在高職ASP.NET教學中的應用研究*

陳薇

（浙江育英職業技術學院 浙江 杭州 310018）

Web2.0及Ajax技術在高職ASP.NET教學中的應用研究*

陳薇

（浙江育英職業技術學院 浙江 杭州 310018）

目前，國內外網絡及信息服務已全面進入Web2.0時代。掌握Web2.0及其關鍵技術能使高職畢業生在就業競爭中占得優勢。Ajax技術用于動態網站開發，能減輕服務器壓力，提高系統響應速度，減少用戶等待時間。本文探討了Ajax技術的概念、優勢，提出了在ASP.NET課程教學的具體案例中Ajax技術的實現方法。

Web2.0；Ajax；高職；ASP.NET；網頁開發；計算機教學

隨著互聯網的快速發展，掌握一項動態網站開發技術對于高職計算機專業學生來說是非常重要的。ASP.NET是高職計算機專業的一門必修專業主干課程，最近幾年其地位和作用更加凸顯。對用人企業調研發現，企業對熟知目前主流技術、充分了解創新產品開發理念的網站開發類人才的需求非常強烈。反觀我們目前的ASP.NET教學內容，對開發基礎知識和相關平臺知識的教育做得比較充分，但是在網絡服務的創新觀念和新近技術的教育方面仍少有跟進。隨著Web2.0概念的提出和興起，網絡正從Web1.0步入Web2.0時代。Ajax是Web2.0標準的核心技術，它在Web網頁中的應用正得到逐步加強。因此，在ASP.NET課程中加強對Ajax的研究和應用將是重要而有意義的。

Web2.0和Ajax技術介紹

（一）Web2.0介紹

Web2.0這一術語，是2004年3月美國O'Reilly公司的戴爾·多爾蒂（Dale Dougherty）和MediaLive公司的克瑞格·克萊（Craig Cline）共同提出的。

Web2.0是新一代互聯網應用的統稱，是互聯網的一次理念和思想體系的升級換代，其最突出的特點就是強調使普通用戶真正融入互聯網中，從單純的“讀”向“寫”、向“共同建設”發展。用戶既是網站內容的瀏覽者也是創造者，表現為一種雙通道的交流模式。Web2.0的出現，使網絡用戶不再被動地接受信息，可以提交Blog表達自己的思想，訂閱RSS分享傳播知識和信息，使用Wiki共同構建信息。Web2.0代表了個性化、共享性、開放性的現代交流方式，更注重用戶的交互，極大地釋放了個人創作和貢獻的潛能，使得互聯網的創造力上升到了新的數量級。

（二）Ajax的相關概念和工作過程

隨著Internet的興起，B/S結構以不需要安裝客戶端軟件、維護簡單等優勢成為目前最常用的軟件系統體系結構。在這種模式下，應用程序基本運行在Web服務器上，用戶通過Web瀏覽器訪問應用程序。但這種結構也存在一定的缺陷，就是客戶端和服務器因為需要進行大量數據傳輸，用戶在操作過程中，需要等待服務器響應，等待屏幕刷新，等待請求返回和生成新的頁面。這些數據有大量是重復的，不僅增加了服務器的負擔，也降低了用戶的良好體驗，并且限制了客戶端有豐富的用戶界面元素。Ajax（Asynchronous JavaScript&XML）技術的提出很好地解決了這一問題。在動態網站開發中，應用Ajax技術可以實現網頁的局部刷新，滿足用戶按需取數據的需求。

確切地說，Ajax并不是一門新的語言或技術，實際上是幾項技術的組合，其中包括使用XHTML和CSS標準化呈現，使用DOM實現動態顯示和交互，使用 XML和 XSLT進行數據交換與處理，使用XMLHttpRequest進行異步數據讀取， 最后用JavaScript綁定和處理所有數據。Ajax最核心的部分就是XMLHttpRequest對象的使用。Ajax利用一種中間媒介（Ajax引擎）消除了用戶和服務器交互間的等待。

Ajax在高職ASP.NET教學中的應用

ASP.NET程序設計課程是我院計算機專業的專業主干課程，是省級精品課程。從近幾年學生的畢業設計作品來看，有60%以上的學生選擇用ASP.NET做網站開發。可見，ASP.NET技術已成為畢業生最看重的一門技術。

隨著Ajax的提出和越來越多的網絡應用，比如Google Suggest、Gmail等，大家越來越多地感受到了Ajax帶來的用戶良好感受和系統性能提高。目前，Ajax框架已有不少，其中微軟推出的ASP.NET Ajax框架已比較成熟，使用Ajax框架進行Web開發，效率高，代碼穩定性好。所以，在ASP.NET程序設計課程中，我們使用了ASP.NET Ajax框架進行具體案例的開發教學。

（一）準備工作

ASP.NET Ajax只支持.NET2.0以上平臺。.NET3.5（VS.NET 2008及以上）中已集成，不需要安裝，.NET2.0則需要安裝擴展包。如果選用 VS.NET 2005即. NET2.0，則需要到ASP.NET網站下載ASPAJAXExtSetup.msi進行安裝。安裝好之后，在新建網站時就會出現ASP.NET AJAX-Enabled WebSite模板，如圖1所示。

圖1 ASP.NET AJAX-Enabled WebSite模板示意圖

（二）通過小案例理解Ajax的工作流程

在教學時，為使學生能對Ajax的原理和工作流程有比較直觀的認識，首先可選取一個簡單的小案例來實現。在案例中，用戶在瀏覽器點擊按鈕，實現不刷屏輸出文字“Welcome to ASP.NET Ajax!”。實現過程如下：（1）新建網站。選擇 ASP.NET AJAX-Enabled WebSite模板。使用這個模板創建網站，VS將自動在Web.config中配置好這個框架需要的配置項，而且會在頁面中自動加入一個ScriptManager控件，這個控件是ASP.NET Ajax應用必不可少的。（2）創建后臺程序。Welcome.cs，定義類Welcome和相應的方法。（3）創建WebService。在網站工程下新建WebService文件WelcomeService，這時VS會自動建立對應的代碼文件，WelcomeService.cs。（4）編寫JavaScript。編寫單擊時調用的JS函數和回調函數。（5）編寫主頁。主頁中多了一個ScriptManager控件，控件中需要定義引入的外部JS腳本文件和WebService文件。

通過小案例，使學生更好地理解Ajax應用程序與服務器交互的流程：首先，某個用戶操作（輸入URL地址或點擊鏈接）引發了瀏覽器一次HTTP請求，然后服務器處理這個請求，生成合適的HTML、CSS以及JavaScript，并發送至客戶端。客戶端瀏覽器將這一段HTML顯示出來。隨后，用戶在該Ajax頁面上的后續操作將與傳統Web頁面完全不同：用戶的這些操作將不會引發瀏覽器的另一次HTTP請求，取而代之的是將引發客戶端的某段JavaScript代碼加以執行，如圖2所示。

圖2 Ajax應用程序的一次與服務器交互流程示意圖

（三）在完整的案例教學中使用Ajax技術

ASP.NET課程主要采用項目教學，在 “網上書店”這個案例項目的開發中，在注冊表單驗證、購物車、產品評級、提前加載分頁等地方使用了Ajax技術。（1）注冊表單驗證。在新用戶注冊時，需要驗證用戶名是否已存在，或者E-mail是否已被人使用，兩次輸入的密碼是否一致等。使用Ajax技術，很多原來必須提交到服務器才能驗證的內容，可以在不刷新頁面的情況下直接驗證。（2）購物車。購物車在購物網站中是必不可少的，傳統的購物車在用戶增加新產品時往往要彈出或者轉到新的頁面，使用Ajax技術后，可以不必切換頁面就能完成產品增加或者刪除的過程，使用戶獲得流暢完整的購物體驗。（3）產品評級。購物網站往往會讓用戶對產品進行評級打分，使用Ajax技術對評級過程進行完善，使得用戶能在不打斷當前瀏覽的情況下參與評級，用戶不會覺得很麻煩，可有效提高用戶的參與熱情。（4）提前加載分頁。某頁的內容太多時，需要分頁來顯示，基于Ajax技術，可以使用戶閱讀當前頁面時，提前加載下一頁數據，這樣當用戶翻頁時，能以最快的速度打開下一頁的內容。

ASP.NET Ajax技術是一種實現異步網絡應用的技術。通過ASP.NET Ajax技術，開發人員或者程序員可以將Web服務器控件與客戶端腳本結合起來，并在此基礎上實現Web頁面的局部更新功能。隨著Ajax技術越來越多的應用，在基于ASP.NET的Web網頁開發教學中，引入Ajax技術是必然的趨勢。當然，在使用ASP.NET Ajax框架的開發中，還有一些問題需要進一步解決，比如安全性，比如數據更新前后的標志、后退操作等，還有待進一步的探討和研究。

[1]凌茜，馬武林.基于Web2.0平臺的大學英語混合式學習探究[J].電化教育研究，2009（6）.

[2]莊秀麗.Web2.0教育應用[J].信息技術教育，2006（4）：24-26.

[3]GarrettJ.AJAX：A New Approach to Web Applications[EB/OL].（2005-02-18）.http：//www.adaptivepath.com/publications/essays/archives/000385.php.

[4]陳黎夫.ASP.NET AJAX程序設計——第II卷：客戶端[M].北京：人民郵電出版社，2007.

[5]陳冠軍.完全手冊ASP.NET AJAX實用開發詳解[M].北京：電子工業出版社，2008.

G712

A

1672-5727（2013）12-0174-03

陳薇（1978—），女，浙江麗水人，碩士，浙江育英職業技術學院講師，研究方向為計算機應用。

（本欄責任編輯：謝良才）

浙江省教育技術研究規劃課題《Web2.0技術在高職ASP.NET教學中的應用研究》（課題編號：JB064）