第10講：整合AJAX應用

2010.9.10 蘇鵬

內容介紹

-Ajax類庫介紹

-ASP.Net MVC2使用Ajax類庫執行個體

 

預備知識

-安裝Visual Studio 2010 Express

-瞭解ASP.Net

-瞭解Ajax基礎知識

-瞭解設計模式基本概念

 

在ASP.Net MVC中使用

-Microsoft ASP.Net Ajax

-jQuery

 

Ajax的使用範圍

-適合Ajax的情境

例如有個大型門戶網站，它有個查詢天氣的模組，一點天氣預報就查出來了。一點這個天氣按鈕，如果重新渲染整個頁面，那無疑是會無意義的耗費很多資源。我們離線的情況應該是，伺服器拿到請求後，返回幾個數，最高氣溫、最低氣溫、一個枚舉的天氣狀況等。像這種情況用Ajax再合適不過了。

它有幾個優勢：

1.減少資料轉送，提高使用者響應程度

2.減少資料轉送，伺服器端負載減輕

3.操作完全非同步。當您發送請求的時候，請求是拿JavaScript在後端發送的。使用者瀏覽頁面依然不受影響

 

-不適合Ajax的情境

它有幾個缺點：

1.由於Ajax是非同步請求，它會儲存當前Http情境和狀態。據調查，瀏覽器上最常用的按鈕是“回退”按鈕。如果是看完北京天氣，想再看南京天氣，您不能退回一開始的選擇狀態，只能重新選擇城市。原因就在於它沒有狀態儲存回退按鈕

2.如果使用者沒有JavaScript指令碼支援（例如JavaScript指令碼被禁用），Ajax就用不了。但在MVC架構中，使用者即使禁用了JavaScript指令碼，也有辦法能解決這個問題，使得效果和沒禁用一樣，但它走的不是非同步請求，但從使用者角度能平滑地過渡

3.Ajax被濫用。Ajax用太多導致伺服器端負載太大

 

Ajax使用執行個體

-每個Ajax請求都會指定確定的Action

-Action會判定是否來自Ajax

-針對Ajax請求必須返回一個特殊的View

 

指令碼啟用問題

用AjaxForm代替普通的Form，它的請求就變成了Ajax請求。當然，還要載入兩個JavaScript類庫，之所以把兩個載入寫在最下面，是有講究的。寫在最前面將會在頁面載入最開始載入兩個類庫，而寫在最低端將會在最後載入類庫。JavaScript加類庫的載入是阻塞模式，當我載入一個JavaScript檔案的時候，我的請求就定住了，必須等它載入完了才能載入第二個。這種小技巧做法能保證網頁的效能會好一點。

Action代碼

Routing會根據Action名稱，為Ajax方法找到它所對應的Action。

Html產生代碼

一旦JavaScript被禁用，這些事情都不能做了。

如果是非同步方法無法實現，那就是用同步。

問題原因在於伺服器端對於是否是Ajax請求都返回一樣的結果（都返回了字串），假如我們針對Ajax請求和非Ajax請求返回不同的結果，問題就迎刃而解了。比如，使用者請求是Ajax請求的話，就返回局部變數；否則，返回整個View。所以無論是哪種情況，無非是等待重新整理局部頁面或是重新整理整個頁面的區別，看起來沒有任何的差別了。

Ajax請求的特質無非就是它調用了XMLHttpRequest對象，來代替普通的Http請求。所以在HttpHandle裡面的頭部會有一個資訊

這是對普通Request的一個擴充。普通Request沒有這些資訊。在上面圖中有兩處都寫了XMLHttpRequest標記，這是因為有些時候防火牆會把x-requestes的標記去掉。所以為了穩妥，直接在請求的每個字串最後都加上這個標記。

修改代碼：

以上方法已經基本解決問題，但是方法並非完美。因為我們的方法裡寫了X-Requested-With關鍵字（Magic Word），我們應該把Ajax請求的判定用一個函數封裝。

這裡IsAjaxRequest已經是MVC架構所提供的，所以我們可以踏踏實實使用這個函數來判定，不用自己寫。

 

使用PartialView返回

PartialView只帶有Html的一點標籤，這裡使用它，是為了專門把結果以Table的形式放到使用者端。

當是Ajax請求的時候我們用PartialView返回，當不是Ajax請求的時候我們用View返回。

 

介紹Microsoft ASP.Net Ajax

ASP.Net Ajax架構並不是一個龐大的架構，它完整的尺寸只有98k。

ASP.Net Ajax架設計理念：.NET for JavaScript

jQuery的目標是把文法簡化，ASP.Net Ajax的目標完全不一樣，它是使勁往.NET Framework上貼。它的實現想讓你看起來感覺和.NET Framework是一回事。

 

使用JQuery更新

 

AutoComplete TextBox

-使用ASP.Net Ajax類庫實現

標籤System.Web.Script.Services.ScriptService是說明這個WebService可以被指令碼調用，也就是JavaScript可以調用它。

前端調用：

$create方法的參數中的$get(‘query’)表示對應的實現自動匹配的文字框是哪一個。

在WebForm中沒有見載入那麼多JavaScript檔案，是因為它有一個ScriptManager，這個ScriptManager完成了所有相應指令碼的調用。你可以自己寫一個JavaScript把所有的檔案調用都放到裡面，然後只需要調用那一個JavaScript就可以了，這樣寫著要方便一點。

 

通過下拉框篩選資料

-使用JQuery實現

先定義Action

View

 

其中load方法是個Ajax請求。

 

使用模態視窗

 

評級控制項

原理是修改RadioButton的樣式。

給評級控制項添加Ajax特性

 

總結

-Ajax類庫介紹

-ASP.Net MVC2使用Ajax類庫執行個體

2010.10.3