为什么 ASP.NET AJAX UpdatePanels 是危险的？

为什么 ASP.NET AJAX UpdatePanels 是危险的？

 

原文地址: http://encosia.com/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous/

 

如果你像我一样，禁不住在每个页面上都放上一堆UpdatePanels，爱上AJAX带来的好处。UpdatePanel使得每个人都可以很容易的实现AJAX，即使不了解背后实际上发生了什么。

不幸的是，不了解client/server交互的机制让你很容易翻跟头。让我举个你可能很熟悉的例子，看看背后发生了什么：

<asp:ScriptManager ID="ScriptManager1" runat="server" />
    
    

<asp:UpdatePanel runat="server" ID="up1">
    
    

 <ContentTemplate>
    
    

   <asp:Label runat="server" ID="Label1" Text="Update Me!" /><br />
    
    

   <asp:Button runat="server" ID="Button1" 
    
    

     Text="Postback Update" OnClick="Button1_Click" />
    
    

 </ContentTemplate>
    
    

</asp:UpdatePanel>
    
    

protected void Button1_Click(object sender, EventArgs e)
    
    

{
    
    

  Label1.Text = DateTime.Now.ToLongDateString();
    
    

}
    
    

够简单吧。单击Button1，触发一个对当前时间/日期的异步请求，并显示在Label1上。听起来非常简单，看看完成此次异步回送，HTTP post和response的内容：

 

 

想不到吧，不是吗？为了显示一个只有22个字符的字符串，却发生和接受了一大堆可恶的数据。这对不经常使用的功能来说是可以结实的，但是在高负载时，有可能崩溃。幸运的是，作为ASP.NET AJAX框架的一部分，微软为我们提供了一种更有效的方法，完成同样的工作。

Web Methods

Web methods允许ASP.NET AJAX页面直接执行一个页面的静态方法，使用JSON (JavaScript Object Notation)。JSON基本上可以说是SOAP的一个子集，它特别适合于客户与服务器间的轻量级通信。关于如何实现web method和JSON的更多信息，请参考微软的Exposing Web Services to Client Script in ASP.NET AJAX。

不是回送和接受HTML标记来完全替换UpdatePanel中的内容，我们可以使用一个web method仅仅请求我们感兴趣的信息：

<asp:ScriptManager ID="ScriptManager1" runat="server" 
    
    

  EnablePageMethods="true" />
    
    

<script language="javascript">
    
    

 function UpdateTime() {
    
    

   PageMethods.GetCurrentDate(OnSucceeded, OnFailed); 
    
    

 }
    
    

 function OnSucceeded(result, userContext, methodName) {
    
    

   $get('Label1').innerHTML = result; 
    
    

 }
    
    

 function OnFailed(error, userContext, methodName) {
    
    

   $get('Label1').innerHTML = "An error occured.";
    
    

 }
    
    

</script>
    
    

<asp:Label runat="server" ID="Label1" Text="Update Me!" /><br />
    
    

<input type="button" id="Button2" value="Web Method Update" 
    
    

  onclick="UpdateTime();" />
    
    

[WebMethod]
    
    

public static string GetCurrentDate()
    
    

{
    
    

  return DateTime.Now.ToLongDateString();
    
    

}
    
    

通过这种方法，我们完全不用POST出现在UpdatePanel中的内容，同时服务器响应的内容也只是我们请求的数据：

使用JSON，往返HTTP的全部数据只有24个字节，而UpdatePanel方法有872个字节。大约有4000%的改进。

不仅仅是显著的减小了网络流量，服务器也不必实例化UpdatePanel中的控件，带它们走过它们的生命周期，并将HTML呈现到浏览器。

虽然我非常赞赏UpdatePanel固有的简单性，然而我们必须有效的使用它。如果在项目中过度使用UpdatePanel，那么该好好思考一下了。