Windows Azure云中托管jQuery應用實例
51CTO之前曾報導過如何在Windows Azure云上托管SilverLight應用，本文的內容則是教您如何在Windows Azure云中托管jQuery應用，在這篇文章中，假設你從未使用過Windows Azure，我會盡量詳細地向你展示在云中托管一個Web應用程序所需的全部步驟。
關于jQuery，51CTO推薦專題： jQuery從入門到精通
為了更方便說明，本文使用的應用程序只有一個HTML頁面和一個服務，HTML頁面將會包括jQuery代碼調用這個服務，檢索并顯示記錄集。托管jQuery程序必須執行的五個步驟是：
1、注冊Windows Azure賬號
2、創建一個托管服務
3、安裝Windows Azure Tools for Visual Studio
4、創建一個Windows Azure云服務
5、部署云服務
注冊Windows Azure賬號
進入http://www.microsoft.com/windowsazure/，點擊注冊按鈕，選擇特別推薦(Introductory Special)產品，因為它是免費的，我也只不過是想體驗一下Windows Azure而已。
圖1 選擇無需付費產品
注冊Windows Azure賬號需要一個Windows Live ID，并需要輸入信用卡號碼，注冊結束后，將會收到一封激活賬號的電子郵件。
訪問開發者門戶
激活賬號后，輸入下面的URL進入Windows Azure開發者門戶。
http://windows.azure.com/
當你***次訪問開發者門戶時，你將會看到注冊Windows Azure賬號時創建的一個項目，我的項目取名為StephenWalther。
圖2 Windows Azure開發者門戶
創建一個新的Windows Azure托管服務
在云中托管一個應用程序之前，必須先給項目增加一個托管服務，在摘要頁面點擊你的項目，點擊“新建服務”鏈接，接著會提示你是創建一個存儲賬號還是創建一個托管服務。
圖3 選擇是創建存儲賬號還是托管服務
因為我們是想在云中托管服務，因此選擇“托管服務”選項，你需要為這個服務取一個名字，并添加適當的描述信息。
圖4 為托管服務取名并添加描述信息
我這里取名為jQueryApp，接下來要為這個服務選擇一個地區，我選擇的是“美國任何地方(Anywhere US)”，***點擊“創建”按鈕創建一個托管服務。
圖5 為托管服務指定地區
#p#
安裝Windows Azure Tools for Visual Studio
我們將使用Visual Studio創建jQuery項目，在開始之前必須先安裝Windows Azure Tools for Visual Studio，進入http://www.microsoft.com/windowsazure/，點擊“Get Tools and SDK”下載Windows Azure Tools for Visual Studio，Windows Azure Tools for Visual Studio支持Visual Studio 2008和Visual Studio 2010。
圖6 點擊Get Tools and SDK按鈕下載
整個安裝過程非常簡單，你只需要檢查一些參數復選框，連續點擊幾次下一步按鈕便可完成安裝。
圖7 安裝Windows Azure Tools for Visual Studio
創建Windows Azure應用程序
安裝好Windows Azure Tools for Visual Studio后，點擊“文件”*“新建項目”，選擇“ Windows Azure Cloud Service”創建一個新的Windows Azure云服務，我將我創建的云服務取名為jQueryApp。
圖8 創建一個名叫jQueryApp的云服務
接下來需要選擇云服務項目的類型。
圖9 選擇云服務項目類型
我選擇了“ASP.NET Web Role”，當然，如果想將jQuery和ASP.NET MVC結合起來使用也可以選擇“ASP.NET MVC 2 Web Role”，如果想將jQuery和PHP結合起來使用，那么可以選擇“CGI Web Role”。
點擊“確定”后，在Visual Studio解決方案資源管理器樹形列表中將會看到兩個新項目，WebRole1項目代表ASP.NET應用程序，我們將使用它創建我們的jQuery應用程序。
圖10 解決方案資源管理器樹形結構
在云中創建一個jQuery應用程序
一切準備就緒后，我們就來創建一個超簡單的jQuery應用程序，顯示從一個WCF服務(托管到云中的)檢索到的記錄集。在WebRole1項目中創建一個新頁面，保存為Default.htm，添加下面的代碼：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Products</title>
- <style type="text/css">
- #productContainer div {
- border:solid 1px black;
- padding:5px;
- margin:5px;
- }
- </style>
- </head>
- <body>
- <h1>Product Catalog</h1>
- <div id="productContainer"></div>
- <script id="productTemplate" type="text/html">
- <div>
- Name: {{= name }} <br />
- Price: {{= price }}
- </div>
- </script>
- <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
- <script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
- <script type="text/javascript">
- var products = [
- {name:"Milk", price:4.55},
- {name:"Yogurt", price:2.99},
- {name:"Steak", price:23.44}
- ];
- $("#productTemplate").render(products).appendTo("#productContainer");
- </script>
- </body>
- </html>
#p#
Product Catalog
這里的jQuery代碼簡單顯示了一個產品清單，我使用了一個jQuery模板格式化每個產品。
按F5測試一下Default.htm頁面工作是否正常，這里因為是在本機測試，因此需要用本地數據庫模擬云存儲，運行后，你將看到如下圖所示的頁面。
圖11 本機模擬運行效果
如果Default.htm如預期那樣工作，你將會看到三個產品。
圖12 運行結果，顯示了三個產品的產品清單
添加一個啟用Ajax的WCF服務
前面我們創建的jQuery程序太簡單的，數據是從一個數組中提取，是靜態的，下面我們修改一下代碼，讓它從一個WCF服務提取數據。
首先給WebRole1項目添加一個新的啟用Ajax的WCF服務，在菜單中選擇“項目”*“增加新項目”，選擇“Ajax-enabled WCF Service”，將新項目命名為ProductService.svc。
圖13 新建啟用Ajax的WCF服務項目
- ProductService.svc的代碼如下：
- using System.Collections.Generic;
- using System.ServiceModel;
- using System.ServiceModel.Activation;
- namespace WebRole1 {
- public class Product {
- public string name { get; set; }
- public decimal price { get; set; }
- }
- [ServiceContract(Namespace = "")]
- [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
- public class ProductService {
- [OperationContract]
- public IList SelectProducts() {
- var products = new List();
- products.Add(new Product {name="Milk", price=4.55m} );
- products.Add(new Product { name = "Yogurt", price = 2.99m });
- products.Add(new Product { name = "Steak", price = 23.44m });
- return products;
- }
- }
- }
現實中，我們都是從數據庫中提取數據的，為了偷懶我這里使用了一個數組。接下來就要修改Default.htm，讓它使用ProductService.svc，更新Default.htm中的jQuery代碼，讓它調用WCF服務，數據從ProductService.svc檢索。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Products</title>
- <style type="text/css">
- #productContainer div {
- border:solid 1px black;
- padding:5px;
- margin:5px;
- }
- </style>
- </head>
- <body>
- <h1>Product Catalog</h1>
- <div id="productContainer"></div>
- <script id="productTemplate" type="text/html">
- <div>
- Name: {{= name }} <br />
- Price: {{= price }}
- </div>
- </script>
- <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
- <script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
- <script type="text/javascript">
- $.post("ProductService.svc/SelectProducts", function (results) {
- var products = results["d"];
- $("#productTemplate").render(products).appendTo("#productContainer");
- });
- </script>
- </body>
- </html>
#p#
將jQuery應用程序部署到云中
現在我們要將創建好的jQuery應用程序部署到云中，在jQueryApp項目上點擊右鍵，選擇“發布”。
圖14 選中項目準備發布
當你點擊發布后，你的應用程序和應用程序配置信息將被打包成兩個文件，jQueryApp.cspkg和ServiceConfiguration.cscfg，Visual Studio會打開包含這兩個文件的文件夾。
圖15 包含打包文件的文件夾
為了將這些文件部署到Windows Azure云中，你必須手動上傳它們，進入Windows Azure開發者門戶http://windows.azure.com/。
選擇你的項目和jQueryApp服務，你將會看到一個神秘的立方體，點擊“部署”按鈕上傳你的應用程序。
圖16 準備部署
接下來要瀏覽到jQueryApp項目發布文件所在位置，選擇打包的應用程序和應用程序配置文件，并為部署取一個名字，然后點擊“部署”按鈕。
圖17 指定應用程序和應用程序配置文件位置
應用程序部署期間，你將會看到一個進度條。
圖18 正在部署
在云中運行jQuery應用程序
***，點擊“運行”按鈕，在運行你的jQuery應用程序。
圖19 點擊運行按鈕，開始在云中運行jQuery應用程序
程序初始化可能需要幾分鐘時間，WebRole1完成初始化后，你可以輸入下面的URL訪問你部署到云中的jQuery應用程序。
http://jqueryapp.cloudapp.net/default.htm
這個頁面是托管到云Windows Azure中的，每次請求這個頁面時，WCF服務就執行一次，檢索出產品清單。
圖20 訪問云中的頁面
小結
因為我們是從零開始的，因此本文介紹了如何創建Windows Azure賬號，創建托管服務，安裝Windows Azure Tools for Visual Studio，創建jQuery應用程序和部署到云中等全部布置，只要經歷這一次，要新建或修改現有應用程序，重新部署到云中就很容易了。
jQuery和Windows Azure可以***地融合到一起，因此我們可以使用jQuery構建前端Web應用程序，在后端通過Windows Azure托管WCF服務為jQuery應用程序提供服務。Windows Azure的***好處是允許我們進行動態擴展，如果我們的jQuery應用突然受到熱捧，Windows Azure允許我們向上擴展以滿足需要。
【編輯推薦】
