AjaxPro 内部机制探讨-asp.net的结合,(1)

80酷酷网    80kuku.com

  ajax|asp.net

本人从网上下载了个Ajax.dll,
但是编译时出现引用的程序集“Ajax”没有强名称,

也用了Reflector还原源程序,但是重新编译的dll和先前的出入很大。
如何给ajax.dll 加入强命名,望高人指点。

我试了tlbimp keyfile:c:/key/020job.keys /reference:c:/ajax.dll /out:c:/key/ajax.dll
也不行.

还是下载了个AjaxPro 改改。 

一、使用的例子

  本文使用的例子很简单,一个文本框,在其中敲入文字之后,下方就显示该文字并加上一个“(Hello from server)”。源码如下(有删节):

 1
 2<script runat="server" language="c#">
 3
 4private void Page_Load(object sender, EventArgs e)
 5{
 6    AjaxPro.Utility.RegisterTypeForAjax(typeof(KeyPressDemo));
 7}

 8
 9[AjaxPro.AjaxMethod]
10public string EchoInput(string s)
11{
12    return s += " (Hello from server)";
13}

14
15
script>
16
17<form id="Form1" method="post" runat="server">form>
18
19<div class="content">
20<h1>KeyPressDemo Examplesh1>
21<p>Press any key in the textbox and see the echo in the DIV element on the right side.p>
22<input type="text" id="myinput" onkeyup="doTest1();"/> <div id="mydisplay">---- empty ----div>
23<p><i>Note, that I do not update the display if a request is running currently.i>p>
24div>
25
26<script type="text/" defer="defer">
27
28var timer = null;
29
30function doTest1() {
31    if(timer != null{
32      clearTimeout(timer);
33    }

34    timer = setTimeout(doTest1_next, 100);
35}

36
37function doTest1_next() {
38    var ele = document.getElementById("myinput");
39    .KeyPressDemo.EchoInput(ele.value, doTest1_callback);
40}

41
42function doTest1_callback(res) {
43    var ele = document.getElementById("mydisplay");
44    ele.inner = res.value;
45}

46
47
script>


  选用这个例子,是因为它比较简单,没有相关的 C# 文件。首先看看第17行,咦?怎么这个 form 里啥都没有?既然什么都没有?删掉它行不行?不行,绝对不行!看看网页打开后,这一行被扩展成了什么?

1<form name="Form1" method="post" action="keypress.x" id="Form1">
2<div>
3<script type="text/" src="/ajaxdemo/ajaxpro/core.ashx">script>
4<script type="text/" src="/ajaxdemo/ajaxpro/.KeyPressDemo,App_Web_vxhzzzxr.ashx">script>
5form>
6


  请注意这里链入的两个 文件,它们是 Ajax 得以运行的基础!删掉 form 那一行,它们就不会出现,自然不行了。这两行是如何产生的?那就是页面代码的第4至7行的 PageLoad 函数的功劳了。

  好,那这两个 文件我们能看到不?看上去它们是服务端的,并且事实上是服务端动态生成的。不过稍有些了解浏览器工作原理的人就会知道,到 Local Settings 下的 Temporary Internet Files 目录下去找,肯定是有的,因为浏览器下载页面的时候会把与页面相关的文件都下过来。

  二、Ajax ClientScript 的执行总体流程

  好,有了源页面代码,又有了两个 ClientScript 文件,我们就可以分析客户端的执行流程了。以下是我画的一张简单的流程图:



  我们一个一个地来分析。

  三、页面做了什么?

  第一步,当我们在 TextBox 里输入字符后,将会触发 onkeyup 事件。它要执行 doTest1 方法。见页面代码里的第22行。

  第二步,doTest1 方法使用 setTimeout 函数,设定了 100 毫秒后,执行 doTest1_next 方法。见页面代码里的第34行。

  第三步,doTest1_next 方法调用了 .KeyPressDemo.EchoInput 方法,它带有两个参数,第一个是我们在文本框中输入的值,当然是个字符串类型的了;第二个则是一个 callback 函数,请留心这个函数,它将于整个流程的最后执行。

  好,我们知道页面的客户端无外乎就是 和 ,虽然 .KeyPressDemo.EchoInput 方法酷似页面里我们自己用 C# 写的函数,但可以肯定的是它绝对是用 实现的。在哪儿呢?嗯,在我们从 Temporary Internet Files 目录下找到的 .KeyPressDemo,App_Web_vxhzzzxr.ashx 里。

  四、.KeyPressDemo,App_Web_vxhzzzxr.ashx 的实现

  这个文件很小,以下是它的全部源码:

 1addNamespace("");
 2.KeyPressDemo_class = Class.create();
 3.KeyPressDemo_class.prototype = (new AjaxPro.Request()).extend({
 4    EchoInput: function(s, callback) {
 5        return this.invoke("EchoInput"{"s":s}, callback);
 6    }
,
 7    initialize: function() {
 8        this.url = "/ajaxdemo/ajaxpro/.KeyPressDemo,App_Web_vxhzzzxr.ashx";
 9    }

10}
)
11.KeyPressDemo = new .KeyPressDemo_class();
12


  啊哈,这下我们知道了,.KeyPressDemo 其实是在这里用 定义的 .KeyPressDemo_class 类的实例,EchoInput 则是它的一个方法。注意一下每3行,我们看到这个类是从 AjaxPro.Request 类继承的。什么什么?继承?有没有搞错? 什么时候开始面向对象了而不是基于对象了?先摆下这个疑问,我们继续往下看。

  EchoInput 方法的实现很简单,就是调用了一个 Invoke 方法。嗯,这个方法想必是从 AjaxPro.Request 类“继承”下来的。那它定义在哪儿?是了,还有一个 core.ashx 呢,它才是真正客户端实现 Ajax 技术的主角!这个文件太大,我们还是依照函数调用顺序慢慢来拆解罢。



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: