發行項
11/06/2017

2017 年 10 月

第 32 卷，第 10 期

本文章是由機器翻譯。

網頁程式開發 - 加速刺激：Managed AJAX 能否將您的 Web 應用程式放入快速通道？

由Thomas Hansen | 2017 年 10 月

根據數個主題上的研究，來建立 AJAX Web 應用程式時的最重要的考量是速度和回應性。這些可能是為什麼有些開發人員選擇建立原生應用程式，而不是 Web 應用程式的可能原因。但是，如果我說您有建立為 100 次更快和更快的回應比您可能知道應用程式的 AJAX Web 應用程式的方式？

我發明建立 100%純 JavaScript 為基礎的 AJAX Web 應用程式，這樣會降低您的應用程式的頻寬用量至少 10 倍，有時候會藉由盡 300 時間、何種類型的工具視您使用與您想要建立的方式。為「管理 AJAX 」。這項技術參照

受管理的 AJAX 或多或少啟發的方式是 Microsoft 內建的 common language runtime (CLR)。比方說，當您建立的 C# 應用程式時，編譯器會建立 CLR 組件。這表示您的執行階段環境的最終結果是「受管理的環境」。當您建立受管理的 AJAX 應用程式時，您的結果不向不同於一般的純文字 ASP.NET 的網站; 任何項目會進行編譯它會變成受管理的環境，其中的最終結果的 JavaScript 部分會完全改變了抽象，相同的方式 CPU 指示非常抽象時有 CLR 組件。

此運作方式？

受管理的 AJAX 要求幾乎沒有新的知識。您所做過任何 ASP.NET 程式開發，如果新的控制項程式庫放入.aspx 頁面，即可繼續工作，您之前已完成幾乎完全。在.aspx 標記中，或您 C# /F #/ Visual Basic.NET 程式碼後置中，您可以建立幾個 ASP.NET 控制項。然後您裝飾控制項的屬性加入幾個 AJAX 事件處理常式，您完成！

初始轉譯為您建立了純舊 HTML。但您對任何伺服器端控制項的 AJAX 要求期間每次變更傳遞至用戶端為 JSON。因此，用戶端可以立即取得小的 JavaScript 程式庫，小於 5 KB 的大小總計，而且您可以建立豐富 AJAX 控制項，例如之類的案例中，資料格和檢視，而無須使用超過 5 KB 的 JavaScript。

請注意，此時，您已已經效能勝過 jQuery 以獨立 JavaScript 檔案由幾乎一個重要性順序（jQuery 版本 2.1.3 之後縮製及 zopflinication 30 KB）。因此，只包括您的網頁，和任何其他 JavaScript jQuery，由您之後已耗用 6 倍頻寬以想要受管理的 AJAX 方法。當您開始使用您自己的 JavaScript 中的 jQuery，skyrockets 這個數字。

提取其縮短和壓縮版本中的 jQuery UI 中，可讓您增加 73.5 KB 的 JavaScript 部分。只包括 jQuery 和 jQuery UI 頁面上的會增加額外的 103.4 kb 大小（103.4 KB 除以 4.8 KB 變成 21.5 時間的頻寬耗用量）。此時，您仍未建立如往常般在您的頁面上，但 jQuery + jQuery UI 上的單一 UI 項目會耗用幾乎 22 倍的空間的受管理的 AJAX 方法。而且，您可以建立您可以使用 JavaScript，包括大部分可以建立 jQuery + jQuery UI 的 UI 控制項的這個 5 KB 夢想幾乎每個可能的 UI widget。基本上，不論您執行的動作，您將會幾乎不超過 5 KB 的 JavaScript。和其他組件的應用程式，例如 HTML 和 CSS，也可能會變得較小的大小。

使用這個方法，您建立豐富的 AJAX UI 控制項，例如 AJAX 樹狀檢視控制項，DataGrid 控制項和 TabView 控制項。當您建立這些小工具永遠不需要額外的 JavaScript。此外，還有新知識才能使用這些控制項。您只需要使用它們（幾乎）相同的方式，您會消耗傳統 WebControl 從 ASP.NET。

受管理的 AJAX 方法有兩個不同的方式來處理 HTTP 要求的網頁。一般純 HTTP 要求，這樣將只提供給用戶端 HTML 其中一個處理常式。此處理常式可讓您檢查的 HTTP post 參數存在。如果此參數存在，此處理常式都會轉譯只為了傳回給用戶端為 JSON 的每個控制項的變更。AJAX 要求期間修改頁面控制項階層架構所建立的每個控制項將會自動重建，使用它在上一個要求中已有的屬性。在用戶端，您有一般的處理常式來處理您的 JSON 屬性，以您的控制項，並以一般方式更新 [DOM 事件處理常式的用戶端上的 DOM 項目與屬性。

這個方法有許多正值的副作用，例如未與網站的方式所呈現的 HTML 項目，為僅具有最初建立 — HTML 項目。這表示，在語意不相同，您的 Web 應用程式變得更容易了解（搜尋引擎蜘蛛，做為範例）。此外，它會建立上層環境的實際修改項目在用戶端，如果您想要使用這兩個領域的最佳結果。

您仍然可以結合這種方法，盡可能在您希望的位置的自訂 JavaScript 的 — 在哪一個點，您可以只檢查在您的純 HTML 中轉譯的 HTML 要求。相比較的"magic div"方法中，使用的許多其他 AJAX UI 程式庫，通常包含數 mb 的 JavaScript 建立您的資料格和之類的案例。

因此，您可以了解 100 次更快且更能有效回應圖不誇張了。事實上，相較於所有最常使用的元件 UI 工具套件，用於搭配 C# 和 ASP.NET，通常是 100 與 250 倍和頻寬耗用量方面更能有效回應之間。我最近未受管理的 AJAX TreeView widget 中 System42 和 ASP.NET 堆疊上最大的元件套件提供的三個之間的效能度量。我找到頻寬耗用量是某處 150 與 220 時間更快和更能有效回應之間的差異。

為了說明這的表示，假設您在很慢的網際網路連線，它會採用一秒下載的 JavaScript 5 KB。這表示每秒下載的一些其他套件提供的 JavaScript 組件下載的受管理的 AJAX JavaScript 和可能最多可達三分鐘 40 秒。不用說，假設有什麼差異是關於轉換如果您建立這兩種方法具有兩個電子商務解決方案。

說明程式碼

[確定]，足夠溝通、讓我們取得向下和已變更。首先，下載 [Phosphorus 五個在bit.ly/2u5W0EO。接下來，開啟 p5.sln 檔案和建置 Phosphorus 五個，使您可以取得 p5.ajax.dll 組件。您要做為參考，取用 p5.ajax.dll Web 應用程式中的，因此您必須建置它，再繼續進行。請注意 Phosphorus 五個組成 30 個以上的專案，但是本文我會著重在 p5.ajax 專案。

接下來，在 Visual Studio 中建立新的 ASP.NET 網站。請確定您建立 Web Form 應用程式。Visual Studio for Mac，就可以找到此檔案 |新的方案 |其他 |.NET |ASP.NET Web Form 專案。

建立您新建立的網站內已內建的 p5.ajax.dll 組件的參考，並修改 web.config 以類似下列程式碼：

<?xml version="1.0"?>
<configuration>
  <system.web>
    <pages clientIDMode="Static">
      <controls>
        <add assembly="p5.ajax" namespace="p5.ajax.widgets" tagPrefix="p5" />
      </controls>
    </pages>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
  </system.web>
</configuration>

在此程式碼的重要部分為"clientIDMode 」和 [新增組件。此時您可以使用任何從 p5.ajax 控制項內.aspx 標記與 p5 冠。請確定您修改 Default.aspx 頁面的內容中的程式碼類似於圖 1。

圖 1 建立的網頁利用單一按鈕，變更它的文字時按下

<%@ Page Language="C#" Inherits="foobar.Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
  <title>Default</title>
</head>
<body>
  <form id="form1" runat="server">
    <p5:Literal 
      runat="server"
      id="foo"
      onclick="foo_onclick"
      Element="button">Click me!</p5:Literal>
  </form>
</body>
</html>

然後將變更其程式碼後置如下：

using System;
namespace foobar
{
  public partial class Default : p5.ajax.core.AjaxPage
  {
    [p5.ajax.core.WebMethod]
    public void foo_onclick(p5.ajax.widgets.Literal sender, EventArgs args)
    {
      sender.innerValue = "Hello World from Managed Ajax!";
    }
  }
}

請注意，您必須先 AjaxPage，會繼承您的頁面將 WebMethod 屬性加入至事件處理常式，特別是強型別為"Literal"widget 的事件處理常式的第一個參數。此時您可以啟動您的網站，請按一下按鈕並享受您的結果。如果偵錯您的網站時，您會收到奇怪的 bug，，請確定您關閉 Visual Studio 中，通常是工具列按鈕，在 Visual Studio 的最上方的 [瀏覽器連結] 設定。如果您感到好奇什麼面，請檢查您的 HTTP 要求。也請確定您要查看其初始的 HTML。

哇，那是什麼？

這在實務上管理 AJAX。有幾個重點，應考慮此作法。首先，您可以在頁面中修改您從任何 AJAX 事件處理常式的頁面上的任何控制項中的任何內容。如果您建立另一個常值的小工具時，「項目」中輸入"p"執行個體，您無法更新其內容從按鈕的「 foo_onclick"事件處理常式。

第二，您可以動態地新增、移除、更新或從您的 widget 任何適當的方式擷取任何屬性。若要參考任何屬性或事件處理常式，只要使用從 C# 註標運算子。在圖 2，而不是設定 widget 的 innerValue，其樣式會檢查屬性和切換背景為黃色，使用的 CSS 樣式屬性。請注意它能夠保存以及 [記住] 小工具的樣式屬性。另請注意，這已完成，而不需用戶端與伺服器之間來回傳遞大量的 ViewState。

在真實世界應用程式中，您就可能想要使用無法由交換中的參考的 CSS 類別圖 2來自「樣式」至「類別」。但是，我想要簡化此範例中，因此我沒有混合 CSS 檔案，在這裡，方便使用之樣式屬性。使用中顯示的方法圖 2，您可以加入、移除和變更您想在 [您的頁面上的任何小工具的任何屬性。

圖 2 切換的背景色彩

using System;
namespace foobar
{
  public partial class Default : p5.ajax.core.AjaxPage
  {
    [p5.ajax.core.WebMethod]
    public void foo_onclick(p5.ajax.widgets.Literal sender, EventArgs args)
    {
      if (sender.HasAttribute ("style"))
        sender.DeleteAttribute ("style");
      else
        sender ["style"] = "background-color:Yellow;";
    }
  }
}

第三個，最重要應該 — 點是您可以動態地新增、移除、更新和插入其他 widget 的任何新的 AJAX 控制項適當地。您看一下這個最後一個點之前，不過，您必須檢查「 trinity 的 widget。」

P5.ajax，有三個不同的 widget，但它們也是在其應用程式開發介面非常類似。藉由結合在一起使用組合這些三個小工具，您可以建立您想要的任何 HTML 標記。在圖 2 範例中，您可以使用常值的小工具。常值的小工具具有"innerValue"屬性，用戶端會對應到「 innerHTML"，而只是讓您變更其內容為字串的 HTML 片段。

[容器] widget 中可包含 widget。其會記住其控制項集合並可讓您以動態方式加入、移除或變更其控制項的動態 AJAX 要求期間的集合。

第三個小工具是 Void 的 widget 中，以獨佔方式使用的控制項，不能有內容，例如 HTML 輸入項目、 br 項目、 hr 項目，依此類推。最重要的如以下的範例可能是 [容器] widget 中。因此，請繼續進行，並將.aspx 網頁中的程式碼變更為中看到的內容圖 3。

圖 3 建立的按鈕和分項清單包含一個清單項目頁面

<%@ Page Language="C#" Inherits="foobar.Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
  <title>Default</title>
</head>
<body>
  <form id="form1" runat="server">
    <p5:Literal 
      runat="server"
      id="foo"
      onclick="foo_onclick"
      Element="button">Click me!</p5:Literal>
  <p5:Container
      runat="server"
      id="bar"
      Element="ul">
      <p5:Literal
        runat="server"
        id="initial"
        onclick="initial_onclick"
        Element="li">Initial list element, try clicking me!</p5:Literal>
  </p5:Container>
  </form>
</body>
</html>

中的 widget 階層圖 3將使用一個"l"的子元素建立一個「按鈕」和「 ul"項目。接下來中的程式碼中變更 [C# 程式碼後置圖 4。

圖 4 對應 AJAX 事件處理常式建立新的清單項目

using System;

namespace foobar
{
  public partial class Default : p5.ajax.core.AjaxPage
  {
    protected p5.ajax.widgets.Container bar;

    [p5.ajax.core.WebMethod]
    public void foo_onclick(p5.ajax.widgets.Literal sender, EventArgs args)
    {
      // Using the factory method to create a new child widget for our "ul" widget.
      var widget = bar.CreatePersistentControl<p5.ajax.widgets.Literal>();
      widget.Element = "li";
      widget.innerValue = "Try clicking me too!";

      // Notice we supply the name of the method below here.
      widget ["onclick"] = "secondary_onclick";
    }

    [p5.ajax.core.WebMethod]
    public void initial_onclick(p5.ajax.widgets.Literal sender, EventArgs args)
    {
      sender.innerValue = "I was clicked!";
    }

    [p5.ajax.core.WebMethod]
    public void secondary_onclick(p5.ajax.widgets.Literal sender, EventArgs args)
    {
      sender.innerValue = "I was ALSO clicked!";
    }
  }
}

請注意，最後一段程式碼動態插入新的 widget 容器 widget。基本上，新"l i"項目記錄附加至"ul"項目，以動態方式在 AJAX 要求期間，與只使用過！這些小工具也持續記憶跨 AJAX 要求，您可以變更其屬性並為其叫用事件處理常式。此外，可以透過「項目」屬性轉譯任何 HTML 項目，並透過註標運算子新增任何屬性。

您現在可以 100%完整控制您的 HTML 標記，而且您可以建立小 AJAX 要求和回應，更新您想要更新您的頁面，請參閱適當的方式上的任何項目。和它的 JavaScript 4.8 KB 一樣。您已開啟 Web 應用程式 AJAX 開發成即可輕鬆地為純舊的 Windows Form 開發做的事。並在過程中，您最後會有 100 次更快且更能有效回應的 Web 應用程式。

Hyperlambda 練習

撰寫在 2017 年 6 月發行的發行項的幾個月後MSDN Magazine 標題為」讓 C# 更動態與 Hyperlambda 」 (msdn.com/magazine/mt809119)，其中已探索的非-傳統Hyperlambda 程式設計語言的執行樹狀目錄中其根目錄。我顯示此因為 Hyperlambda 的樹狀結構為基礎的方法會讓您能夠輕鬆宣告 AJAX widget 階層。P5.ajax 結合 Hyperlambda 取用 AJAX TreeView] widget 中，而且顯示一些令人驚嘆的效率。

這讓我們來探索。首先，除了 Phosphorus 五個，您必須下載 System42，並將其放入主要 p5.webapp 資料夾的指示，在根據bit.ly/2vbkNpg。然後啟動 System42，其中包含超快的 AJAX 樹狀檢視 widget，開啟"CMS"，即可建立新的 lambda 頁面 +，並貼上顯示的程式碼圖 5。

圖 5，建立可讓您在磁碟上周遊資料夾 AJAX 樹狀檢視

create-widget
  parent:content
  widgets
    sys42.widgets.tree
      crawl:true
      items
        root:/
      .on-get-items
        list-folders:x:/../*/_item-id?value
        for-each:x:/@list-folders/*?name
          list-folders:x:/@_dp?value
          split:x:/@_dp?value
            =:/
          add:x:/../*/return/*
            src:@"{0}:{1}"
              :x:/@split/0/-?name
              :x:/@_dp?value
          if:x:/@list-folders/*
            not
            add:x:/../*/return/*/items/0/-
              src
                class:tree-leaf
        return
          items

按一下 [設定]、選擇 [空白作為範本、按一下 [確定]，儲存您的頁面和按一下 [檢視] 頁面。

嘗試展開 AJAX 樹狀檢視時檢查哪個 HTTP 要求，以透過網路，並瞭解您剛才建置資料夾，以將會顯示從 p5.webapp 資料夾中，而且您資料夾 Hyperlambda 24 行 AJAX 樹狀檢視瀏覽其初始總頻寬耗用量為只 10.9 KB ！

如果您比較這些結果和任何其他 AJAX 工具組，您通常可以找到其他工具套件需要下載數個 mb 的 JavaScript — 除了所有的其他項目會透過網路 — Hyperlambda TreeView 且不能超過 4.8 KB 的時JavaScript。

此 AJAX 樹狀檢視建置時包含 717 行程式碼、在純 Hyperlambda，總共使用做任何動作，但常值、容器和 Void 的 widget。大部分的程式碼所組成的註解，因此大約 300 幾行程式碼都需要建立 AJAX 樹狀檢視控制項。小工具是對於使用以 24 行 Hyperlambda，可讓您瀏覽您在磁碟上的資料夾。但這需要數千行程式碼來建立控制項與其他任何項目，24 行中的程式碼中完成幾百行使用，做為圖 5。

如果您想，您現在可以交換三行 Hyperlambda 範例的程式碼，並且最後會產生您自己特製化作用中事件自訂小工具，可讓您使用一行程式碼與您特定小工具。閱讀如何這麼做在bit.ly/2t96gsQ。

因此，您現在可以建立將會瀏覽您的伺服器資料夾，其中一行程式碼的 AJAX 樹狀檢視。若要建立對等其他工具套件中的項目通常需要幾百行四個不同語言的程式碼。就像一行程式碼，以一種程式設計語言使用，而它執行最多 300 時間比其競爭。

總結

假設有可以產生 100 次更好的結果，100 次更快和更多最佳化結果、 100 倍較佳的品質，具有 100 次較少的較少的錯誤，而且比您之前的 100 倍更具生產力。若要確定您使用最新的貨物，請下載 Phosphorus 五個在bit.ly/2uwNv65和在 System42 bit.ly/2vbkNpg。

Thomas Hansen有已建立軟體，因為他是 8 歲月，他開始撰寫程式碼中： 1982年使用 Oric-1 的電腦。有時候，他會建立沒有比損害更多的良好的程式碼。他熱愛 Web、 AJAX、 Agile 方法及軟體架構。請連絡他在thomas@gaiasoul.com。

非常感謝下列 Microsoft 技術專家檢閱這篇文章：James McCaffrey

MSDN Magazine 論壇中的這篇文章的討論

Share via

網頁程式開發 - 加速刺激：Managed AJAX 能否將您的 Web 應用程式放入快速通道？

此運作方式？

說明程式碼

哇，那是什麼？

Hyperlambda 練習

總結

其他資源