`
insertyou
  • 浏览: 905690 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

农民眼里的 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
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->1//*******************************************************
2//JScript:onlyforie
3//Author:wzcheng
4//Mail:wzcheng@iflytek.com
5//*******************************************************
6
7//全局的ajax管理对象
8var_gAjax=newAjax();
9var_submitting;
10
11
12//构造函数
13functionAjax()
14{
15this.HttpHandle=newActiveXObject("Microsoft.XMLHTTP");
16}

17
18//监视文档元素的行为
19Ajax.prototype.WatchElement=function(eid)
20{
21varelement=document.getElementById(eid);
22
23if(element!=null&&element.attachEvent)
24element.attachEvent("onsubmit",this.OnSubmit);
25}

26
27//文档元素的提交事件,提交的HTTP行为是POST
28Ajax.prototype.OnSubmit=function(e)
29{
30if(!_submitting)
31{
32_submitting=true;
33
34//取消提交动作
35e.returnValue=false;
36
37varsrcElement=e.srcElement;
38
39_gAjax.MarshalRequest(srcElement);
40
41if(srcElement.fireEvent)
42{
43//继续OnSubmit触发事件
44srcElement.fireEvent("OnSubmit");
45}

46
47_submitting=false;
48}

49
50}

51
52
53//列集客户端请求,即把原本通过正常渠道发送的数据进行打包
54Ajax.prototype.MarshalRequest=function(source)
55{
56vartarget=source.action;
57
58varelemCount=source.elements.length;
59
60varhttpContent="";
61for(vari=0;i<elemCount;i++)
62{
63vareName=source.elements[i].name;
64vareVal=source.elements[i].value;
65
66
67httpContent+=this.EncodePostData(eName);
68httpContent+="=";
69httpContent+=this.EncodePostData(eVal);
70
71if(i<elemCount-1)
72httpContent+="&";
73}

74
75varhttp=this;
76this.HttpHandle.open("POST",target,true);
77this.HttpHandle.onreadystatechange=function(){http.ReadyStateChange();};
78this.HttpHandle.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
79this.HttpHandle.send(httpContent);
80
81}

82
83//给客户端数据进行编码
84Ajax.prototype.EncodePostData=function(data)
85{
86returndata.split("%").join("%25").split("=").join("%3d").split("&").join("%26").split("+").join("%2b");
87}

88
89//Http请求状态变化的通知函数
90Ajax.prototype.ReadyStateChange=function(data)
91{
92if(this.HttpHandle.readyState==4)
93{
94if(this.HttpHandle.status==200)
95{
96varhtml=this.HttpHandle.responseText;
97
98varendIdx=this.HttpHandle.responseText.indexOf("\r\n\r\n");
99
100if(endIdx>0)
101{
102varscript=html.substring(0,endIdx);
103
104eval(script);
105}

106}

107}

108}

109
110//设置元素的新值
111Ajax.prototype.SetElement=function(eid,attName,attVal)
112{
113varelement=document.getElementById(eid);
114
115if(element!=null)
116{
117element.setAttribute(attName,attVal);
118}

119}

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

<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--><%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>无标题页</title>
</head>
<body>
<scriptsrc="ajax.js"type="text/javascript"></script>
<formid="form1"runat="server">
<div>

<asp:TextBoxID="TextBox1"runat="server"Width="661px">Ajax的核心技术演示</asp:TextBox><br/>

<asp:TextBoxID="htmlTbx"runat="server"Width="660px"></asp:TextBox>
<asp:ButtonID="Button1"runat="server"Text="Button"OnClick="Button1_Click1"/>&nbsp;
</div>
<scripttype="text/javascript">
_gAjax.WatchElement(
"form1");
</script>
</form>

</body>
</html>
和上面对应的后代码:

<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->1usingSystem;
2usingSystem.Data;
3usingSystem.Configuration;
4usingSystem.Collections;
5usingSystem.Web;
6usingSystem.Web.Security;
7usingSystem.Web.UI;
8usingSystem.Web.UI.WebControls;
9usingSystem.Web.UI.WebControls.WebParts;
10usingSystem.Web.UI.HtmlControls;
11usingSystem.Drawing;
12
13publicpartialclass_Default:System.Web.UI.Page
14{
15protectedvoidPage_Load(objectsender,EventArgse)
16{
17
18}

19
20<span
分享到:
评论

相关推荐

    AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX

    AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX

    Ajax中文手册 API

    很不错的Ajax开发草考文档,方便快捷1. AJAX介绍AJAX是一种运用JavaScript和可扩展标记语言(XML),在网络浏览器和服务器之间传送或接受数据的技术。2. AJAX实例AJAX可以用来创建更多交互式的网络应用程序。3. AJAX源...

    ajax代码 ajax代码

    **Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术可以提升用户体验,因为它...

    AjaxRequest(Ajax使用包)

    **AjaxRequest(Ajax使用包)** Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。AjaxRequest是实现Ajax功能的一个工具包,它...

    深入浅出Ajax(Head Rush Ajax) 源码 书中代码

    **Ajax 概述** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它的核心是利用JavaScript与服务器进行异步数据交换,通过XML或者JSON格式传输数据,使得用户...

    Ajax(Ajax使用js包)

    使用Ajax实现从服务器读取数据,包括Ajax实现的详细步骤

    ASP.NET AJAX程序设计——第I卷:服务器端ASP.NET 2.0 AJAX Extensions与ASP.NET AJAX Control Toolkit 源代码

    本卷从最易于理解和使用的那部分入手,介绍ASP.NET AJAX框架中能够与传统ASP.NET无缝对接的服务器端部分,包括服务器端ASP.NET AJAX Extensions与ASP.NET AJAX Control Toolkit。这部分内容不需要读者有任何的客户端...

    jquery+ajax例子

    在IT行业中,jQuery和Ajax是两个非常重要的技术,它们在构建动态、交互性强的Web应用程序时发挥着关键作用。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。Ajax...

    ajax教程

    **Ajax 教程** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新,提高了用户体验,尤其是在数据...

    Java Ajax分页,jsp ajax分页

    Java AJAX(Asynchronous JavaScript and XML)分页与JSP(JavaServer Pages)相结合,可以提供无需刷新整个页面即可动态加载更多内容的能力,提高用户体验。本教程将深入探讨如何使用AJAX、JavaScript以及MySQL...

    ajax 基础教程源代码

    ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础...

    ajax调用xml ajax调用html

    ajax调用xml ajax调用htmlajax调用xml ajax调用htmlajax调用xml ajax调用htmlajax调用xml ajax调用htmlajax调用xml ajax调用htmlajax调用xml ajax调用htmlajax调用xml ajax调用htmlajax调用xml ajax调用htmlajax调用...

    php+ajax例子

    标题中的“php+ajax例子”指的是使用PHP服务器端语言与AJAX(Asynchronous JavaScript and XML)客户端技术结合的示例应用。在Web开发中,PHP通常用于处理服务器端逻辑,而AJAX则允许网页在不刷新整个页面的情况下,...

    ajax+json实例

    **Ajax+JSON 实例详解** 在现代Web开发中,AJAX(Asynchronous JavaScript and XML)技术已经成为提升用户体验的重要工具,它允许网页在不刷新整个页面的情况下与服务器进行数据交互。结合JSON(JavaScript Object ...

    Professional Ajax, 2nd Edition.pdf

    《Professional Ajax, 2nd Edition》是一本深入探讨Ajax技术的专业书籍,由三位作者Nicholas C. Zakas、Jeremy McPeak和Joe Fawcett共同撰写。本书在2007年由Wiley Publishing, Inc.出版,是针对网站开发、设计以及...

    谷歌浏览器插件—— Ajax Interceptor

    **Ajax Interceptor:深入理解与应用** Ajax Interceptor 是一款专为谷歌浏览器(Chrome)设计的插件,它允许开发者在Ajax请求发送后和响应返回前进行干预,从而实现对AJAX请求数据的修改。这款插件对于前端开发、...

    自己用的简单封装AJAX类

    **标题解析:** "自己用的简单封装AJAX类" 指的是作者为了个人使用需求,编写了一个简化的AJAX处理类。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,...

    Head rush ajax书籍源代码

    《Head Rush Ajax》是一本专为想要深入理解Ajax技术的开发者编写的书籍。Ajax,全称为"Asynchronous JavaScript and XML",并非一种单一的技术,而是一种综合了多种Web开发技术的运用方式,它允许网页在不刷新整个...

    掌握Ajax 学习资料pdf

    掌握 Ajax第 1 部分-Ajax 简介 掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出异步请求 掌握 Ajax第 3 部分-Ajax 中的高级请求和响应 掌握 Ajax第 4 部分-利用 DOM 进行 Web 响应 掌握 Ajax第 5 部分-操纵 DOM ...

Global site tag (gtag.js) - Google Analytics