知识大全当心异步刷新后的脚本文件加载

Posted 2022-07-21 操作

篇首语：鸟往明处飞，人往高处去。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全当心异步刷新后的脚本文件加载相关的知识，希望对你有一定的参考价值。

　　重现问题　　我们现在编写一个示例来重现一个异步刷信的问题　　首先我们建立一个名为 ScriptHandler ashx 的Generic Handler 它的作用是模拟一个脚本文件可以看出加载这么一个脚本文件是一个很耗时的操作

　　 ScriptHandler ashx <%@ WebHandler Language= C# Class= ScriptHandler %> using System; using System Web; public class ScriptHandler : IHttpHandler public void ProcessRequest (HttpContext context) context Response ContentType = text/javascript ; System Threading Thread Sleep( ); context Response Write( Sys Application notifyScriptLoaded(); ); //

　　然后我们创建一个简单的页面放置一个UpdatePanel和两个按钮 Page

　　 <asp:UpdatePanel ID= UpdatePanel runat= server > <ContentTemplate> <%= DateTime Now %><br /> <asp:Button ID= Button runat= server Text= Load Script File OnClick= Button _Click /> <asp:Button ID= Button runat= server Text= Partial Rendering OnClick= Button _Click /> </ContentTemplate> </asp:UpdatePanel>

　　下面的代码是响应按钮Click事件的实现当我们点击 Load Script File 按钮时 ScriptHandler ashx会被作为脚本文件添加到页面上而 Partial Rendering 则会发起一个需要等待很长时间的异步刷新

　　 Event Handler protected void Button _Click(object sender EventArgs e) ScriptManager RegisterClientScriptInclude(this Page this GetType() key ScriptHandler ashx?m= + new Random(DateTime Now Millisecond) Next()); protected void Button _Click(object sender EventArgs e) Thread Sleep( );

　　您可以点击这里下载这个重现问题的示例并将它部署在您的机器上您也可以点击这里察看这个页面请一步一步跟着我来浏览这个页面我会示范一下这个问题打开页面我们可以看到时间和两个按钮点击 Load Script File 按钮并等待时间更新在时间更新后点击 Partial Rendering 按钮　　一般来说最后一步之后大约秒多钟时间将会被跟新但是现在您会发现直到您重新点击某个按钮之后时间才会更新事实上最后一步的任何操作例如脚本加载 Hidden Field的注册都失败了客户端生命周期的事件也不会触发

　　原因何在？　　在我分析客户端异步刷新的机制之前我想简单的解释一些JavaScript语言和DOM操作的基本特性使用JavaScript来操作页面中的DOM是AJAX技术的基础有人说 JavaScript编程是没有多线程的因此我们能够认为它始终线程安全我同意这一点 JavaScript的编程模型的确没有多线程的机制它是线程安全的——从理论上来说的确是这样　　但是使用JavaScript进行编程还是会遇到同步问题因为有些操作是异步得尤其是在我们作一些DOM操作时在AJAX编程中最著名的异步操作自然就是XMLHttpRequest对象的send方法当我们调用了send方法之后下面的代码并不会被阻塞而是会继续执行下去我们还会遇到别的异步操作例如开发人员经常会发现他们无法在页面中动态创建了图片（<img />）或者添加了脚本文件引用（<script />）之后立即获得图片得尺寸或者执行文件中定义的方法这是因为下载图片和加载脚本文件都是异步操作在大多数情况下异步操作无法立即生效它往往会使用一些类似于回调函数的机制来通知开发人员事情已经准备好了　　我们不难理解异步操作可能会带来同步性方面的问题我画了一幅示意图来展示异步刷新机制中可能存在的同步和异步操作请注意在ASP NET AJAX的设计中 PageRequestManager使用了标准的Singleton模式因此在整个页面中只存在一个PRM实例这看起来还真是一个同步问题的温床 /P>

　　//img educity cn/img_ / / / png >

　　这并不是一幅客户端生命周期的示意图因为我要指出问题是如何实现的因此需要表现的是异步刷新过程中的一些细节请注意图中橙色的箭头它代表了异步操作中的等待实现它们是唯一可能造成同步问题的地方过程中其余部分不会被中断这是语言特性决定的　　图中深蓝色的三个部分导致了同步问题的发生如果我说这些部分的本意是为了避免问题的发生您是否会觉得惊讶呢？让我们通过分析相关实现来看一下这三个关键步骤是如何工作的

　　 cellPadding= width= align=center bgColor=#f f f border= heihgt= > 实现 function Sys$WebForms$PageRequestManager$_onFormSubmit(evt) // // prepare the request object var request = new Sys Net WebRequest(); // // initialize request var handler = this _get_eventHandlerList() getHandler( initializeRequest ); // // Step : abort the existing async postback this abortPostBack(); // Step : replace the request object this _request = request; // invoke the request request invoke(); // function Sys$WebForms$PageRequestManager$abortPostBack() if (!this _processingRequest && this _request) this _request get_executor() abort(); // Step : clear the request object this _request = null; function Sys$WebForms$PageRequestManager$_onFormSubmitCompleted(sender eventArgs) this _processingRequest = true; // // Step : validate the request if (!this _request || sender get_webRequest() !== this _request) return; // // execute and load scripts scriptLoader loadScripts( Function createDelegate(this this _scriptsLoadComplete) null null); function Sys$WebForms$PageRequestManager$_scriptsLoadComplete() // // Page loaded this _pageLoaded(false); // Step : end postback this _endPostBack(null this _response); // function Sys$WebForms$PageRequestManager$_endPostBack(error response) this _processingRequest = false; // Step : clear the request this _request = null; //

cha138/Article/program/ASP/201311/21769

知识大全 当心异步刷新后的脚本文件加载

知识大全当心异步刷新后的脚本文件加载