AjaxPro 內部機制探討
應當承認我這人實在算不上弄潮兒，Ajax 早已流行得一塌糊涂，我卻始終沒有來研究一下這個東東。上次做網站的時候，BOSS 就跟我講過，可以參考一下 Ajax 的技術，我嘴上答應，心里卻不是十分的在乎。究其原因，一來是我這人比較固步自封，二來起初確實也沒太相信 Ajax 真有 BOSS 說的那么神奇。
轉變是從昨天天始的，這一周在公司主要精力都是在用 C++ 寫 framework，不得不承認它比較辛苦，細枝末節之處非常之煩，昨天下午呆著呆著就不想干活了，就開始四處游蕩，正好看到我們自己也有項目已經成功應用了 Ajax，于是也就想看一看，無奈那幫家伙的開發文檔是出奇的少，只好在網上找找資料，自己研究研究吧。
作為一個技術人員，我看到一項新技術，總是喜歡琢磨琢磨它內部是如何實現的。在對 Ajax 有了初步認識以后，自然想看看其內部機制，但是令我失望的是，至少介紹 Ajax 內部實現的文章少之又少，好容易找到一篇，卻也只是簡單列了列一些 javascript 代碼，并且沒什么解釋，頗為郁悶。想想求人不如求己，況且自己研究的或許印象更深一些。于是找到了一個 AjaxPro，下來琢磨琢磨，只是對于 JavaScript 我實在知之甚少，不明白之處依然很多，不過還是想寫出來，拋磚引玉，望高人們不吝指教。
一、使用的例子
本文使用的例子很簡單，一個文本框，在其中敲入文字之后，下方就顯示該文字并加上一個“（Hello from server）”。源碼如下（有刪節）：
1
<%@ 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>
<%@ Page language="c#" ClassName="KeyPressDemo" Inherits="System.Web.UI.Page" %>
2
<script runat="server" language="c#">3
4
private void Page_Load(object sender, EventArgs e)5
{6
AjaxPro.Utility.RegisterTypeForAjax(typeof(KeyPressDemo));7
}8
9
[AjaxPro.AjaxMethod]10
public 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>24
div>25
26
<script type="text/javascript" defer="defer">27
28
var timer = null;29
30
function doTest1() {31
if(timer != null) {32
clearTimeout(timer);33
}34
timer = setTimeout(doTest1_next, 100);35
}36
37
function doTest1_next() {38
var ele = document.getElementById("myinput");39
ASP.KeyPressDemo.EchoInput(ele.value, doTest1_callback);40
}41
42
function doTest1_callback(res) {43
var ele = document.getElementById("mydisplay");44
ele.innerHTML = res.value;45
}46
47
script>選用這個例子，是因為它比較簡單，沒有相關的 C# 文件。首先看看第17行，咦？怎么這個 form 里啥都沒有？既然什么都沒有？刪掉它行不行？不行，絕對不行！看看網頁打開后，這一行被擴展成了什么？
1<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
<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>5
form>6
請注意這里鏈入的兩個 javascript 文件，它們是 Ajax 得以運行的基礎！刪掉 form 那一行，它們就不會出現，自然不行了。這兩行是如何產生的？那就是頁面代碼的第4至7行的 PageLoad 函數的功勞了。
好，那這兩個 javascript 文件我們能看到不？看上去它們是服務端的，并且事實上是服務端動態生成的。不過稍有些了解瀏覽器工作原理的人就會知道，到 Local Settings 下的 Temporary Internet Files 目錄下去找，肯定是有的，因為瀏覽器下載頁面的時候會把與頁面相關的文件都下過來。
全站熱搜
留言列表
