工具箱: 豐富的 AJAX 資料控制項、分析 HTTP 流量，及其他資訊

發行項
10/09/2015

本文章是由機器翻譯。

工具箱

豐富的 AJAX 資料控制項、分析 HTTP 流量，及其他資訊

Scott Mitchell

在確認所有的價格按時間，並受到程式變更。此資料行中是單獨的作者，不一定會反映在 Microsoft 的意見。

內容

用戶端中心艾傑克斯開發的豐富型資料 Web 控制項
Note 的部落格
檢查並分析 HTTP 流量
「 Bookshelf

用戶端中心艾傑克斯開發的豐富型資料 Web 控制項

ASP.NET AJAX 架構會提供兩種建立艾傑克斯-啟用 Web 應用程式的模型：伺服器的中心和用戶端的中心。與伺服器-中心模型，頁面開發人員繼續使用標準 ASP.NET Web 控制項，但將它們放置在 UpdatePanel 控制項中。當 UpdatePanel 中的控制項造成回傳時，UpdatePanel 會取代 JavaScript 產生部分頁面回傳的一般回傳，並順利更新伺服器的回應控制項中。與用戶端中心模型，頁面開發人員都必須與撰寫 JavaScript 初始化部分頁面回傳，更新回應網頁。程式設計會使用用戶端中心模型會需要頁面開發人員使用用戶端的 ASP.NET AJAX 程式庫，並撰寫 JavaScript 和 HTML 本身以初始部分頁面回傳，更新回應網頁。

艾傑克斯開發新的 ASP.NET 開發人員通常會喜歡在中心伺服器] 模型中，因為它比較易於實作和使用現有的 Web 控制項 ASP.NET 開發人員已經很熟悉。不過，用戶端中心模型會提供更能掌頁面的行為，而且 shuttled 瀏覽器和 Web 伺服器，藉此啟用一個多唯一和回應使用者經驗之間的資訊。這些兩種模型會強制開發人員決定困難：使用 ASP.NET 的現有 Web 控制項輕鬆地實作，或不熟悉的控制項，並寫入大量的 JavaScript 和 HTML，讓效能最佳化。

好消息是第三個選項感謝至艾傑克斯資料控制項專案版本 1.0 中，這是 ASP.NET 控制項在艾傑克斯-啟用 Web 應用程式中顯示資料集合。艾傑克斯資料控制項嫁給簡易的中心伺服器的開發，與效能增強功能，讓用戶端中心開發的。

至 Web 網頁中新增的艾傑克斯資料控制項及設定其外觀和行為是大部分，與任何其他 Web 控制項相同的方式，從 Visual Studio，請從到頁面的 [工具箱] 拖曳控制項，並將其設定透過 [屬性] 視窗。但不像 ASP.NET 的內建資料控制項，艾傑克斯資料控制項會擷取其資料從伺服器使用用戶端指令碼，提供更能回應使用者體驗使用較少的頻寬比標準資料控制項在 UpdatePanel 內使用時。

例如，顯示 Northwind 資料庫使用艾傑克斯資料控制項的 GridView 類別，啟動 ASP.NET Web 網頁中加入 GridView。接下來，請建立指令碼服務，查詢資料庫中，並傳回要顯示的資料。如果要在頁面以將 GridView 繫結至資料中，最後，撰寫 JavaScript 的。

[圖 1 顯示頁面的宣告式標記，而 [圖 2 ] 顯示透過瀏覽器檢視時，產生的頁面中。頁面由瀏覽器瀏覽時, 用戶端 pageLoad 函式執行，並從指令碼服務擷取資料。一旦資料傳回伺服器，它所繫使用類似於用於資料繫結至 ASP.NET 的 GridView 控制項之伺服器端 C# 程式碼的 JavaScript 程式碼在 GridView 結。

[圖 1) 將在 GridView 加入至 ASP.NET Web 網頁

<AjaxData:GridView ID="gvCategories" runat="server" CellPadding="4" CellSpacing="0">
    <HeaderStyle CssClass="HeaderStyle" />
    <AlternatingRowStyle CssClass="AlternatingRowStyle" />
</AjaxData:GridView>

<script type="text/javascript">
    function pageLoad(sender, e) {
        MyScriptService.GetAllCategory(onLoadSuccess);
    }

    function onLoadSuccess(result) {
        var myGrid = $find('gvCategories');

        myGrid.set_dataSource(result);
        myGrid.dataBind();
    }
</script>

[圖 2 ：將資料顯示

在艾傑克斯資料控制項包含 GridView 」、「 DataList 」、「 Repeater 和「頁面巡覽區。與只在 sprinkle 而不必撰寫任何的 HTML，您可以顯示、排序、分頁的 JavaScript，Edit，和刪除使用熟悉的概念，同時享受用戶端中心開發的優點的資料]。巢狀的資料控制項，] 以及 [艾傑克斯 Control Toolkit 與的整合，GridView (影像、核取方塊、超連結和等等) 的型別一般案例很也容易實作例如條件格式化使用不同的資料行的資料顯示數。也有豐富的功能不提供標準 ASP.NET 資料控制項，包括拖曳和下拉式和資料行重新調整順序。

價格：可用，開放原始碼。

codeplex.com/AjaxDataControls

Note 的部落格

良好的部落格作者，讓他們知道使用，要傳遞什麼沒有，哪些運作方式上的哪些技術的其對等項目共用趣聞和預期哪些障礙。很棒的部落格的絕佳例如 (Rick Strahl Web 記錄檔。

Rick 是創始者和領導人開發人員的西風向技術，公司的銷售許多 Web 應用程式和公用程式，因此他花在 trenches 他天 — 寫入軟體、 bumping 問題、尋找解決方案。他的部落格是虛擬的水冷卻器位置，其中 Rick 聰明的秘訣和技巧以及與共用他的使用、他的遇到，問題和因應措施，他的設計新的技術。

因為西風向技術主要是建置 Web 產品，Rick 的大部分就會張貼這類技術中心。沒有豐富 jQuery 和 JavaScript 上的內容加上了解在 ASP.NET 和 AJAX、 Silverlight、 Web 服務、 Visual Studio 和 IIS 的集合。並除了一般的部落格張貼 Rick 將每隔兩到三天，他也提供深入的白皮書數從 ASP.NET 進行負載平衡和壓力測試 Web 應用程式設定，並執行 Subversion (可用的原始程式碼控制系統) 中的 [編譯和部署選項的主題的範圍。

Rick 的部落格可提供豐富的資訊和透過實際的經驗學到的實用知識。此豐富的經驗做為的有用的資源所有的技巧等級的 Web 開發人員。

西-wind.com / 部落格

其中一個我其他我的最愛的部落格是 我的密碼存留為一個 Spaghetti Coder 中, Sam Larbi 他的想法和了解與共用世界上時。Sam 作業開發人員建立 Web 和使用語言和技術，例如 C#、 C ++，[注音標示]，在 ASP.NET 和 ColdFusion 的桌上型電腦應用程式都能運作正常。他的部落格，涵蓋了在同樣的各種範圍的主題。

有著重於軟體開發方法等方面的張貼內容 musings Web 程式開發，和測試導向開發的 Sam 的經驗。您會發現大量的有趣的項目例如遊戲程式設計的禮物意見，在程式設計人員和取得 Kids 感興趣的程式設計的主題。

Sam 也會有許多来說，非技術相關的軟體開發人員方面的所有相關：使用其他會議，維護好客戶關係個人開發，等等。還有如何與老闆或客戶回應主要的 blunder 好張貼。Sam 的建議是運用失敗 — 承擔責任，說明如何，您將會避免往後的錯誤，以及如何，您將會修正目前的情況。也有很棒的秘訣，如何處理與麻煩的客戶和哪些所需的知識和人員技能成為有用，您公司的雙眼的員工。

codeodor.com

檢查並分析 HTTP 流量

當您造訪一個網站時，您的瀏覽器就會傳送每個資源的 HTTP 要求，並從伺服器要求的內容中接收的 HTTP 回應。能夠檢查每個 HTTP 要求和回應是一些網站開發案例很有用的。如範例時的速度緩慢的載入網站,，良好的第一步是要檢查哪些，完全，正在從傳輸伺服器至用戶端造訪的 underperforming 的頁面要求時。可能是來回 shuttled.大型 CSS 或 JavaScript 檔案或者可能頁面的背景影像是特別要付出鉅額。檢查 HTTP 流量是也有助於步驟艾傑克斯的應用程式的偵錯時它可讓您查看精確的一部分回傳期間來回 shuttled 的內容。

我最喜愛的工具，來檢查 HTTP 流量之一是 Fiddler 版本 2.2，由 Eric Lawrence，在 Microsoft Internet Explorer 小組程式管理員 (請參閱 [圖 3 )。fiddler 做為本機的 HTTP Proxy，它位於您的瀏覽器] 和 [外部網際網路之間。當啟用 Fiddler 時，從您的瀏覽器的每個 HTTP 要求先傳送至傳送以及到其預期目的地之前，記錄要求的 Fiddler。傳回的 HTTP 回應時, 它首先會到達 Fiddler 記錄它並然後將它傳回給瀏覽器。

[圖 3 Fiddler 分析流量

[HTTP 傳輸 Fiddler 所記錄是透過 paned 兩個使用者介面，可檢視的。在左窗格會列出每個記錄的 HTTP 要求 / 回應組。從左邊中選取一或多 HTTP 要求 / 回應對會導致在右窗格中所載入的詳細資料。

右窗格會包含許多索引標籤，以各種不同類型的資訊。統計資料] 索引標籤清單傳送及接收的位元組總數目，多久選取的要求 / 回應組上的估計需要不同的設定和圓形圖，會分解各種類型的要求和其大小，相對於另一個傳輸。[時刻表] 索引 (標籤會顯示每個選取的要求 / 回應組的圖形時刻表，說明哪些要求執行同時，，顯示時間每個要求時間執行。這些兩個索引標籤是最有用的分析網站的效能。

[其他] 索引標籤很有用偵錯用戶端和伺服器端的邏輯。[檢查] 索引標籤會提供格式化] 和 [原始檢視要求和回應中傳送的內容。從 [AutoResponder] 索引標籤您可以「假」，伺服器回應時藉由指定預先決定的回應有用的技巧進行偵錯用戶端艾傑克斯的應用程式邏輯。也會檢查要求的產生器] 索引標籤，從這裡，您可以手動製作的 HTTP 要求的建構，並將它傳送到指定 Web 伺服器。

價格：可用。

fiddlertool.com

「 Bookshelf

JavaScript 發明在 Mid-1990 中做為 Netscape Navigator 網頁瀏覽器的用戶端指令碼語言。許多年它視為有點玩具語言的 — 良好的表單欄位的輸入驗證和一些其他。現在，JavaScript 辨識為的重要且強大的語言。它通常用來以動態方式修改樣式和用戶端上 Web 網頁的內容，而不需要回傳至 Web 伺服器的成本高的存取。且複雜的互動的艾傑克斯-啟用的 Web 網頁中發生的可能因為這個巧妙的語言。

因為以 JavaScript 的 Web 開發中增加的重要，已建立數個架構。其中一個最受歡迎的會是 jQuery，John Resig 由建立一個可用、開放原始碼、跨瀏覽器 JavaScript 架構。(在實際上 Visual Studio 2010 會隨附 jQuery 媒體櫃，讓 ASP.NET 開發人員開始使用 jQuery 甚至更容易)。

簡言之，jQuery 容易抓取 Web 網頁中的項目，並在處理它們的東西。例如，許多 Web 網頁顯示的資料格線，而有所不同，可以完成在 JavaScript 中每個替代的資料表資料列將套用 CSS 類別每個替代資料列樣式。下列 jQuery 陳述式執行只是，非常簡潔：

   $("table tr:nth-child(even)").
      addClass("cssClassName");

jQuery in Action (Manning，2008) 的泰迪熊 Bibeault 和 Yehuda Katz 中，是很棒的資源傾向 jQuery 的集和輸出和精通其精簡且更具彈性的語法。jQuery in Action 會假設讀取器已經熟悉使用 JavaScript，而且浪費沒有涵蓋語言的基本概念的時間。而，快速的動機 jQuery 和 jQuery 基礎簡介開始，並再上移到使用 jQuery 完成一般工作。(部分 jQuery 所使用的更多進階的 JavaScript 概念中涵蓋了一個附錄)。

接下來，作者逐步 jQuery 的許多功能。它們會顯示如何從 Web 網頁中選取項目」、「如何修改樣式及內容的項目和「如何加入和項目中移除。這些顯示 jQuery 如何簡化了事件處理，檢查 jQuery 的公用程式的函式，並說明如何使用 jQuery 與 Web 伺服器通訊。作者會提供簡單而直接英文此資訊，以只向右量程式碼片段的螢幕擷取畫面。最終結果會是非常資訊，而且讀取活頁簿。

一個的 jQuery 的普及的原因是它很容易擴充，透過外掛程式的 Framework。JavaScript 的幾行您可以將自己的函式加入.Framework。最棒的開發人員可以共用，他們已經建立正式的 jQuery 現場的外掛程式有目前數百的外掛程式可供下載。jQuery in Action，包括示範如何建立您自己的外掛程式的一章] 和 [另一個章節，來檢查四個最受歡迎且有用外掛程式可用。

價格：$39.99。

manning.com

您提出問題或意見，請以 Scott 寄toolsmm@Microsoft.com.

Scott Mitchell 的許多書籍和的作者著有也是從 1998 年就從事 Microsoft Web 技術工作者的 MVP。Scott 是一個獨立的顧問、培訓講師和寫入器。他在Mitchell@4guysfromrolla.com透過或在他的部落格ScottOnWriting.NET.

其他資源