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

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="">==请选择==</asp:ListItem>

              <asp:ListItem Value="">Red</asp:ListItem>

              <asp:ListItem Value="">Yellow</asp:ListItem>

              <asp:ListItem Value="">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 写的也很详细，很不错。

转TerreyLee AJAX入门系列2——ScriptManager的理解总结的更多相关文章

ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）
UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...
ASP.NET AJAX入门系列（1）：概述
经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...
ASP.NET AJAX入门系列
ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...
ASP.NET AJAX入门系列（2）：使用ScriptManager控件
ScriptManager控件包括在ASP.NET 2.0 AJAX Extensions中,它用来处理页面上的所有组件以及页面局部更新,生成相关的客户端代理脚本以便能够在JavaScript中访问W ...
ASP.NET AJAX入门系列（11）：在多个UpdatePanle中使用Timer控件
本文将使用Timer控件更新两个UpdatePanel控件,Timer控件将放在UpdatePanel控件的外面,并将它配置为UpdatePanel的触发器,翻译自官方文档. 主要内容在多个Upda ...
ASP.NET AJAX入门系列（10）：Timer控件简单使用
本文主要通过一个简单示例,让Web页面在一定的时间间隔内局部刷新,来学习一下ASP.NET AJAX中的服务端Timer控件的简单使用. 主要内容 Timer控件的简单使用 1．添加新页面并切换到设计 ...
ASP.NET AJAX入门系列（9）：在母版页中使用UpdatePanel
本文简单介绍一下在母版页中使用UpdatePanel控件,翻译自官方文档. 主要内容 1．添加UpdatePanel控件到Content Page 2．通过Master Page刷新UpdatePan ...
ASP.NET AJAX入门系列（8）：自定义异常处理
在UpdatePanel控件异步更新时,如果有错误发生,默认情况下会弹出一个Alert对话框显示出错误信息,这对用户来说是不友好的,本文看一下如何在服务端和客户端脚本中自定义异常处理,翻译自官方文档. ...
ASP.NET AJAX入门系列（7）：使用客户端脚本对UpdateProgress编程
在本篇文章中,我们将通过编写JavaScript来使用客户端行为扩展UpdateProgress控件,客户端代码将使用ASP.NET AJAX Library中的PageRequestManager, ...

随机推荐

linux 进程控制笔记
进程创建普通函数调用完成后,最多返回(return)一次,但fork/vfork会返回二次,一次返回给父进程,一次返回给子进程父进程的返回值为子进程的进程ID,子进程的返回值为0 1.pid_t ...
mysql学习笔记之基础篇
数据库学习之基础篇 ① 开放数据库互连(Open Database Connectivity,ODBC ② 结构化查询语言(Structured Query Language) ③ 进入mysql:M ...
安装mysql 5.5.14 报错
提示cmake nod foundyum install cmake 原因是曾经服务器安装过mysql数据库Installing MySQL system tables...101223 14:28: ...
【Go】 http webserver
示例1: package main import ( "fmt" "net/http" "encoding/json" ) var i in ...
利用getchar()消除多余字符数据(主要是“回车”)
Nginx + Tomcat 动静分离实现负载均衡（转）
0.前期准备使用Debian环境.安装Nginx(默认安装),一个web项目,安装tomcat(默认安装)等. 1.一份Nginx.conf配置文件 # 定义Nginx运行的用户和用户组如果对 ...
深入浅出百度地图API开发系列（1）：前言
百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能 ...
Ext学习-基础概念，核心思想介绍
1.目标本阶段的目标是通过学习一些基础知识来对EXTJS有个整体的了解,知道EXTJS的基础语法,核心设计思想等等 2.内容 1.基础部分学习 2.EXTJS类系统介绍 3.EXTJ ...
Unix守护进程
问题描述: Unix守护进程问题解决: Unix守护进程没有控制终端,终端名设置为问号(?),终端前台进程组ID设置(TPGID)为-1 守护进程编写规则: (1) ...
Window 2008 R2 + IIS7.5 + VS2013 错误代码 0x80070002
HTTP 错误 404.0 - Not Found 您要找的资源已被删除.已更名或暂时不可用.详细错误信息模块 IIS Web Core通知 MapRequest Handler处理程序 Static ...

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

转TerreyLee AJAX入门系列2——ScriptManager的理解总结的更多相关文章

随机推荐

热门专题