科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道基础软件Atlas 实现机制浅析(一)

Atlas 实现机制浅析(一)

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

 与 .NET 和 Java 平台下其它 AJAX 框架相比,Altas 最大的亮点就在于与 ASP.NET 现有机制的无缝融合。

作者:IT专家社区 来源:IT专家网 2008年4月20日

关键字: 机制 实现 Atlas net Windows

  • 评论
  • 分享微博
  • 分享邮件
 与 .NET 和 Java 平台下其它 AJAX 框架相比,Altas 最大的亮点就在于与 ASP.NET 现有机制的无缝融合。通过 VS.NET 集成开发环境,使用者可以在对 js 和 AJAX 不甚了解的情况下,以非常自然的方式使用到最先进的技术。此外直接在 js 一级提供 WebService 的调用支持,也大大降低了对 ws 技术的使用门槛。而 ASP.NET 中一直引以为豪的数据绑定等技术,也可以在 Altas 中无缝得到支持,让现有投资能够最大限度得到保护。从这些意义上来说,虽然 Altas 在 AJAX 理念上没有太多突破,但不失为一个强大且实用的 AJAX 框架,非常符合 MS 在技术运用上的一贯原则。

  整体结构

  从整体结构上来看,Altas 的核心在于 <atlas:ScriptManager .../> 这个标签,所有支持 Altas 的页面都必须有且只有一个此标签,以引入 Altas 的基础架构支持。在此基础上,通过 <altas:UpdatePanel .../> 标签定义需要异步更新的范围,避免传统 Post Back 模式下的全页面刷新。而需要支持 AJAX 模式获取数据的控件,则可以通过 js 脚本和 xml 脚本两种方式定义,并由 Altas 框架进行动态 patch 以实现标准 web 控件的 AJAX 支持。此外就是 WebService 调用和数据绑定的支持机制,也是利用 Altas 框架的基础架构实现的。

  ScriptManager

  首先,ScriptManager 是一个容器,用户可以在 ScriptManager 标签下定义期望引用的其它 js 库,以及希望通过 js 直接调用的 WebService 服务。

  例如在如下的定义中,ScriptManager 控件将保存对两个客户端 js 库和 ComplexService 服务的引用,并在页面 Render 的时候写入适当的支持代码。我们可以通过 ScriptManager.Scripts 和 ScriptManager.Services 属性访问类似定义。

以下内容为程序代码:
<atlas:ScriptManager runat="server" ID="UpdatePanel2" 
  EnableScriptComponents="True" EnablePartialRendering="True">
  <Scripts>
    <atlas:ScriptReference ScriptName="AtlasUIMap" />
    <atlas:ScriptReference Path="~/MyScripts/MyScript.js" />
  </Scripts>
  <Services>
    <atlas:ServiceReference Path="ComplexService.asmx" />
  </Services>
</atlas:ScriptManager>


  其中 ScriptReference 非常简单,支持通过 ScriptName 或 Path 属性指定脚本。

  ScriptName 指定 Altas 内建的库名称,在 FrameworkScript 类型中有具体定义。这个属性在有的文档和例子中,也直接称为 Name 属性,但最新的 Altas M1 中已改为 ScriptName。这个脚本类型将被通过 ScriptManager.ConvertFrameworkScriptToFileName 函数转换为对应的 js 文件名。

以下内容为程序代码:
public enum FrameworkScript
{
      Custom,
      AtlasUIDragDrop, // "AtlasUIDragDrop.js";
      AtlasUIGlitz, // "AtlasUIGlitz.js";
      AtlasUIMap // "AtlasUIMap.js";
}

 
  如果直接使用 Path 则可以指定任意的用户自定义库。 此外还可以通过 ScriptReference.Browser 属性指定脚本适用于的浏览器,Altas 将根据客户端浏览器类型,自动选择加载合适的脚本。

  而 ServiceReference 也非常类似,可以通过 Path 和 Type 属性指定 WebService 的 .asmx 路径和相关类型。如果 GenerateProxy 属性为 true 的话(缺省),则 ScriptManager 会为此服务自动生成 proxy 包装脚本;否则将依赖于后台的自动处理机制提供支持。具体的 WebService 实现原理,等后面进行分析时在详细解释。目前需要知道的是,如果打开 GenerateProxy 模式,则 Altas 会自动生成 proxy 包装脚本,并与 Scripts 中脚本一同在合适的时候写到页面。

  除了 Scripts 和 Services 两类显式的元素外,ScriptManager 还提供 IScriptService 和 IScriptControl 两类接口实现对象的管理。

前者提供 Altas 自身的服务支持,例如用于提供诊断 API 的 ProfileScriptService 组件。
后者提供 Altas 服务端控件支持,例如用于服务端定时器的 TimerControl 控件。

  所有这些涉及脚本的引用,都会在 ScriptManager.OnPagePreRenderComplete 事件中,调用 RenderXmlScript 方法写入到一个 xml 脚本中。

以下内容为程序代码:
<script src="ScriptLibrary/Atlas/Debug/Atlas.js" type="text/javascript">
...
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
  <references>
    <add src="ScriptLibrary/Atlas/Debug/AtlasUIMap.js" />
    <add src="MyScripts/MyScript.js" />
    <add src="ComplexService.asmx/js" />
  </references>
  ...
</page>

  值得注意的是,Altas 会自动根据 web.config 中 system.web/compilation 的配置,选择 Debug 或 Release 模式的脚本。Release 模式脚本删去了多余的空格等修饰负荷,少了一些调试方面的支持。如果希望对 Altas 的脚本直接进行修改,别忘了两个版本的代码进行同步。

  此外,ScriptManager 是一个协调者,它自身维护了一些常用的状态,并会根据状态来切换 Altas 引擎的工作机制。

  最常使用的是 EnablePartialRendering 和 EnableScriptComponents 属性。

  EnablePartialRendering 属性决定是否启用局部重绘的模式。

  传统的 Post Back 模式页面,在用户 submit 时会重绘整个页面,并导致浏览器显式的闪烁。而在基于 AJAX 技术的 Altas 框架中,可以通过 UpdatePanel 标签指定需要重绘的局部。这样一来页面在处理请求时,会首先根据 ScriptManager.IsInPartialRenderingMode 属性判断是否在重绘模式中。如果在重绘模式,则仅仅将需要重绘的 UpdatePanel 内容,返回给客户端浏览器,并由 Altas 自动进行内容的更新。通过这种模式,使用者可以在对代码几乎无需修改的情况下,直接享受到 AJAX 带来的客户端用户体验的提升。EnableScriptComponents 属性决定是否启用 XML 脚本模式。

  XML 脚本模式是 Altas 引入的基于 XML 的描述性组件定义模型,可以通过一组 XML 标签,定义页面中已有 Web 组件的 AJAX 行为,而无需对现有组件进行修改和调整。而且因为所有的行为都是由 Altas 引擎在客户端动态绑定,所以组件的目标也可不仅仅限于现有的 Web 组件。具体的介绍可以参考 Atlas XML Script。而对于某些特殊情况,例如 ASP.NET 2.0 中的 master 页面,可以通过此属性关闭 XML 脚本支持,以大幅度简化页面的功能,此时 Altas 会自动使用 AtlasRuntime.js (57K) 替换完整的 Atlas.js (174K) 脚本。

  最后,在了解了 ScriptManager 的基本职责后,我们来看看它的实现。

以下内容为程序代码:
public interface IScriptControlContainer
{
  IScriptControl RegisterControl(Control control);

public class ScriptManager : System.Web.UI.Control, IScriptControlContainer, IPostBackDataHandler {...}

  ScriptManager 是一个 Web 界面控件,可以直接在 VS.NET 的设计界面中进行调整;它实现了 IScriptControlContainer 接口以作为 IScriptControl 的容器,对注册到容器的不支持 IScriptControl 接口的类型,将自动建立 GenericScriptControl 进行包装;实现 IPostBackDataHandler 接口则是用于在 Post Back 时处理局部重绘的支持。

  在重载的 Control.OnInit 方法中,将根据页面请求头中 delta 属性是否为 true 来判断,当前控件是否处于局部重绘中。如果是局部重绘模式,则关闭页面的 trace 模式,并接管页面 LoadComplete 事件,并最终根据每个 UpdatePanel 的重绘状态,返回实际的重绘结果。此外无论是否局部重绘,都会接管页面的 PreRenderComplete 事件,以便完成前面提到的 Altas.js 和 XML 脚本的输出。伪代码如下:

以下内容为程序代码:
protected override void OnInit(EventArgs e)
{
// 当不处于设计模式,且控件属于某个页面时
if (!DesignMode && (_page != null))
{
// 判断页面中是否只有一个 ScriptManager 实例,否则抛出异常
// 如果页面请求中 delta 属性为 true 则处于重绘模式
if (_page.Request.Headers["delta"] == "true"[img]/images/wink.gif[/img]
{
_inPartialRenderingMode = true; // 处于重绘模式
      _page.TraceEnabled = false; // 关闭 trace 支持
      
      // 根据每个 UpdatePanel 的重绘状态,返回实际的重绘结果
      _page.LoadComplete += new EventHandler(this.OnPageLoadComplete); 
}
// 完成前面提到的 Altas.js 和 XML 脚本的输出
_page.PreRenderComplete += new EventHandler(this.OnPagePreRenderComplete);
}
}在重载的 Control.OnPreRender 方法中,将针对一系列约束条件进行检查。
  •   首先,页面必须有 <form runat="server"> 标签,否则 ASP.NET 无法建立顶级 form 供 Altas 接管相应 submit 事件。
  •   其次,如果在局部重绘模式中,则不对页面提供 Post Back 后滚动位置的维护支持,打开此模式则抛出异常。
  •   然后,如果在局部重绘模式中,则页面必须有 <head runat="server"> 标签,以便将名为 .atlas__delta 的 CSS style 挂靠在上面。不过这个限制似乎牵强了一点,目前还不知道为什么必须如此,待进一步分析。

  实现的伪代码如下:

以下内容为程序代码:
protected override void OnPreRender(EventArgs e)
{
// 页面必须有 <form runat="server"> 标签,否则 ASP.NET 无法建立顶级 form 供 Altas 接管相应 submit 事件
if (Page.Form == null)
throw new InvalidOperationException("Must have a <form runat=\"server\">"[img]/images/wink.gif[/img];
// 是否在局部重绘模式中
  if (EnablePartialRendering)
  {
   // 不对页面提供 Post Back 后滚动位置的维护支持,打开此模式则抛出异常
if (Page.MaintainScrollPositionOnPostBack)
throw new InvalidOperationException("MaintainScrollPostition is not supported on pages with partial rendering turned on."[img]/images/wink.gif[/img];
// 页面必须有 <head runat="server"> 标签,以便将名为 .atlas__delta 的 CSS style 挂靠在上面
if (Page.Header == null)
throw new InvalidOperationException("Must have a <head runat=\"server\">"[img]/images/wink.gif[/img];
// 名为 .atlas__delta 的 CSS style
    Style style = new Style();
style.Font.Name = "Lucida Console";
    Page.Header.StyleSheet.CreateStyleRule(style, null, ".atlas__delta"[img]/images/wink.gif[/img];
}
}

  在页面重绘的准备工作完成后,OnPagePreRenderComplete 方法会被调用。

  如果是在局部重绘模式中,则直接接管 Page 的 Render 方法。

  否则将根据浏览器类型,以及是否启用 XML 脚本模式来选择加载合适的 Altas 核心脚本。

  最后,如果存在任意一种脚本服务、控件或引用,则调用 RenderXmlScript 函数输出 XML 脚本。然后会输出客户端代理脚本或局部重绘模式的初始化脚本。实现的伪代码如下:

以下内容为程序代码:
private void OnPagePreRenderComplete(object sender, EventArgs e)
{
// 是否在局部重绘模式中
if (_inPartialRenderingMode)
{  
// 接管 Page 的 Render 方法
    Page.SetRenderMethodDelegate(new RenderMethod(RenderPageCallback));
    return;
  }
// 获取客户端浏览器类型
string browser = _page.Request.Browser.Browser;
if (browser == "IE"[img]/images/wink.gif[/img]
RegisterFrameworkScript("AtlasCompat.js"[img]/images/wink.gif[/img];
else if(browser == "AppleMAC-Safari"[img]/images/wink.gif[/img]
RegisterFrameworkScript("AtlasCompat2.js"[img]/images/wink.gif[/img];
// 是否启用 XML 脚本模式
if (_effectiveEnableScriptComponents)
RegisterFrameworkScript("Atlas.js"[img]/images/wink.gif[/img];
else
RegisterFrameworkScript("AtlasRuntime.js"[img]/images/wink.gif[/img];
if (存在任意一种脚本服务、控件或引用)
{
StringWriter writer = new StringWriter(CultureInfo.InvariantCulture);
// 输出 XML 脚本
    writer.Write("<script type=\"text/xml-script\">"[img]/images/wink.gif[/img];
    RenderXmlScript(writer);
    writer.Write(""[img]/images/wink.gif[/img];
// 是否需要输出初始化脚本
string proxyScript = GetClientProxyScript();
if (proxyScript != null || _enablePartialRendering)
{
writer.Write("<script type=\"text/javascript\">"[img]/images/wink.gif[/img];
// 输出客户端代理脚本
if (proxyScript != null)
writer.Write(proxyScript);
// 输出局部重绘模式初始化脚本
writer.WriteLine("Web.WebForms._PageRequest._setupAsyncPostBacks(document.getElementById('" + _page.Form.ClientID + "'), '" + UniqueID + "');"[img]/images/wink.gif[/img];
writer.Write(""[img]/images/wink.gif[/img];
}
// 将上述脚本注册到页面的客户端脚本管理器
_page.ClientScript.RegisterStartupScript(typeof(ScriptManager), "ScriptManager", writer.ToString(), false);   
}
}

  至此,我们对 Altas 的核心组件 ScriptManager 的大致结构已经有了初步的了解,接下来会针对基于 UpdatePanel 的局部重绘模式、基于 XML 脚本的声明式定义、基于 XMLHTTP 的后台数据通讯机制、以及 WebService 和 DataBinding 支持的实现机制进行分析。

    • 评论
    • 分享微博
    • 分享邮件
    闂傚倸鍊搁崐椋庢閿熺姴鐭楅幖娣妼缁愭鏌¢崶鈺佷汗闁哄閰i弻鏇$疀鐎n亞浠炬繝娈垮灠閵堟悂寮婚弴锛勭杸閻庯綆浜栭崑鎾诲冀椤撱劎绋忛梺璺ㄥ櫐閹凤拷

    濠电姷鏁告慨鐑姐€傛禒瀣劦妞ゆ巻鍋撻柛鐔锋健閸┾偓妞ゆ巻鍋撶紓宥咃躬楠炲啫螣鐠囪尙绐為梺褰掑亰閸撴盯鎮惧ú顏呪拺闂傚牊鍗曢崼銉ョ柧婵犲﹤瀚崣蹇旂節婵犲倻澧涢柛瀣ㄥ妽閵囧嫰寮介妸褋鈧帡鏌熼挊澶婃殻闁哄瞼鍠栭幃婊堝煛閸屾稓褰嬮柣搴ゎ潐濞叉ê鐣濈粙璺ㄦ殾闁割偅娲栭悡娑㈡煕鐏炲墽鐭嬫繛鍫熸倐濮婄粯鎷呯粵瀣異闂佹悶鍔嬮崡鍐茬暦閵忋倕鍐€妞ゆ劑鍎卞皬闂備焦瀵х粙鎴犫偓姘煎弮瀹曚即宕卞Ο闀愮盎闂侀潧鐗嗛幊搴㈡叏椤掆偓閳规垿鍩ラ崱妞剧凹濠电姰鍨洪敋閾荤偞淇婇妶鍛櫤闁稿鍊圭换娑㈠幢濡纰嶉柣搴㈣壘椤︾敻寮诲鍫闂佸憡鎸鹃崰搴敋閿濆鏁嗗〒姘功閻绻涢幘鏉戠劰闁稿鎹囬弻锝呪槈濞嗘劕纾抽梺鍝勬湰缁嬫垿鍩為幋锕€宸濇い鏇炴噺閳诲﹦绱撻崒娆戝妽妞ゃ劌鎳橀幆宀勫磼閻愰潧绁﹂柟鍏肩暘閸斿矂鎮為崹顐犱簻闁圭儤鍨甸鈺呮倵濮橆剦妲归柕鍥у瀵粙濡歌閸c儳绱撴担绛嬪殭婵☆偅绻堝濠氭偄绾拌鲸鏅i悷婊冪Ч閹﹢鎳犻鍌滐紲闁哄鐗勯崝搴g不閻愮儤鐓涢悘鐐跺Г閸犳﹢鏌℃担鐟板鐎规洜鍠栭、姗€鎮╅搹顐ら拻闂傚倷娴囧畷鍨叏閹惰姤鈷旂€广儱顦崹鍌炴煢濡尨绱氶柨婵嗩槸缁€瀣亜閺嶃劎鈽夋繛鍫熺矒濮婅櫣娑甸崨顔俱€愬銈庡亝濞茬喖宕洪埀顒併亜閹哄棗浜鹃梺鎸庢穿婵″洤危閹版澘绫嶉柛顐g箘椤撴椽姊虹紒妯哄鐎殿噮鍓欒灃闁告侗鍠氶崢鎼佹⒑閸撴彃浜介柛瀣閹﹢鏁冮崒娑氬幈闁诲函缍嗛崑鍡樻櫠椤掑倻纾奸柛灞剧☉缁椦囨煙閻熸澘顏柟鐓庢贡閹叉挳宕熼棃娑欐珡闂傚倸鍊风粈渚€骞栭銈傚亾濮樺崬鍘寸€规洖缍婇弻鍡楊吋閸涱垽绱遍柣搴$畭閸庨亶藝娴兼潙纾跨€广儱顦伴悡鏇㈡煛閸ャ儱濡煎褜鍨伴湁闁绘ǹ绉鍫熺畳闂備焦瀵х换鍌毼涘Δ鍛厺闁哄洢鍨洪悡鍐喐濠婂牆绀堟慨妯挎硾閽冪喖鏌曟繛褍瀚烽崑銊╂⒑缂佹ê濮囨い鏇ㄥ弮閸┿垽寮撮姀鈥斥偓鐢告煥濠靛棗鈧懓鈻嶉崶銊d簻闊洦绋愰幉楣冩煛鐏炵偓绀嬬€规洟浜堕、姗€鎮㈡總澶夌处

    重磅专题
    往期文章
    最新文章