备案控制台
开发者社区 开发与运维 文章 正文

转TerreyLee AJAX入门系列2——ScriptManager的理解总结

2014-04-15 785
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： ScriptManager的功能之一就是处理页面上局部更新，对于这点，我想大家都知道。但是他工作的原理到底是什么呢，这个暂且不从正面来回答。 我们这样想一下，目前能够真正实现局部刷新的就是js+xml+dom等编写的ajax代码，而ScriptManager竟然也能实现局部刷新，必然是通过什么手段最终转化成了js等的ajax代码。

ScriptManager的功能之一就是处理页面上局部更新，对于这点，我想大家都知道。但是他工作的原理到底是什么呢，这个暂且不从正面来回答。

我们这样想一下，目前能够真正实现局部刷新的就是js+xml+dom等编写的ajax代码，而ScriptManager竟然也能实现局部刷新，必然是通过什么手段最终转化成了js等的ajax代码。这种猜想我们从哪里去验证一下呢，且看下面。

1.下面引用了TerreyLee的例子，稍作改动后如下，没有带任何Ajax控件

 


前台代码：
    <form id="form1" runat="server">
    <div>

            <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
            <asp:DropDownList ID="DropDownList1" runat="server"  AutoPostBack="true" 
                 onselectedindexchanged="DropDownList1_SelectedIndexChanged">
              <asp:ListItem Value="0">==请选择==</asp:ListItem>
              <asp:ListItem Value="1">Red</asp:ListItem>
              <asp:ListItem Value="2">Yellow</asp:ListItem>
              <asp:ListItem Value="3">Green</asp:ListItem>
           </asp:DropDownList>         
    </div>
    </form>


后台代码：

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {

        Calendar1.DayStyle.BackColor = System.Drawing.Color.FromName(DropDownList1.SelectedItem.Text);
      
    }

 

运行结果：

                            

看到状态栏带有刷新进度条。

 

查看一下服务器端返回的源文件：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 

</title></head> 
<body> 
<form name="form1" method="post" action="Default.aspx" id="form1"> 
<div> 
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> 
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> 
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" /> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTkxMjIzNTI5NQ9kFgICAw9kFgICAw8QZGQWAWZkZJtbkkCYOre8ffrFCqW5LPWkPTtr" /> 
</div> 

<script type="text/javascript"> 
//<![CDATA[ 
var theForm = document.forms['form1']; 
if (!theForm) { 
theForm = document.form1; 
} 
function __doPostBack(eventTarget, eventArgument) { 
if (!theForm.onsubmit || (theForm.onsubmit() != false)) { 
theForm.__EVENTTARGET.value = eventTarget; 
theForm.__EVENTARGUMENT.value = eventArgument; 
theForm.submit(); 
} 
} 
//]]> 
</script> 
<div> 

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWMgLIi4jfDQLd2/zADgK38ereCQLa96nuBQLa94WJDQLa9/GkBgLa9+3fDwLa99l6Atr39cMFAtr34f4OApeUoIgLApeUnKMMApeUiN4FApeU5PkOApeU0JQGApeUzM8PApeUuGsCl5SUhggCl5TA7g4Cl5S8igYC8q3OkgEC8q26zgoC8q2W6QMC8q2ChAsC8q3+vwwC8q3q2gUC8q3G9Q4C8q2ykQYC8q3u+QQC8q3alAwC7brsvQ8C7brYWALturT0CQLtuqCvAQLtupzKCgLtuojlAwLtuuSACwLtutC7DALtuoyEAQLtuvi/CgLI04vIBQLI0+fjDgLI09OeBgLI08+5DwLI07tVAp3kj+UKAo2LpYsGApKLpYsGApOLpYsGApCLpYsGdr/l7ekdPMwRDZCnhQ2pPfOpOcI=" /> 
</div> 
<div> 

<SPAN style="COLOR: #ff0000"><SPAN style="COLOR: #339966"> <table id="Calendar1“>...</table> 
</SPAN> <select name="DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)" id="DropDownList1"> 
<option selected="selected" value="0">==请选择==</option> 
<option value="1">Red</option> 
<option value="2">Yellow</option> 
<option value="3">Green</option> 

</select> </SPAN> 
</div> 
</form> 
</body> 
</html>

 
日期控件转换成了table（绿色部分），下拉列表转换成了select标签（红色部分）等，所有的一切都转换成了浏览器能解释的html标记语言 没有什么特别的

 2.下面是带有ScriptManager控件的例子

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
   
</title></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTkxMjIzNTI5NQ9kFgICAw9kFgICAw8QZGQWAWZkZJtbkkCYOre8ffrFCqW5LPWkPTtr" />
</div>
   
<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script> 
<div>
   
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWMgLIi4jfDQLd2/zADgK38ereCQLa96nuBQLa94WJDQLa9/GkBgLa9+3fDwLa99l6Atr39cMFAtr34f4OApeUoIgLApeUnKMMApeUiN4FApeU5PkOApeU0JQGApeUzM8PApeUuGsCl5SUhggCl5TA7g4Cl5S8igYC8q3OkgEC8q26zgoC8q2W6QMC8q2ChAsC8q3+vwwC8q3q2gUC8q3G9Q4C8q2ykQYC8q3u+QQC8q3alAwC7brsvQ8C7brYWALturT0CQLtuqCvAQLtupzKCgLtuojlAwLtuuSACwLtutC7DALtuoyEAQLtuvi/CgLI04vIBQLI0+fjDgLI09OeBgLI08+5DwLI07tVAp3kj+UKAo2LpYsGApKLpYsGApOLpYsGApCLpYsGdr/l7ekdPMwRDZCnhQ2pPfOpOcI=" />
</div>
    <div>
   
<SPAN style="COLOR: #ff0000"><SPAN style="COLOR: #339966">            <table id="Calendar1“>...</table>
</SPAN>            <select name="DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)" id="DropDownList1">
    <option selected="selected" value="0">==请选择==</option>
    <option value="1">Red</option>
    <option value="2">Yellow</option>
    <option value="3">Green</option>
   
</select>  </SPAN>       
    </div>
    </form>
</body>
</html>
 

 

<form id="form1" runat="server">
    <div>
<STRONG><SPAN style="COLOR: #ff0000">        <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        </asp:ScriptManager>
</SPAN></STRONG>            <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
            <asp:DropDownList ID="DropDownList1" runat="server"  AutoPostBack="true" 
                 onselectedindexchanged="DropDownList1_SelectedIndexChanged">
              <asp:ListItem Value="0">==请选择==</asp:ListItem>
              <asp:ListItem Value="1">Red</asp:ListItem>
              <asp:ListItem Value="2">Yellow</asp:ListItem>
              <asp:ListItem Value="3">Green</asp:ListItem>
           </asp:DropDownList>         
    </div>
    </form>

 

没什么特别，只是添加了一个scriptManager,当然运行结果不会跟第一个实例有什么区别，因为页面内没有可以让ScriptManager局部更新的组件。

我们看一下服务器返回的html代码

 

 

   
   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 
   
</title></head> 
<body> 
    <form name="form1" method="post" action="Default.aspx" id="form1"> 
<div> 
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> 
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> 
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" /> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE3MDQ3NDcyNDcPZBYCAgMPZBYCAgUPEGRkFgFmZGRJzKmEsYB5gVwYRx8dFV3x6MurTw==" /> 
</div> 
   
<script type="text/javascript">  
//<![CDATA[ 
var theForm = document.forms['form1']; 
if (!theForm) { 
    theForm = document.form1; 
} 
function __doPostBack(eventTarget, eventArgument) { 
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) { 
        theForm.__EVENTTARGET.value = eventTarget; 
        theForm.__EVENTARGUMENT.value = eventArgument; 
        theForm.submit(); 
    } 
} 
//]]> 
</script> 
   
   
<SPAN style="COLOR: #ff0000"><script src="/AJAX/WebResource.axd?d=WpudyoSACkhJZI41rIr6Gw2&t=634172191729687500" type="text/javascript"></script> 
   
   
<script src="/AJAX/ScriptResource.axd?d=BRDs2LbU_LAg6ZAoegBg0A1ZmMB4Gl-EP20pmeKgxP1i7fAhHRAcUfOQW96vJTq8YX82ufeV_8av8uEdGjhLBt36ynpIinbuj4reqRYgPiw1&t=5ccefe3d" type="text/javascript"></script> 
<script type="text/javascript">  
//<![CDATA[ 
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax 客户端框架未能加载。'); 
//]]> 
</script> 
   
<script src="/AJAX/ScriptResource.axd?d=BRDs2LbU_LAg6ZAoegBg0A1ZmMB4Gl-EP20pmeKgxP1i7fAhHRAcUfOQW96vJTq82Fnxq88VMyVxCirTmVquRfdErM4nM7jSYzP2oTAbs70SDfMUJ-ZIDBycHzaXmnVW0&t=5ccefe3d" type="text/javascript"></script> 
</SPAN><div> 
   
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWMgLGvacPAt3b/MAOArfx6t4JAtr3qe4FAtr3hYkNAtr38aQGAtr37d8PAtr32XoC2vf1wwUC2vfh/g4Cl5SgiAsCl5ScowwCl5SI3gUCl5Tk+Q4Cl5TQlAYCl5TMzw8Cl5S4awKXlJSGCAKXlMDuDgKXlLyKBgLyrc6SAQLyrbrOCgLyrZbpAwLyrYKECwLyrf6/DALyreraBQLyrcb1DgLyrbKRBgLyre75BALyrdqUDALtuuy9DwLtuthYAu26tPQJAu26oK8BAu26nMoKAu26iOUDAu265IALAu260LsMAu26jIQBAu26+L8KAsjTi8gFAsjT5+MOAsjT054GAsjTz7kPAsjTu1UCneSP5QoCjYuliwYCkouliwYCk4uliwYCkIuliwbzSm3y5GzwZploQy1UEn46DjrBBg==" /> 
</div> 
<SPAN style="COLOR: #ff0000"><SPAN style="COLOR: #000000">    <div> 
</SPAN>        <script type="text/javascript">  
//<![CDATA[ 
<STRONG>Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1')); 
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90); 
</STRONG>//]]> 
</script> 
</SPAN>                    <select name="DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)" id="DropDownList1"> 
    <option selected="selected" value="0">==请选择==</option> 
    <option value="1">Red</option> 
    <option value="2">Yellow</option> 
    <option value="3">Green</option> 
   
</select>          
    </div>  
<SPAN style="COLOR: #ff0000"><script type="text/javascript">  
//<![CDATA[ 
Sys.Application.initialize(); 
//]]> 
</script> 
</SPAN></form> 
</body> 
</html>

相对于第一个实例，添加了一些js引用和一些js代码，尤其要注意加粗的地方，这里实际就是我们能实现刷新的重要部分。现在应该知道，为什么只有ScriptManager不能实现局部刷新了吧，因为在Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90)这句话中，没有可更新的控件。

可能到这里，还是不太相信添加这些代码就能实现局部刷新啦，我们继续往下看

 

3.带有ScriptManager和UpdatePanel控件的实例

 

 

<form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <SPAN style="COLOR: #ff0000"><asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
          <ContentTemplate>
</SPAN>            <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
            <asp:DropDownList ID="DropDownList1" runat="server"  AutoPostBack="true" 
                 onselectedindexchanged="DropDownList1_SelectedIndexChanged">
              <asp:ListItem Value="0">==请选择==</asp:ListItem>
              <asp:ListItem Value="1">Red</asp:ListItem>
              <asp:ListItem Value="2">Yellow</asp:ListItem>
              <asp:ListItem Value="3">Green</asp:ListItem>
           </asp:DropDownList> 
        <SPAN style="COLOR: #ff0000">   </ContentTemplate>
         </asp:UpdatePanel>   </SPAN>     
    </div>
    </form>

这一步其实也没做什么，只是添加了UpdatePanel控件。

 

运行结果：


注意状态栏可是无刷新哦

看一下服务器端返回的html代码

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 
   
</title></head> 
<body> 
    <form name="form1" method="post" action="Default.aspx" id="form1"> 
<div> 
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> 
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> 
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" /> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1OTA0NzEyNTMPZBYCAgMPZBYCAgMPZBYCZg9kFgICAw8QZGQWAWZkZNKOh9DNKQIiu+lJISv5z1xLDKNA" /> 
</div> 
   
<script type="text/javascript">  
//<![CDATA[ 
var theForm = document.forms['form1']; 
if (!theForm) { 
    theForm = document.form1; 
} 
function __doPostBack(eventTarget, eventArgument) { 
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) { 
        theForm.__EVENTTARGET.value = eventTarget; 
        theForm.__EVENTARGUMENT.value = eventArgument; 
        theForm.submit(); 
    } 
} 
//]]> 
</script> 
   
   
<script src="/AJAX/WebResource.axd?d=WpudyoSACkhJZI41rIr6Gw2&t=634172191729687500" type="text/javascript"></script> 
   
   
<script src="/AJAX/ScriptResource.axd?d=BRDs2LbU_LAg6ZAoegBg0A1ZmMB4Gl-EP20pmeKgxP1i7fAhHRAcUfOQW96vJTq8YX82ufeV_8av8uEdGjhLBt36ynpIinbuj4reqRYgPiw1&t=5ccefe3d" type="text/javascript"></script> 
<script type="text/javascript">  
//<![CDATA[ 
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax 客户端框架未能加载。'); 
//]]> 
</script> 
   
<script src="/AJAX/ScriptResource.axd?d=BRDs2LbU_LAg6ZAoegBg0A1ZmMB4Gl-EP20pmeKgxP1i7fAhHRAcUfOQW96vJTq82Fnxq88VMyVxCirTmVquRfdErM4nM7jSYzP2oTAbs70SDfMUJ-ZIDBycHzaXmnVW0&t=5ccefe3d" type="text/javascript"></script> 
<div> 
   
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWMgKmh4YaAt3b/MAOArfx6t4JAtr3qe4FAtr3hYkNAtr38aQGAtr37d8PAtr32XoC2vf1wwUC2vfh/g4Cl5SgiAsCl5ScowwCl5SI3gUCl5Tk+Q4Cl5TQlAYCl5TMzw8Cl5S4awKXlJSGCAKXlMDuDgKXlLyKBgLyrc6SAQLyrbrOCgLyrZbpAwLyrYKECwLyrf6/DALyreraBQLyrcb1DgLyrbKRBgLyre75BALyrdqUDALtuuy9DwLtuthYAu26tPQJAu26oK8BAu26nMoKAu26iOUDAu265IALAu260LsMAu26jIQBAu26+L8KAsjTi8gFAsjT5+MOAsjT054GAsjTz7kPAsjTu1UCneSP5QoCjYuliwYCkouliwYCk4uliwYCkIuliwYWM6Mt9LLccy445bZ7PABY3EeS5w==" /> 
</div> 
    <div> 
        <script type="text/javascript">  
//<![CDATA[ 
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1')); 
<SPAN style="COLOR: #ff0000">Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tUpdatePanel1'], [], [], 90); 
</SPAN>//]]> 
</script> 
   
        <div id="UpdatePanel1"> 
      
                    <select name="DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)" id="DropDownList1"> 
        <option selected="selected" value="0">==请选择==</option> 
        <option value="1">Red</option> 
        <option value="2">Yellow</option> 
        <option value="3">Green</option> 
   
    </select> 
            
</div> 
    </div>  
<script type="text/javascript">  
//<![CDATA[ 
Sys.Application.initialize(); 
//]]> 
</script> 
</form> 
</body> 
</html>

相对于第二个实例的源码，我们可以看到差距是在红色的部分，多出了ScriptManager局部刷新的控件UpdatePanel1。

通过这三个实例呢，我们应该能够理解，为什么ScirptManager能够实现局部刷新了，关键还是引入了我们在源码中看到的js代码，真是这些代码实现了ScirptManager控件的局部刷新功能。

 

也可参考http://www.cnblogs.com/pangxiaoliang/archive/2009/06/28/1512758.html 写的也很详细，很不错。

文章标签：
.NET
JavaScript
前端开发
Web App开发
关键词：
ajax入门
ajax.js入门
ajax.js总结
ajax.js scriptmanager
醉意人间
目录
相关文章
童小纯
|
2月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解（学习总结---从入门到深化）
Ajax技术【Ajax 实战】(二)-全面详解（学习总结---从入门到深化）
童小纯
25 0
啊理八八
|
9月前
|
JSON 前端开发 JavaScript
前端AJAX入门到实战，学习前端框架前必会的（ajax+node.js+webpack+git）（一）
前端AJAX入门到实战，学习前端框架前必会的（ajax+node.js+webpack+git）（一）
啊理八八
543 0
童小纯
|
2月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解（学习总结---从入门到深化）
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解（学习总结---从入门到深化）
童小纯
65 1
宁波阿成.
|
2月前
|
XML JSON 前端开发
Ajax – JSON入门指南
Ajax – JSON入门指南
宁波阿成.
20 1
童小纯
|
2月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解（学习总结---从入门到深化）(下)
Ajax技术【Ajax 实战】(二)-全面详解（学习总结---从入门到深化）
童小纯
20 1
童小纯
|
2月前
|
前端开发 JavaScript fastjson
Ajax技术【Ajax 实战】(二)-全面详解（学习总结---从入门到深化）(上)
Ajax技术【Ajax 实战】(二)-全面详解（学习总结---从入门到深化）
童小纯
34 1
夏志121
|
2月前
|
XML 前端开发 JavaScript
AJAX概念及入门案例
AJAX概念及入门案例
夏志121
30 0
iOS学霸
|
9月前
|
JSON JavaScript 前端开发
开心档-软件开发入门之​​Vue.js Ajax(vue-resource)
开心档-软件开发入门之​​Vue.js Ajax(vue-resource)
iOS学霸
34 0
小周不摆烂
|
12月前
|
前端开发 JavaScript API
AJAX-day01-AJAX入门
AJAX-day01-AJAX入门
小周不摆烂
62 0
greework
|
XML 前端开发 JavaScript
前端|AJAX入门
前端|AJAX入门
greework
80 0