农民眼里的 AJAX

      我是农民吗？是的，我是。我真的是农民吗？是的，绝对是的。因为我是我爹的儿子，我爹是农民，所以我也是。这不是废话吗？是的，的确是废话。每次写blog之前如果不说几句废话，心里就憋屈的很，就如同有人不在大家面前提一些生动的概念（如AJAX、SOA等）就不足以证明他是高手一样。虽然我刚才也提了一次，不过我绝对不是什么高手，真的，我是一个农民!  (一堆废话)
    不过农民也是享有对新知识、新技术的知晓权的，哈哈!
    1. 什么是AJAX？我可以知道吗？可以。AJAX就是异步的JavaScript和XML...技术，要看英文怎么写，劳驾您请自己上网查。

    2. 什么是异步呢？异步就是不同步，什么又是同步呢？同步就是如果你给我一拳，我接着立即还你一脚。明白了没？不明白赶紧上网搜哦。

    3. 什么时候用到异步技术呢？   比如我在打麻将，老婆揪着我的耳朵让我回家烧饭。客气的，我就对雀友说一声：“本人要去做饭。需要30分钟，请等待！”，不客气的，直接就把雀友给撂桌上了。都说小赌可以怡情，大赌可以发家致富，可是你说就这习气，久而久之谁还跟我打牌，我到哪里去怡情、致富呀？终于有一天，我花了血本买了个电饭锅。从此得解放呀！一边打麻将，一边等吃饭。各位，电饭锅的工作原理不需要我解释了吧? 

    到此，我能不能说AJAX就是我的那只电饭锅呢？因为它，我得了“2006年度小区最积极雀友奖” ,“2006年读小区最优秀家庭妇男奖”等等，还有好多奖状我还没来得及领呢？
    
   你是不是不禁想问－AJAX具体怎么实现呀？如果你真这样想，那你就想对了。因为我下面正想讲这个问题，虽然我只是个农民，不是电气工程师，但家里螺丝刀什么的还是有的呀，拆呀！把那只锅拆了看看。
别心疼，旧的不去新的不来，作为一个农民，这点气度我还是有的。废．．废．废什么话呀，讲AJAX呢？严肃点！
   首先找了一个比较著名的开源框架MagicAjax看，整个代码不算多，不过除了核心我不想知道其它的东西。记住，AJAX是概念，不是编程语言、更不是一个dll。没有具体的实现标准。总结一下MagicAjax的实现方法，包括一下几点：
      1. 通过JS截获客户端的HTML元素的事件，如FORM, INPUT等。
      2.放弃默认的浏览器行为。
      3.打包截获到的事件上下文。
      4.通过HTTP对象把打包的内容向服务器提交。
      5.服务器预先截获客户端到来的数据包，并做相应处理。
      6.当服务端将要发送Response数据给客户端时，进行再次截获，更改这些数据。
      7.客户端HTTP对象收到Response数据进行处理（不是浏览器处理），主要是通过DOM操作特定ID的HTML元素。
      MagicAjax的指导思想是：总是通过透明的截获用户调用的方式处理正常的ASP.NET的逻辑。

      以下是在ASP.NET环境下， 关于最简单的AJAX实现的代码。      

AJAX CORE
  1//*******************************************************
  2// JScript: only for ie
  3// Author:  wzcheng
  4// Mail:    [e-mail]
  5//*******************************************************
  6
  7//全局的ajax管理对象
  8var _gAjax=new Ajax();
  9var _submitting;
 10
 11
 12//构造函数
 13function Ajax()
 14{
 15    this.HttpHandle=new ActiveXObject("Microsoft.XMLHTTP");
 16}
 17
 18//监视文档元素的行为 
 19Ajax.prototype.WatchElement=function(eid)
 20{
 21    var element=document.getElementById(eid); 
 22    
 23    if (element!=null && element.attachEvent)
 24        element.attachEvent("onsubmit", this.OnSubmit);
 25}
 26
 27//文档元素的提交事件，提交的HTTP行为是POST
 28Ajax.prototype.OnSubmit=function (e)
 29{
 30    if (!_submitting)
 31    {
 32        _submitting=true;
 33        
 34         //取消提交动作
 35        e.returnValue=false;
 36        
 37        var srcElement=e.srcElement;
 38        
 39        _gAjax.MarshalRequest(srcElement);
 40        
 41        if (srcElement.fireEvent)
 42        {
 43            //继续OnSubmit触发事件
 44            srcElement.fireEvent("OnSubmit");
 45        }
 46        
 47        _submitting=false;
 48    }
 49   
 50}
 51
 52
 53//列集客户端请求，即把原本通过正常渠道发送的数据进行打包
 54Ajax.prototype.MarshalRequest=function(source)
 55{
 56    var target=source.action;
 57
 58    var elemCount = source.elements.length;
 59    
 60     var httpContent="";
 61     for(var i=0;i<elemCount;i++)
 62     {
 63        var eName=source.elements[i].name;
 64        var eVal=source.elements[i].value;
 65        
 66         
 67        httpContent+=this.EncodePostData(eName) ;
 68        httpContent+="=" ;
 69        httpContent+=this.EncodePostData(eVal) ;
 70                  
 71        if (i<elemCount-1)
 72            httpContent+="&";
 73     }
 74     
 75     var http=this;
 76     this.HttpHandle.open("POST",target , true);
 77     this.HttpHandle.onreadystatechange = function(){ http.ReadyStateChange();};
 78     this.HttpHandle.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 79     this.HttpHandle.send(httpContent);
 80
 81}
 82
 83//给客户端数据进行编码
 84Ajax.prototype.EncodePostData = function(data)
 85{
 86    return data.split("%").join("%25").split("=").join("%3d").split("&").join("%26").split("+").join("%2b");
 87}
 88
 89//Http请求状态变化的通知函数
 90Ajax.prototype.ReadyStateChange = function(data)
 91{
 92  if( this.HttpHandle.readyState == 4 )
 93  {
 94        if( this.HttpHandle.status == 200 )
 95        {
 96            var html=this.HttpHandle.responseText;
 97         
 98            var endIdx= this.HttpHandle.responseText.indexOf("/r/n/r/n");
 99          
100          if (endIdx>0)
101          {
102                var script=html.substring(0,endIdx);
103                
104                 eval(script);
105          }
106        }
107   }
108}
109
110//设置元素的新值
111Ajax.prototype.SetElement = function(eid,attName,attVal)
112{
113    var element=document.getElementById(eid); 
114    
115    if(element!=null)
116    {
117        element.setAttribute(attName,attVal);
118    }
119}
120

以下是调用上面脚本的ASPX页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <script src="ajax.js" type="text/javascript"></script>
    <form id="form1" runat="server">
    <div>
        
        <asp:TextBox ID="TextBox1" runat="server" Width="661px">Ajax的核心技术演示</asp:TextBox><br />
        
        <asp:TextBox ID="htmlTbx" runat="server" Width="660px"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click1" />&nbsp;
        </div>
    <script type="text/javascript">
        _gAjax.WatchElement("form1");
     </script>
  </form>
  
</body>
</html>

和上面对应的后代码：

 1using System;
 2using System.Data;
 3using System.Configuration;
 4using System.Collections;
 5using System.Web;
 6using System.Web.Security;
 7using System.Web.UI;
 8using System.Web.UI.WebControls;
 9using System.Web.UI.WebControls.WebParts;
10using System.Web.UI.HtmlControls;
11using System.Drawing;
12
13public partial class _Default : System.Web.UI.Page
14{
15    protected void Page_Load(object sender, EventArgs e)
16    {
17
18    }
19   
20    protected void Button1_Click1(object sender, EventArgs e)
21    {
22        this.htmlTbx.Text = "this is new value:" + DateTime.Now.ToString();
23
24        string script = string.Format("_gAjax.SetElement('{0}','{1}','{2}'); /r/n/r/n", this.htmlTbx.ID, "value", this.htmlTbx.Text);
25
26        this.Response.Write(script); 
27    }
28   
29}
30
31