DIV CSS 佈局教程網

應當承認我這人實在算不上弄潮兒，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
15script>
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>