我是农民吗?是的,我是。我真的是农民吗?是的,绝对是的。因为我是我爹的儿子,我爹是农民,所以我也是。这不是废话吗?是的,的确是废话。每次写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实现的代码。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
AJAX CORE
1
//*******************************************************
2
// JScript: only for ie
3
// Author: wzcheng
4
// Mail: wzcheng@iflytek.com
5
//*******************************************************
6![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
//全局的ajax管理对象
8
var _gAjax=new Ajax();
9
var _submitting;
10![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
//构造函数
13
function Ajax()
14![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
15
this.HttpHandle=new ActiveXObject("Microsoft.XMLHTTP");
16
}
17![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
//监视文档元素的行为
19
Ajax.prototype.WatchElement=function(eid)
20![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
21
var element=document.getElementById(eid);
22
23
if (element!=null && element.attachEvent)
24
element.attachEvent("onsubmit", this.OnSubmit);
25
}
26![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
27
//文档元素的提交事件,提交的HTTP行为是POST
28
Ajax.prototype.OnSubmit=function (e)
29![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
30
if (!_submitting)
31![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
43
//继续OnSubmit触发事件
44
srcElement.fireEvent("OnSubmit");
45
}
46
47
_submitting=false;
48
}
49
50
}
51![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
52![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
53
//列集客户端请求,即把原本通过正常渠道发送的数据进行打包
54
Ajax.prototype.MarshalRequest=function(source)
55![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
56
var target=source.action;
57![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
58
var elemCount = source.elements.length;
59
60
var httpContent="";
61
for(var i=0;i<elemCount;i++)
62![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.HttpHandle.onreadystatechange = function()
{ http.ReadyStateChange();};
78
this.HttpHandle.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
79
this.HttpHandle.send(httpContent);
80![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
81
}
82![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
83
//给客户端数据进行编码
84
Ajax.prototype.EncodePostData = function(data)
85![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
86
return data.split("%").join("%25").split("=").join("%3d").split("&").join("%26").split("+").join("%2b");
87
}
88![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
89
//Http请求状态变化的通知函数
90
Ajax.prototype.ReadyStateChange = function(data)
91![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
92
if( this.HttpHandle.readyState == 4 )
93![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
94
if( this.HttpHandle.status == 200 )
95![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
96
var html=this.HttpHandle.responseText;
97
98
var endIdx= this.HttpHandle.responseText.indexOf("\r\n\r\n");
99
100
if (endIdx>0)
101![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
102
var script=html.substring(0,endIdx);
103
104
eval(script);
105
}
106
}
107
}
108
}
109![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
110
//设置元素的新值
111
Ajax.prototype.SetElement = function(eid,attName,attVal)
112![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
113
var element=document.getElementById(eid);
114
115
if(element!=null)
116![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
117
element.setAttribute(attName,attVal);
118
}
119
}
120![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
以下是调用上面脚本的ASPX页面代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<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" />
</div>
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script type="text/javascript">![](https://www.cnblogs.com/Images/dot.gif)
_gAjax.WatchElement("form1");
</script>
</form>
</body>
</html>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
和上面对应的后代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
using System;
2
using System.Data;
3
using System.Configuration;
4
using System.Collections;
5
using System.Web;
6
using System.Web.Security;
7
using System.Web.UI;
8
using System.Web.UI.WebControls;
9
using System.Web.UI.WebControls.WebParts;
10
using System.Web.UI.HtmlControls;
11
using System.Drawing;
12![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
public partial class _Default : System.Web.UI.Page
14![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
15
protected void Page_Load(object sender, EventArgs e)
16![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
17![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
}
19
20
protected void Button1_Click1(object sender, EventArgs e)
21![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
22
this.htmlTbx.Text = "this is new value:" + DateTime.Now.ToString();
23![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
string script = string.Format("_gAjax.SetElement('{0}','{1}','{2}'); \r\n\r\n", this.htmlTbx.ID, "value", this.htmlTbx.Text);
25![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
this.Response.Write(script);
27
}
28
29
}
30![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
31![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)