读源代码学Asp.net Ajax(一)
本文希望为有一定基础的Asp.net Ajax同学提供另外一个视角,进一步的分析了解Asp.net Ajax的运行机制。
首先,源代码从何而来?
我是用的笨方法(如果大家有好办法,一定给我留言哟!):
在vs2008中,
1. 建一个普通的aspx页面,F5,然后ViewSource,查看源代码;
2. 在页面引入ScriptManager,F5,再查看源代码;并保存该页面。
3. 将两份源代码进行比较。
通过比较,我们发现,引入了ScriptManager的页面源代码,多出了以下代码:
__doPostBack函数
asp.net页面机制的核心函数,但与本系列主题关系不大,且网上资料极多,本系列暂时略过
一些好像js文件引用语法的代码:
代码咦?这种代码是什么意思?引用的*.axd文件,而且还有d=*,t=*的参数。
一些似乎是初始化(initialize)的代码:
代码
无论如何,先找到ScriptResource.axd文件吧。前面说过,我们查看aspx页面源代码的同时,还保存了aspx页面,因此在保存html文件的同时,还会生产一个文件夹;就在这个文件夹下,我们清清楚楚的发现,3个*.axd文件。试试看,居然能用记事本打开!里面就是不折不扣的js代码呀。
对于ScriptResource.axd,我简单的解释一下(其实我的理解也不深,呵呵):
1. 和.aspx一样,axd也是一个后缀名(基本上等于废话)
2. asp.net通过检查文件的后缀名,对文件采取不同的处理(HttpHandler)
3. 这种配置可以在web.config里找到
代码上面这句话的意思就是,对ScriptResource.axd这种“路径”,调用System.Web.Handlers.ScriptResourceHandler类进行处理。有兴趣的同学可以用reflactor看一看这个类,这里不展开了。
而ScriptResource.axd后面带的参数:d是指经过编码的资源键,t是一个时间戳,指示这个程序集最后一次修改时间。再次加载这个页面时,页面根据以上两个参数判断资源是否修改过,来决定重新加载或调用浏览器缓存。
WebResource.axd是类似的,但是asp.net2.0的机制,此处也只能暂时略过了。
OK!就此开始我们的探索之旅吧。
我们首先打开ScriptResource.axd文件。
今天我们先看这两段代码:
代码这就是“委托”和“回调”的实现。
我们发现,这两个方法里面使用了这两个函数apply()和call(),这两个函数,是我们进行下一步学习的关键。下一篇我们专门研究吧!
最后废话几句:
其实,不仅Ajax,就是asp.net本身(指普通的WebForm),也只是(而且只能)利用JavaScript,form表单和服务端交互,关注研究aspx生成的页面,能帮助我们更深入的了解asp.net的运行机制。
首先,源代码从何而来?
我是用的笨方法(如果大家有好办法,一定给我留言哟!):
在vs2008中,
1. 建一个普通的aspx页面,F5,然后ViewSource,查看源代码;
2. 在页面引入ScriptManager,F5,再查看源代码;并保存该页面。
3. 将两份源代码进行比较。
通过比较,我们发现,引入了ScriptManager的页面源代码,多出了以下代码:
__doPostBack函数
asp.net页面机制的核心函数,但与本系列主题关系不大,且网上资料极多,本系列暂时略过
一些好像js文件引用语法的代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script src="/WebSite1/WebResource.axd?d=gu6dukLklJSIqP50ryiLdA2&t=633924497349218750" type="text/javascript"></script>
<script src="/WebSite1/ScriptResource.axd?d=DtElDd7tk8ezOcfu5ceM7a0aJRKvNJXhtJklJTwP_eJvqJ6_MEFJff0KgiIxspCLhj3QOdNhPGEeJspoRkqzWGYl4vK7CM_KcaFGG0E_EuY1&t=763bd652" type="text/javascript"></script>
<script src="/WebSite1/ScriptResource.axd?d=DtElDd7tk8ezOcfu5ceM7a0aJRKvNJXhtJklJTwP_eJvqJ6_MEFJff0KgiIxspCLTdp4O_K8y1MspVEeDbwrWtWBunZBt5t5QheDMWS7niiJtyuaRzTdlKxODRDyBKUC0&t=763bd652" type="text/javascript"></script>
<script src="/WebSite1/ScriptResource.axd?d=DtElDd7tk8ezOcfu5ceM7a0aJRKvNJXhtJklJTwP_eJvqJ6_MEFJff0KgiIxspCLhj3QOdNhPGEeJspoRkqzWGYl4vK7CM_KcaFGG0E_EuY1&t=763bd652" type="text/javascript"></script>
<script src="/WebSite1/ScriptResource.axd?d=DtElDd7tk8ezOcfu5ceM7a0aJRKvNJXhtJklJTwP_eJvqJ6_MEFJff0KgiIxspCLTdp4O_K8y1MspVEeDbwrWtWBunZBt5t5QheDMWS7niiJtyuaRzTdlKxODRDyBKUC0&t=763bd652" type="text/javascript"></script>
一些似乎是初始化(initialize)的代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
Sys.Application.initialize();
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
Sys.Application.initialize();
无论如何,先找到ScriptResource.axd文件吧。前面说过,我们查看aspx页面源代码的同时,还保存了aspx页面,因此在保存html文件的同时,还会生产一个文件夹;就在这个文件夹下,我们清清楚楚的发现,3个*.axd文件。试试看,居然能用记事本打开!里面就是不折不扣的js代码呀。
对于ScriptResource.axd,我简单的解释一下(其实我的理解也不深,呵呵):
1. 和.aspx一样,axd也是一个后缀名(基本上等于废话)
2. asp.net通过检查文件的后缀名,对文件采取不同的处理(HttpHandler)
3. 这种配置可以在web.config里找到
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<httpHandlers>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>
</httpHandlers>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>
</httpHandlers>
而ScriptResource.axd后面带的参数:d是指经过编码的资源键,t是一个时间戳,指示这个程序集最后一次修改时间。再次加载这个页面时,页面根据以上两个参数判断资源是否修改过,来决定重新加载或调用浏览器缓存。
WebResource.axd是类似的,但是asp.net2.0的机制,此处也只能暂时略过了。
OK!就此开始我们的探索之旅吧。
我们首先打开ScriptResource.axd文件。
今天我们先看这两段代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
Function.createCallback = function Function$createCallback(method, context) {
/// <summary locid="M:J#Function.createCallback" />
/// <param name="method" type="Function"></param>
/// <param name="context" mayBeNull="true"></param>
/// <returns type="Function"></returns>
var e = Function._validateParams(arguments, [
{name: "method", type: Function},
{name: "context", mayBeNull: true}
]);
if (e) throw e;
return function() {
var l = arguments.length;
if (l > 0) {
var args = [];
for (var i = 0; i < l; i++) {
args[i] = arguments[i];
}
args[l] = context;
return method.apply(this, args);
}
return method.call(this, context);
}
}
Function.createDelegate = function Function$createDelegate(instance, method) {
/// <summary locid="M:J#Function.createDelegate" />
/// <param name="instance" mayBeNull="true"></param>
/// <param name="method" type="Function"></param>
/// <returns type="Function"></returns>
var e = Function._validateParams(arguments, [
{name: "instance", mayBeNull: true},
{name: "method", type: Function}
]);
if (e) throw e;
return function() {
return method.apply(instance, arguments);
}
}
/// <summary locid="M:J#Function.createCallback" />
/// <param name="method" type="Function"></param>
/// <param name="context" mayBeNull="true"></param>
/// <returns type="Function"></returns>
var e = Function._validateParams(arguments, [
{name: "method", type: Function},
{name: "context", mayBeNull: true}
]);
if (e) throw e;
return function() {
var l = arguments.length;
if (l > 0) {
var args = [];
for (var i = 0; i < l; i++) {
args[i] = arguments[i];
}
args[l] = context;
return method.apply(this, args);
}
return method.call(this, context);
}
}
Function.createDelegate = function Function$createDelegate(instance, method) {
/// <summary locid="M:J#Function.createDelegate" />
/// <param name="instance" mayBeNull="true"></param>
/// <param name="method" type="Function"></param>
/// <returns type="Function"></returns>
var e = Function._validateParams(arguments, [
{name: "instance", mayBeNull: true},
{name: "method", type: Function}
]);
if (e) throw e;
return function() {
return method.apply(instance, arguments);
}
}
我们发现,这两个方法里面使用了这两个函数apply()和call(),这两个函数,是我们进行下一步学习的关键。下一篇我们专门研究吧!
最后废话几句:
其实,不仅Ajax,就是asp.net本身(指普通的WebForm),也只是(而且只能)利用JavaScript,form表单和服务端交互,关注研究aspx生成的页面,能帮助我们更深入的了解asp.net的运行机制。
点击链接加入群聊【一起帮·源栈·星光计划】:QQ群:222132940