备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

深入Atlas系列 - 浅析ASP.NET Beta 2中令人疑惑的脚本引入方式

2017-11-15 1528
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
　似乎已经有不少朋友在作了ASP.NET AJAX Beta 1到Beta 2的转移之后遇到了这样的问题：如果使用了ScriptManager引入了自定义的JavaScript脚本文件后会发生JavaScript错误。例如：
< asp:ScriptManager  ID ="ScriptManager1"  runat ="server"  EnablePartialRendering ="false" >
     < Scripts >
         < asp:ScriptReference  Path ="MyScript.js"   />
     </ Scripts >
</ asp:ScriptManager >

　　上面的代码会抛出如下的异常：“Sys.ScriptLoadFailedException: The script 'MyScript.js' could not be loaded or does not contain the Sys.Application.notifyScriptLoaded() callback.”，意思就是说我们的MyScript.js缺少了对于Sys.Application.notifyScriptLoaded函数的 调用。

　　这表示了什么？为什么突然发生了这种状况？我们一点点地来看。


一、代码逻辑简析：

　　我们从页面的代码看起。上面的使用方式会产生如下的代码：
< script  src ="/ScriptResource.axd?..."  type ="text/javascript" ></ script >

……

 < script  type ="text/javascript" >
<!--
Sys.Application.queueScriptReference('MyScript.js');
Sys.Application.initialize();
 //  -->
</ script >

　　通过ScriptResource.axd文件引入的是“MicrosoftAjax.js”文件，不用多说。我们可以发现，和Beta 1的行为不同，ScriptManager并没有为添加在其中的引用添加<script />元素，而是使用了Sys._Application.queueScriptReference()将需要引入的脚本路径添加进一个队列中，最 后通过Sys._Application.initialize()函数真正地引入这些脚本文件。我们来仔细查看这些方法：

　　首先 Sys._Application.queueScriptReference函数会使用Sys._ScriptLoader类的Singleton对象 的queueScriptReference函数，将脚本路径添加到那个Sys_ScriptLoader类的一个队列中。代码如下：
function  Sys$_Application$queueScriptReference(scriptUrl) {
     // / <param name="scriptUrl" type="String" mayBeNull="false"></param>
     var  e  =  Function._validateParams(arguments, [
        {name:  " scriptUrl " , type: String}
    ]);
     if  (e)  throw  e;

    Sys._ScriptLoader.getInstance().queueScriptReference(scriptUrl);
}

Sys._ScriptLoader.getInstance  =   function  Sys$_ScriptLoader$getInstance() {
     var  sl  =  Sys._ScriptLoader._activeInstance;
     if ( ! sl) {
        sl  =  Sys._ScriptLoader._activeInstance  =   new  Sys._ScriptLoader();
    }

     return  sl;
}

 function  Sys$_ScriptLoader$queueScriptReference(scriptUrl) {
     // / <param name="scriptUrl" type="String" mayBeNull="false"></param>
     var  e  =  Function._validateParams(arguments, [
        {name:  " scriptUrl " , type: String}
    ]);
     if  (e)  throw  e;

     if ( ! this ._scriptsToLoad) {
         this ._scriptsToLoad  =  [];
    }

    Array.add( this ._scriptsToLoad, {src: scriptUrl});
}

　　在Sys._Application.initialize函数中，会调用_loadScripts函数，而该函数事实上调用的是Sys._ScriptLoader的Singleton实例的loadScripts函数。如下：
function  Sys$_Application$initialize() {
     if  ( ! this ._initialized  &&   ! this ._initializing) {
         this ._initializing  =   true ;
         this ._loadScripts();
    }
}

 function  Sys$_Application$_loadScripts() {
    debug.assert( ! this ._scriptLoaderExecuted,  " Cannot load scripts more than once. " );
     this ._scriptLoaderExecuted  =   true ;        

    Sys._ScriptLoader.getInstance().loadScripts(
         this .get_scriptLoadTimeout(), // 30 by default
        Function.createDelegate( this ,  this ._allScriptsLoadedHandler),
        Function.createDelegate( this ,  this ._scriptLoadFailedHandler),
        Function.createDelegate( this ,  this ._scriptLoadTimeoutHandler));
}

　　在Sys._ScriptLoader.loadScripts函数中，会接受四个参数（关键不在这里）：
  1. scriptTimeout：加载所有Script文件时所用的超时时间，单位为秒。
  2. allScriptsLoadedCallback：当所有脚本被加载完毕后使用的回调函数。
  3. scriptLoadFailedCallback：脚本加载失败后使用的回调函数。
  4. scriptLoadTimeoutCallback：脚本加载超时后使用的回调函数。
　　Sys._ScriptLoader.loadScripts函数代码如下：
function  Sys$_ScriptLoader$loadScripts(scriptTimeout, allScriptsLoadedCallback, scriptLoadFailedCallback, scriptLoadTimeoutCallback) {
     // / <param name="scriptTimeout" type="Number" integer="true"></param>
     // / <param name="allScriptsLoadedCallback" type="Function" mayBeNull="true"></param>
     // / <param name="scriptLoadFailedCallback" type="Function" mayBeNull="true"></param>
     // / <param name="scriptLoadTimeoutCallback" type="Function" mayBeNull="true"></param>    
     var  e  =  Function._validateParams(arguments, [
        {name:  " scriptTimeout " , type: Number, integer:  true },
        {name:  " allScriptsLoadedCallback " , type: Function, mayBeNull:  true },
        {name:  " scriptLoadFailedCallback " , type: Function, mayBeNull:  true },
        {name:  " scriptLoadTimeoutCallback " , type: Function, mayBeNull:  true }
    ]);
     if  (e)  throw  e;

     if ( this ._loading) {
         throw  Error.invalidOperation(Sys.Res.scriptLoaderAlreadyLoading);
    }
     this ._loading  =   true ;
     this ._allScriptsLoadedCallback  =  allScriptsLoadedCallback;
     this ._scriptLoadFailedCallback  =  scriptLoadFailedCallback;
     this ._scriptLoadTimeoutCallback  =  scriptLoadTimeoutCallback;
    
     if (scriptTimeout  >   0 ) {
         //  监听超时
         this ._timeoutCookie  =  window.setTimeout(
            Function.createDelegate( this ,  this ._scriptLoadTimeoutHandler),
            scriptTimeout  *   1000 );
    }
        
     this ._loadScriptsInternal();
}

　　在this._loadScriptsInternal函数中会使用Sys._ScriptLoaderTack类来将<script />元素添加到Header中。
function  Sys$_ScriptLoader$_loadScriptsInternal() {
     if  ( this ._scriptsToLoad  &&   this ._scriptsToLoad.length  >   0 ) {
         //  出队列
         var  nextScript  =  Array.dequeue( this ._scriptsToLoad);
         //  构造一个<script />元素，
         var  scriptElement  =   this ._createScriptElement(nextScript);
            
         if  (scriptElement.text  &&  Sys.Browser.agent  ===  Sys.Browser.Safari) {
            scriptElement.innerHTML  =  scriptElement.text;
             delete  scriptElement.text;
        }            

         if  ( typeof (nextScript.src)  ===   " string " ) {
             this ._currentTask  =   new  Sys._ScriptLoaderTask(
                scriptElement,
                 //  this._scriptLoadedDelegate = Function.createDelegate(this, this._scriptLoadedHandler);
                 this ._scriptLoadedDelegate);

             this ._currentTask.execute();
        }
         else  { 
            document.getElementsByTagName('HEAD')[ 0 ].appendChild(scriptElement);
             this ._loadScriptsInternal();
        }
    }
     else  {
         //  加载完了，清除所有的回调函数
         var  callback  =   this ._allScriptsLoadedCallback;

         this ._allScriptsLoadedCallback  =   null ;
         this ._scriptLoadFailedCallback  =   null ;
         this ._scriptLoadTimeoutCallback  =   null ;

         this ._loading  =   null ;

         //  调用回调函数
         if (callback) {
            callback( this );
        }
    }
}

　　再细化下去似乎没有必要了，因为问题好像就出在了这里。Sys._ScriptLoaderTask构造函数的第二个参数是一个回调函数，它 会在加载一个<script />元素后调用这个回调函数。但是我们来看一下Sys._ScriptLoader._scriptLoadedHandler函数到底做了些什 么。如下：
function  Sys$_ScriptLoader$_scriptLoadedHandler(loaded) {
     var  currentTask  =   this ._currentTask;
     var  currentScriptElement  =  currentTask.get_scriptElement();
    currentTask.dispose();
        
     this ._currentTask  =   null ;
     this ._scriptsToLoad  =   null ;
     this ._loading  =   null ;
        
     if ( this ._timeoutCookie) {
        window.clearTimeout( this ._timeoutCookie);
         this ._timeoutCookie  =   null ;
    }

     //  为什么在这里调用scriptLoadFailedCallback这个回调函数？
     var  callback  =   this ._scriptLoadFailedCallback;

     this ._allScriptsLoadedCallback  =   null ;
     this ._scriptLoadFailedCallback  =   null ;
     this ._scriptLoadTimeoutCallback  =   null ;

     if (callback) {
        callback( this , currentScriptElement);
    }
     else  {
         throw  Error.scriptLoadFailed(currentScriptElement.src);
    }
}

　　这段代码有些奇怪，它使用了this._scriptLoadFailedCallback回调函数，也就是说，它“准备”了要失败！在这个 回调函数里，也就是Sys._Application._scriptLoadFailedHandler方法里就会触发文章一开始提到的异常：
function  Sys$_Application$_scriptLoadFailedHandler(scriptLoader, scriptElement) {
         if ( this ._disposing) {
             return ;
        }
         var  cancelled  =   false ;
         var  handler  =   this .get_events().getHandler('scriptLoadFailed');
         if (handler) {
             var  args  =   new  Sys.ScriptElementEventArgs(scriptElement);
            handler( this , args);
            cancelled  =  args.get_cancel();
        }
         if ( ! cancelled) {
             //  就是这里
             throw  Error.scriptLoadFailed(scriptElement.src);
        }
    }

　　这里就涉及到了那个要求被调用的回调函数的作用。Sys._Application.notifyScriptLoaded函数会调用 Sys._ScriptLoader那个Singleton对象的notifyScriptLoaded函数，而在这个函数里调用了当前 Sys._ScriptLoaderTask对象的dispose方法，也就是当场“销毁”了这个对象，也就是说，在 Sys_Application._scriptLoadFailedHandler函数也就不会被调用了。


二、解决方法：

　　解决方法倒非常简单，只要再引入的js文件中加上下面的代码就可以了：
if  ( typeof (Sys)  !==  'undefined') Sys.Application.notifyScriptLoaded();

　　理论上这段代码可以加在文件的任何地方，虽然在调用了这个回调函数之后马上就会在<head />元素中加入另外一个<script />对象，但是因为浏览器保证了在同一时刻只会有一个外部脚本文件被加载，所以也就保证了脚本加载的顺序。

　 　这也解释了官方的Known Issue：“If you are loading .js files for the Microsoft AJAX library from disk (by setting the ScriptReference property of the ScriptManager control), do not use the library that is installed by default in the %ProgramFiles%\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025 folder. Instead, install the Microsoft AJAX Library from the  [url]http://www.asp.net[/url]  Web site, copy the .js files from the new installation location to a folder of your application, and then point the ScriptReference property to that location.”。它要求开发人员从“ [url]http://ajax.asp.net/downloads/beta/default.aspx?tabid=47&subtabid=471[/url] ” 中下载一个另外的ASP.NET AJAX Library包，当需要从磁盘引入（相对于使用ScriptResource.axd文件引入）时，必须使用这个包内脚本文件，而不是使用安装了 ASP.NET AJAX后出现在“%ProgramFiles%\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025”文件夹里的内容。打开两者进行比较之后就会发现，关键就在于它们的最后一行，一个调用了 “Sys.Application.notifyScriptLoader()”，一个没有。

　　不过事实上，这两种脚本文件的区别不止这些，在“预装”的脚本中，还缺少了“Sys.Res”的定义（Sys.Res中定义了大量的字符串信息），这样的话，比如在一些异常发生时，就会因为找不到Sys.Res中的字符串而出错，这反而掩盖了真正的异常信息。

　　说到这里，我忽然想说，“预装”的脚本算是什么东西？


三、注意事项：

　　为了观察脚本的生成，我们来做一些尝试。首先，我们在aspx文件中使用如下的代码：
< body >
     < form  id ="form1"  runat ="server" >
         < asp:ScriptManager  ID ="ScriptManager1"  runat ="server"  EnablePartialRendering ="false" >
             < Scripts >
                 < asp:ScriptReference  Path ="MyScript1.js"   />
                 < asp:ScriptReference  Path ="MyScript2.js"   />
             </ Scripts >
         </ asp:ScriptManager >
        
         < script  language ="javascript" >
            alert("The script inside the  < form  />  element.");
         </ script >
        
     </ form >
    
     < script  language ="javascript" >
        alert("The script outside the  < form  />  element")
     </ script >
</ body >

　　然后在aspx.cs文件中添加如下的代码：
protected   override   void  OnPreRender(EventArgs e)
{
     base .OnPreRender(e);
     this .ClientScript.RegisterStartupScript(
         this .GetType(),  " OnPreRender " , 
         " <script language='javascript'>alert('OnPreRender');</script> " );
}

 protected   override   void  OnPreRenderComplete(EventArgs e)
{
     base .OnPreRenderComplete(e);
     this .ClientScript.RegisterStartupScript(
         this .GetType(),  " OnPreRenderComplete " , 
         " <script language='javascript'>alert('OnPreRenderComplete');</script> " );
}

　　然后我们来看一下这些代码生成了什么样的客户端代码呢？如下（经过排版）：
< body >
     < form  name ="form1"  method ="post"  action ="Default.aspx"  id ="form1" >
        ……

         < script  src ="/ScriptResource.axd?..."  type ="text/javascript" ></ script >

         < script  language ="javascript" >
            alert( " The script inside the <form /> element. " );
         </ script >
        
         < script  language ='javascript' > alert('OnPreRender'); </ script >

         < script  type ="text/javascript" >
             <!--
            Sys.Application.queueScriptReference('MyScript1.js');
            Sys.Application.queueScriptReference('MyScript2.js');
             //  -->
         </ script >

         < script  language ='javascript' > alert('OnPreRenderComplete'); </ script >

         < script  type ="text/javascript" >
             <!--
            Sys.Application.initialize();
             //  -->
         </ script >
     </ form >
    
     < script  language ="javascript" >
        alert( " The script outside the <form /> element " )
     </ script >
</ body >

　　从这里可以看出使用不同的方式，在不同的位置或者时刻注册脚本代码时，它们在页面中出现的顺序。需要注意的是，Sys.Application.initialize函数被调用后，在大多数情况下后面的代码会 先于 外部脚本中的代码执行。也就是说，紧跟在Sys.Application.initialize函数之后的代码无法使用外部脚本内的数据。因此，如果有任何需要在页面被加载时执行的代码，一般来说一定要写在pageLoad函数中。如下：
function  pageLoad(sender, args)
{
     if  ( ! args.get_isPartialLoad())
    {
         //  页面第一次被加载
    }
     else
    {
         //  UpdatePanel更新
    }
}

　　args参数是一个Sys.ApplicationLoadEventArgs对象，它的isPartailLoad属性首次出现在 ASP.NET AJAX中，它就好比服务器端的IsPostBack属性一样，能够使用它很方便地判断Page Load事件的触发，是因为页面第一次加载，还是因为UpdatePanel被更新了。



本文转自 jeffz 51CTO博客，原文链接：http://blog.51cto.com/jeffz/60661，如需转载请自行联系原作者

文章标签：
JavaScript
前端开发
.NET
atlas
开发框架
关键词：
ASP脚本
.NET脚本
ASP.NET脚本
ASP.NET beta
技术小阿哥
目录
相关文章
红目香薰
|
2月前
|
SQL 开发框架 .NET
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
红目香薰
33 0
eisc
|
开发框架 .NET 应用服务中间件
ubuntu20 shell 脚本自动编译web安装网站环境 nginx asp.net(aspx) mariadb
ubuntu lnm asp.net 网站环境
eisc
231 0
技术小阿哥
|
关系型数据库 数据库 数据安全/隐私保护
C#.NET通用权限管理在DB2数据库上运行的脚本参考 - 通过程序将数据导入到目标数据库中
技术小阿哥
1290 0
科技小先锋
|
SQL 数据库
（喷血分享）利用.NET生成数据库表的创建脚本，类似SqlServer编写表的CREATE语句
科技小先锋
1106 0
余二五
|
前端开发 .NET API
ASP.NET MVC 4 Beta发布：强化Web API
余二五
1120 0
技术小美
|
开发框架 .NET
COM互操作 - 在VB 脚本里面使用.NET类型
技术小美
931 0
技术小美
|
Web App开发 JavaScript 前端开发
调试JavaScript/VB Script脚本程序（ASP篇）
技术小美
902 0
技术小美
|
JavaScript 前端开发 .NET
调试JavaScript/VB Script脚本程序（ASP.NET篇）
技术小美
918 0
科技小能手
|
数据安全/隐私保护 安全
脚本入侵 手工注入ASP
科技小能手
897 0
科技小能手
|
JavaScript 前端开发 .NET
总结：在asp脚本中选择日期
科技小能手
1092 0

热门文章

最新文章

  • 1
    C#/.NET/.NET Core优秀项目和框架2024年3月简报
  • 2
    【干货】Java开发者快速上手.NET指南
  • 3
    MQTT常见问题之调用.net sdk 报“不知道这样的主机”如何解决
  • 4
    .NET智慧手术室管理平台源码
  • 5
    .NET开源、免费、强大的交互式绘图库
  • 6
    .NET开源免费、功能强大的 Windows 截图录屏神器
  • 7
    .NET开源、免费、跨平台的Git可视化管理工具
  • 8
    .NET开源快速、强大、免费的电子表格组件
  • 9
    对象存储oss使用问题之OSS SDK .net 使用下载例程报错如何解决
  • 10
    .NET从入门到精通，零基础也能搞定的基础知识教程
  • 1
    对象存储oss使用问题之OSS SDK .net 使用下载例程报错如何解决
    21
  • 2
    r语言中对LASSO回归，Ridge岭回归和Elastic Net模型实现
    15
  • 3
    r语言中对LASSO，Ridge岭回归和Elastic Net模型实现
    11
  • 4
    采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
    10
  • 5
    中科院二区7.4分｜NET基因肿瘤分型+生存预后模型+分子对接
    17
  • 6
    .NET开源快速、强大、免费的电子表格组件
    20
  • 7
    .NET开源免费的Windows快速文件搜索和应用程序启动器
    20
  • 8
    【干货】Java开发者快速上手.NET指南
    31
  • 9
    .NET开源、免费、强大的交互式绘图库
    25
  • 10
    .NET开源免费、功能强大的 Windows 截图录屏神器
    24

    • 相关课程

    更多
  • Python Web 框架 Django 快速入门
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段
  • Python Web 框架 Flask 快速入门
  • Python Web开发基础

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 编程语言如何演化—— 以 JS 的 private 为例
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 语言入门-1：环境构建
  • WEB网页编程实战
  • Python网络通信程序典型应用
  • Web Terminal环境使用指南
  • 基于函数计算快速搭建Zblog等传统应用框架
  • 搭建Java Web开发环境
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）