AjaxPro 内部机制探讨
应当承认我这人实在算不上弄潮儿，Ajax 早已流行得一塌糊涂，我却始终没有来研究一下这个东东。上次做网站的时候，BOSS 就跟我讲过，可以参考一下 Ajax 的技术，我嘴上答应，心里却不是十分的在乎。究其原因，一来是我这人比较固步自封，二来起初确实也没太相信 Ajax 真有 BOSS 说的那么神奇。
转变是从昨天天始的，这一周在公司主要精力都是在用 C++ 写 framework，不得不承认它比较辛苦，细枝末节之处非常之烦，昨天下午呆着呆着就不想干活了，就开始四处游荡，正好看到我们自己也有项目已经成功应用了 Ajax，于是也就想看一看，无奈那帮家伙的开发文档是出奇的少，只好在网上找找资料，自己研究研究吧。
作为一个技术人员，我看到一项新技术，总是喜欢琢磨琢磨它内部是如何实现的。在对 Ajax 有了初步认识以后，自然想看看其内部机制，但是令我失望的是，至少介绍 Ajax 内部实现的文章少之又少，好容易找到一篇，却也只是简单列了列一些 javascript 代码，并且没什么解释，颇为郁闷。想想求人不如求己，况且自己研究的或许印象更深一些。于是找到了一个 AjaxPro，下来琢磨琢磨，只是对于 JavaScript 我实在知之甚少，不明白之处依然很多，不过还是想写出来，抛砖引玉，望高人们不吝指教。
一、使用的例子
本文使用的例子很简单，一个文本框，在其中敲入文字之后，下方就显示该文字并加上一个“（Hello from server）”。源码如下（有删节）：
<%
@ Page language="c#" ClassName="KeyPressDemo" Inherits="System.Web.UI.Page" %>
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/javascript" 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 ASP.KeyPressDemo.EchoInput(ele.value, doTest1_callback);
40}
41
42function doTest1_callback(res) {
43 var ele = document.getElementById("mydisplay");
44 ele.innerHTML = res.value;
45}
46
47script>
选用这个例子，是因为它比较简单，没有相关的 C# 文件。首先看看第17行，咦？怎么这个 form 里啥都没有？既然什么都没有？删掉它行不行？不行，绝对不行！看看网页打开后，这一行被扩展成了什么？
<form name="Form1" method="post" action="keypress.aspx" id="Form1">
2<div>
3<script type="text/javascript" src="/ajaxdemo/ajaxpro/core.ashx">script>
4<script type="text/javascript" src="/ajaxdemo/ajaxpro/ASP.KeyPressDemo,App_Web_vxhzzzxr.ashx">script>
5form>
6
请注意这里链入的两个 javascript 文件，它们是 Ajax 得以运行的基础！删掉 form 那一行，它们就不会出现，自然不行了。这两行是如何产生的？那就是页面代码的第4至7行的 PageLoad 函数的功劳了。
好，那这两个 javascript 文件我们能看到不？看上去它们是服务端的，并且事实上是服务端动态生成的。不过稍有些了解浏览器工作原理的人就会知道，到 Local Settings 下的 Temporary Internet Files 目录下去找，肯定是有的，因为浏览器下载页面的时候会把与页面相关的文件都下过来。
