Ajax之一 簡介篇
視頻:https://edu.csdn.net/course/detail/27107

[學習目標]
使用Asp.NetAJAX核心組件實現無刷新和局部更新效果
掌握AutoComplete控件的使用,并利用其實現自動完成功能
【本章簡介】
AJAX基于那些已經廣泛使用的瀏覽器技術,包括異步JavaScript和XML。Ajax這個概念出現后不久就開始風靡起來,因為它使Web應用程序的功能和用戶界面(UI)變得更加接近于桌面應用程序。
Ajax的主要思想是使Web頁可以在后臺(或者說是異步的)發送HTTP請求,而不需要重新讀取整個頁面(用Asp.Net的話來說,就是不需要往返行程或回發)。Ajax允許使用JavaScript、Dom(文檔對象模型)、Css(層疊樣式表)等。
1.1 Ajax概述
1.1.1 Ajax典型應用
在推進Ajax技術發展的過程中,Google公司起到了非常大的作用,它的很多網上應用都大量地采用了Ajax技術,例如:Google Suggest、Google Maps等。下面我看兩個具體的例子。
1.Google Suggest(搜索建議)
有了搜索建議后,我們只需要輸入關鍵字的前幾個字或拼音,就可以把相關的熱門關鍵字都顯示出來。剩下的關鍵字部分就可以通過選擇來完成。例如,輸入“Ajax”四個字母,搜索建議會立即給出“ajax技術、ajax基礎教程”等選擇項。這種無刷新的方式,和我們傳統的瀏覽、輸入、提交、刷新的方式是完全不同的。
2.Google Maps(地圖)
同樣地,Google地圖也提供了非常方便的地圖縮放、拖曳等功能,如圖1-2所示,它的無刷新數據更新方式大大改善了用戶體驗。要提醒大家注意的是,我們每次拖曳或者縮放操作帶來的數據更新,都是從遠程服務器上獲取的。這種效果,對于傳統的Web應用來說是不可思議的。
1.1.2 Ajax相關基礎知識
要想通過客戶端編程以創建Ajax頁面,需要先了解JavaScript、Dom以及XMLHttpRequest對象(它處理那些從客戶端發送到服務器的請求)的相關知識。本書使用的是Asp.Net AJAX框架,可以適當的簡化在.Net環境下ajax的編程。Asp.Net AJAX的目的就是盡量避免編寫冗余的的代碼以及將客戶端開發人員的經驗與Asp.Net2.0(3.5)開發人員的經驗結合起來;另外將OOP的可以提高效率的優點帶到JavaScript中。
雖然Asp.NetAJAX為需要創建Ajax應用程序的客戶端腳本的開發人員提供了一大堆的好處,但它卻不只是編寫JavaScript以對服務器端發出異步調用那么簡單。由于Asp.Net AJAX是由Asp.Net開發團隊創建的,因此它的突出特點就是與Asp.Net 2.0集成。
就像Asp.Net本身那樣,你不需要掌握Ajax技術就可以得到一些Ajax的功能,因為設計Asp.Net Ajax就是為了幫助你完成這些工作。就像Asp.Net可以幫你管理HTTP的功能那樣,Asp.Net AJAX也可以管理Ajax的功能,比如回發、狀態管理以及使Asp.Net正常運轉所需要的那些客戶端腳本等。
1.1.3 Asp.NetAJAX 的包
Asp.Net AJAX的主頁(http://ajax.asp.net)上提供了很多不同的包,它們所關注的焦點各有不同。
n????????Asp.Net AJAX擴展(Asp.Net AJAX Extensions)
也稱為“Asp.Net AJAX Core”,這是Asp.Net AJAX的所有包中最重要的一個。它完全由微軟維護,包含了Asp.Net AJAX的基礎結構。
n????????Asp.Net AJAX控件集(Asp.Net AJAX Control Toolkit)
這個包中包含了大量的服務器組件,它們可以讓你不費吹灰之力就得到令人吃驚的Ajax功能。為了保證質量,微軟控制著整個項目,不過這個控件集卻是開源的。
n????????Asp.Net AJAXFutures
在這個包中,我們可以窺視到一些可能在將會(也可能不會^.^)成為Asp.Net和Asp.NetAJAX一部分的功能。
n????????微軟Ajax庫
這個一個純JavaScript的庫。
微軟提供了Asp.Net AJAX的全部源碼,可以在http://ajax.asp.net/下載。
1.2 安裝Asp.Net AJAX及控件包
一.Asp.NetAJAX安裝過之后會集成到IDE中,VS2008可以直接使用。在Asp.Net AJAX的主頁上(http://ajax.asp.net),你可以找到Microsoft Asp.Net 2.0 AJAX Extensions1.0的安裝程序,它是一個名為ASPAJAXExtSetup.msi的安裝包,點擊下載安裝。
二.安裝完畢后,Visual Studio中就會顯示一個新的用于創建Asp.Net AJAX網站的選項。這是開始學習Asp.Net AJAX技術的最好途徑,因為它將所有需要的文件都放到了適當的目錄中了。如圖1-3所示:
1.3 Asp.Net AJAX的組成原理
Ajax實際上是JavaScript、CSS、DOM、XmlHttpRequest四種技術的集合體,其中,XmlHttpRequest是Ajax技術的核心對象,可以說,正是通過它實現了以異步方式獲取服務器數據;DOM是文檔對象模型,通過Dom,我們可以方便地定位一個Html/Xml文檔任意部分并執行相關操作。
Ajax的基本原理為:XmlHttpRequst從服務器(數據服務器或Web服務器)獲取數據到客戶端的內存中,然后JavaScript根據實際需要對這些資源進行處理,并通過CSS和DOM實現界面布局呈現給瀏覽器,如下圖所示:
1.4 Asp.Net AJAX頁面的生命周期
圖1-7說明了ASP.Net AJAX的基本結構。使用AJAX的網頁可以持續地跟服務器交換數據,而標準的網頁則需要由兩個步驟(一個是請求,另一個是響應)來完成這個工作。Asp.Net AJAX對通信的雙方都有幫助。客戶端腳本庫(比如由ScriptManager控件動態讀入的那一些,你很快就會看到相關的內容了)不僅能夠幫助瀏覽器與Web服務器之間進行通信,而且還能使客戶端編程更加簡單。Asp.Net AJAX服務器端程序集不僅接收和處理XMLHttpRequest調用,而且還實現了一些方便使用的服務器端控件。因此,程序員不必花大力氣就可以讓客戶端與服務器端交換數據了。
在第一次請求某個使用了Asp.Net AJAX的頁面時(圖1-7的一步和第二步),Asp.Net AJAX客戶端框架(圖1-7客戶端組件中最下面的那一層)就會從服務器發送到瀏覽器上。此后從該AJAX應用程序的同一個頁面向服務器發送的請求就可以做成能夠返回文本或Xml的Http請求了(圖1-7中的第三步和第四步)。Asp.Net頁面可以使用整頁回發或異步請求這兩種方式來完成不同的任務。
項目一:建立沒有AJAX的簡單的Asp.Net頁面
首先建立一個沒有使用AJAX功能的簡單頁面,該頁面只需要一個標簽控件和一個服務器端按鈕控件。頁面圖1-8所示:
點擊按鈕頁面上的按鈕后會顯示當前計算機日期和時間
按鈕的代碼如下:
this.Label1.Text=DateTime.Now.ToString();
在單擊按鈕之前,頁面的代碼如程序清單1-1所示。
程序清單1-1 沒有使用AJAX頁面的輸出
先不使用Ajax~ ~