应Aether之邀写一个基础点的AJAX操作实例，想来想去就写一个聊天室吧，以前写AJAX时一来偷懒，二来为了简单，都用纯文本或者javascript数组进行交互，这次改成纯粹的xml操作。想得时候很简单，无非就处理发送消息，接收消息，登陆和退出这几种事件，但真正要写的时候还是颇费周折，主要是ASP对Session间的消息(对象)传递功能太弱了，只能在Application、数据库、自定义服务端组件三种方法中挑一个，自定义服务端组件先Pass了，既然要写一个轻量级的，数据库能不用就不用了，最后还是盯上了Application。

1. 可以完整详细地获得每一个用户点击广告的数据。包括点击时间，用户的IP，页面来源地址，被点击的广告网站地址，如果你的站点上保存了用户cookie的话，甚至可以查询到是哪位用户点了你的广告:)
2. 用纯客户端javascript代码和AJAX技术实现点击监听和向服务端发送点击数据，服务端我用的是ASP脚本，只是用来保存点击数据和提供浏览器端的点击查询，可以更换为其他服务端脚本，如PHP，JSP等
3. 数据保存方式为了简单，我用纯text文本保存，一行保存一条数据，数据字段用逗号分隔，这样方便用户将这个文本另存为csv格式，csv就能用excel打开了。
4. 查看广告点击数据可设访问密码

Meebo是最近很火的一个AJAX技术实现的WEB式IM系统，通过这个网站可以登录AIM、ICQ、Yahoo! Messenger、Jabber、GTalk、MSN等IM软件，并且通过WEB方式进行即时聊天，简单又优雅，很是方便。不过每次都要一直打开浏览器，似乎又有点不太方便，这里教你一个折中的方法。

将http://www.meebo.com 这个网站定义为你的活动桌面地址，并且启动windows的活动桌面，调整活动桌面大小，可以向我这样，放在屏幕的左上角，哈哈，是不是跟真的IM软件感觉一样啊。现在就可以长时间挂这个不占内存的简单优雅的AJAX-IM了。

设定活动桌面的方法我想不用说了吧，嗯，还是简单说一下吧：桌面点右键选择属性-〉在打开的“显示属性”窗口中选择“桌面”分页栏-〉点击“自定义桌面”-〉在打开的“桌面项目”窗口中选择“Web”分页栏-〉点击新建后再弹开的向导窗口中输入www.meebo.com -〉同步完成后向导自动关闭（也可以选择不同步）-〉在“网页”列表中把meebo.com的选项打勾后按确定关闭窗口-〉回到桌面就能看到活动桌面了，窗口的大小可以调整，顶部也有一个简单的标题栏，可以设定其他选项和最大、还原活动桌面窗口。

有点遗憾：
1、似乎无法同时登录多个IM；
2、来了新消息有个声音提示就好了。

注：全文完

此文原出于AJAX Patterns网站的一篇《Ajax Frameworks》的wiki文章，很早前我就注意到，后来在国内也有人翻译了，不过最近发现此wiki还是在不断添加维护中，截止此文发布前，作者又添加了好几个新诞生的AJAX开发工具，所以我决定重新翻译一遍，并且时常注意原文发布状态，一有新的内容立马也翻译过来，做到同步:)

此翻译稿很大一部分内容出自国内出现的那个先前版本，我只是对新加入的几项进行了翻译，并且对我熟悉的产品项着重介绍了一下，以后我会抽时间收集文中提到AJAX工具相关的文章，尽量将内容介绍和功能点评做到全面详细点。所以请关注和准备用AJAX做开发的朋友关注这篇文章，我会时常更新的。原文因为是由一个wiki系统维护，所以在所难免出现参差不齐，风格上也有不统一的情况，翻译时我也是参照原文原封不动的挪了过来，以后我会抽时间改良下。

目录

一、AJAX最值得称赞的是异步交互，而不是无刷新

很多人都看好AJAX无刷新的技术，以至于认同AJAX就是用来做无刷新的。这个认识是错误的，什么是无刷新？无刷新就是页面无需重载，那什么又是异步交互？异步交互就是一个简单的多线程，当你在一个blog里看文章时，同时也可以利用AJAX进行无刷新的回复提交，看起来虽然也是无刷新，但这里最重要的是异步，即你能一边看文章，一边又能向服务器提交你的回复信息，利用好这个异步，才能算是掌握了AJAX的精髓。很多场合，无刷新是呈现给用户的视觉体验，而异步交互却是默默无闻的工作在台后，这种情况导致大多数人的错误理解了AJAX的权重之分。

二、推荐在WEB上轻量级的应用AJAX

通过以上两个国外成功应用AJAX的网站，我们发现他们都使用的是轻量级的AJAX，就是那种交互简单，数据较少的操作。这也符合AJAX的本意，虽然像www.backbase.com和bindows都在RIA上有惊人的表现能力，但是速度慢、搜索引擎支持不好、开发难度大等毛病还是无法让用户满意的，请记住：AJAX的最终目的是为了提高用户体验，为了方便用户交互，而不是因技术而技术的。

三、AJAX的MVC架构设计

很多人认为在成熟的框架中应用AJAX会破坏框架的完整性，比较常见的说法有三层架构的WEB应用中破坏MVC模式，其实不然。MVC的理论我就不多说了，经典的那三个层、五条线大家都很熟悉，在WEB应用中，因为浏览器/服务器固有的这种请求/响应的断开式网络通讯模式，决定了在Model层无法实现主动向View层发出数据更新事件，所以一般常见的成熟MVC框架中都将经典MVC理论稍作修改：由Model层处理完业务后通知Control层，然后由Control层承担向View发送数据更新的义务。但是AJAX天生具有监听功能，AJAX实现异步响应的那个OnReadyStateChange事件就具有在客户端程序中才会有的事件监听功能。现在想来，利用AJAX实现的MVC模型有如下图这样：

理想化的设计如下所示：

• 三层对应的文件对象：view.jsp(视图)、action.do(控制器)、model.java(模型)
• view.jsp是用户看到的界面，并通过内置的AJAX对象异步方式给action.do发送请求，AJAX.OnReadyStateChange开始监听
• action.do接收到view.jsp发过来的请求(GET或者POST方式)，通过Request判断后发送给相应的业务/数据模型model.java
• model.java开始执行业务操作，执行完毕直接给view.jsp页面发送数据更新的通知，这个通知的消息有可能是XML封装的数据，也有可能是一段文本，甚至是一段HTML代码，当然，既然用MVC，不推荐有Model发送HTML，推荐还是用XML封装业务数据即可。
• view.jsp页面中AJAX对象的OnReadyStateChange接收到了数据更新通知，根据实际情况用DOM进行页面呈现更新。

注：全文完

众所周知，异步交互、JavaScript脚本和XML封装数据是AJAX的三大特征。其实，在实际应用中，不需要牢牢套死这三条大律，在我看来，AJAX - X，即去掉用XML封装数据，也不失为一种好的设计思路，如果应用恰当，更显轻盈步伐和巧妙思路。

一般读取AJAX返回的XML结构的数据时使用XMLHttp的responseXML对象属性，同时，XMLHttp也提供了另外一个属性，即ResponseText，通过这个属性，XMLHttp可以接受来自服务器的文本结构的字符串信息。去掉XML的AJAX可以使用ResponseText这个对象属性，很灵活的操控返回数据的格式，可以自定义格式，比如我通常喜欢用c语言的那种文件流方式定义返回的字符串结构，有文件头和具体的文件信息实体，文件头分为状态信息以及文件字符长度，我摒弃了文件字符长度的定义，规定死接受的ResponseTex字符串中的第一位为状态码，比如设定常量值0表示一起正常，非0的数字表示不正常，甚至有错误等。如果有非0值，程序自动取第二位起到257位(长度为256)的字符串组成为状态信息，从258位开始到末尾的字符串就是服务器返回的正常结果信息。
substring(0,1)取状态码
substring(1,256)取服务器错误信息(错误信息不够256位用空格补齐，取到数据后进行Trim处理)
substring(256,末尾)取服务器返回的数据信息
三次substring即完成了一个简单但完整的交互工作。比起XML解析组件来说要快的多。

用ResponseText比封装为XML处理数据快和简单是一个原因，另一个原因是可操控性更大更灵活，打开Google Suggest，在搜索框输入字符可以给你给出拼写提示，Suggest就是应用了AJAX技术，不过它在从服务器返回数据时并没有使用XML封装，也没有自定义ResponseText格式，而是直接将返回代码组织成js脚本，通过浏览器返回后直接执行，如eval(XMLHttp.ResponseText)这样的方式进行执行，http://www.google.com/complete/search?hl=en&js=true&qu=ajax 通过这个链接你可以看到Suggest利用AJAX得到的返回数据，此页面是在Google Suggest的搜索框中输入"AJAX"后得系统动态返回的数据。

sendRPCDone(frameElement, "ajax", new Array("ajax", "ajax amsterdam", "ajax fc", "ajax ontario", "ajax grips", "ajax football club", "ajax public library", "ajax football", "ajax soccer", "ajax pickering transit"), new Array("3,840,000 results", "502,000 results", "710,000 results", "275,000 results", "8,860 results", "573,000 results", "40,500 results", "454,000 results", "437,000 results", "10,700 results"), new Array(""));

当然，对于大型系统来讲，为了保持数据接口的一致和整齐，还是用XML来传递更严谨更统一点，听说微软已经发起了重写XML Parse组件的号召，估计下一个版本的XMLHttp还是DOMParser还是MSXML2.DOMDocument都会大大提高效率，减少资源占用的。

注：全文完

中文网志年会准备的如火如荼，并提倡大家通过del.icio.us推荐自认为有特色的Blogger，这个方法很好，在我订阅的Rss中有很多Blogger我都想推荐，可惜一个一个添加太麻烦了，灵机一动就做了这么一个小工具。

只要使用Rss的人一般都会订阅自己认为价值高有特色的Blog，所以参考自己的opml文件进行推荐是最方便的，我这个小工具就是通过Bloglines的opml文件自动罗列出你订阅的所有Feed，然后点一下按钮就会自动添加Blog地址到del.icio.us下，并加注cnbloggercon这个标签

使用方法：

1. 先复制下这个输入框内的所有代码
2. 打开BlogLines首页(其他页面亦可，但是不要用那个feed阅读页面，因为这个页面是个框架页面，懒得再从代码上修改支持框架了)
3. 把1中拷贝下来的代码粘贴到当前Blogline页面的地址栏中，拍个回车就耐心等着吧，如果弹出del.icio.us的登录框，输入del.icio.us的帐号和密码即可。
4. 等页面Load完就能看见opml文件中所有的feed列表，有一个Add Blogger按钮，点击就能添加到del.icio.us中了，注意，这里使用的是iframe，所以点击后应该在地址栏能看见有Load的进度，等进度100%了在点击下一个，页面的右上角能看见那个iframe窗口，内容就是发送添加书签命令给del.icio.us后得到的反馈结果。

实现方法其实很简单，主要使用了XMLHttpRequest远程从http://www.bloglines.com/export这个url中读取到opml文件，并通过DOM对这个xml文档进行遍历，找出所有有效节点并罗列出来。往del.icio.us里添加书签我用iframe实现的，用AJAX当然最好，只是跨域问题实在没办法解决了，这个小工具用了Johnvey Hwang的客户端代理技术，即通过javascript:命令结合url实现欺骗性质的跨域操作，但这也只能跨一个域，向我这个即用Bloglines又用del.icio.us，实在没办法了，只能用iframe了。

当然，你必须是del.icio.us和bloglines的注册用户，最好都已经保存cookie在当前你操作的机器上，不然可能会出现问题。目前只支持BlogLines的feed，对于其他用户，比如toPim用户，只要用了规范的opml格式，都能实现的。浏览器我也测试了，IE和Firefox都没问题

源文件只有一个JS文件：http://www.duduwolf.com/test/opml2blogger.js

注：全文完

介绍

名称：del.icio.us direc.tor
网址：http://johnvey.com/features/deliciousdirector/
介绍：del.icio.us direc.tor是一个用来查询用户从del.icio.us收录的网摘得快速浏览工具，这个工具基于AJAX技术，无须安装客户端(比那个tagSense要好的多了)，界面和易用性非常好(看我的截图)。

功能：

• 快速抓取del.icio.us中的所有链接，测试数据为12000条。
• 具有本地搜索功能，本地搜索是指发送命令不经过网络，全部从已打开的浏览器里快速响应
• 搜索支持tag和description，经我测试连描述和标题中的中文也支持，这是del.icio.us一直没有解决的问题
• 最棒的还是对tag的支持，可以在选择定某个tag后快速列出相关tag，一共支持4级
• 可以从列表中直接点击Edit对书签进行修改操作
• 排序、排序，可以对tag、title、postTime进行排序，而且速度非常快

安装：

1. 将这个链接加入到浏览器的快捷书签上，就像del.icio.us的post书签一样的添加方法
   del.icio.us direc.tor
2. 打开del.icio.us随便进入一个页面(这是必须，当页面的url不属于del.icio.us时无法执行)
3. 这时浏览器可能会出现无响应，请不要急于关闭，这表明程序正在从del.icio.us中将你的书签全部下载到本地，请耐心等待
4. 如果弹出登录框，输入del.icio.us的帐号密码即可(如果你没有del.icio.us的帐号那就点这个看看demo吧)
5. 等待几秒钟(视你的书签数量不等)后页面将装载完毕，OK!输入一个查询或者点击tag列表进行享受性的书签浏览吧

其他：

1. t:<tagName>——这个用来搜索tag，如“t:blog”
2. d:<Description>——这个用来搜索标题和描述，支持中文，如“d:书签”
3. -t|d|keywords——用"-"号可以实现不包含查询，如要查询不包含"blogchina"，即“-blogchina”
4. 直接输入关键字就从url、title、description三个字段中进行查询

遗憾：

• 本工具只支持IE和FireFox浏览器，对于小部分的Safari用户，因为Safari本身不支持javascript端的XSLT，所以无法使用
• 搜索输入框实现了按键响应，即从搜索框中每次敲击键盘，就进行一次查询，这样虽然看似方便，但对于大量书签的用户，会产生片刻的输入拖延和停顿，我的机器是xp2500，也许高配置的机器操作时感觉会好点
• 目前打开一次这个工具就需要重新从del.icio.us的服务器上下载所有书签，所以显得不够即时，这也没办法，浏览器本身不支持数据的脚本对数据的本地保存
• 没有提供对tag的修改功能，其实通过那4个relate tag列表，已经给用户提供了非常良好的tag视察功能，如果用户能通过列表找到tag的不足进行即时修改岂不更好？

原理：

这项技术基本上是靠AJAX实现，即利用javascript和xmlhttprequest进行异步的数据交互，不过这其中和以往的AJAX有一点小差别，那就是这个小工具利用的是一个叫做client-side web service broker的技术，具体分析见我下一段，除过AJAX，在数据交互上还利用了服务端的XMLHttpRequest组件，这也属于一个关键应用。至于操作时的无刷新更改列表数据这就全靠javascript了，对tag相关性的检索、书签的检索以及列表排序，这就全靠XSLT的数据组织功能了。AJAX、XMLHttpRequest组件、XML+XSLT，这是实现本工具的三个重要技术，缺一不可。至于如何读出用户的del.icio.us书签列表，这是del.icio.us开放API中提供的服务，你只要Get这个url即能看见你的所有书签http://del.icio.us/api/posts/all，返回的是一组utf-8编码，xml组织的数据。

技术：

1. 客户端AJAX，或站内AJAX：此AJAX的特点是执行脚本所在的浏览页面和装载脚本代码的地址必须是同一站点，或者是脚本代码本身就放在客户端本地。比如我的站点想应用AJAX技术提供给浏览用户，这个实现AJAX的脚本代码必须放在我的域名地址下或者是由客户下载代码到本地后执行，这本来就是XMLHTTP规范的东西，即xmlhttprequest不能进行跨域操作。(我的AJAX翻译小工具即出自这个原理)
2. 服务器端代理AJAX：用户利用AJAX可以实现跨域的读取数据，其实数据不是直接由客户端发往请求服务器的，而是通过代码所在的站点进行转接请求操作，如我的那个Google排名查询工具，用户打开了我服务器上的执行页面，对Google的服务器进行数据请求，其实这其中是通过我的web所在的服务器进行转接的，客户发出命令，命令发到我的web上，web服务端脚本利用本身的xmlhttprequest(注：对于服务器，这时调用xmlhttprequest组件其实属于本地操作)对google进行数据查询，得到查询结果在返回给客户端，起到了媒人的作用。(看出不爽的地方了吗？没看出看下面的解释)
3. 客户端代理AJAX：这个想法真的很棒，太有创意了。本篇介绍的这个工具就是利用了这一条。我在安装那段第二条中写道：打开del.icio.us随便进入一个页面，为什么要必须打开一个del.icio.us的页面呢？因为只有打开这个页面你的浏览器当前域就属于del.icio.us了，这时候点击快捷栏上的书签时调用AJAX其实就赋予了代码的del.icio.us域的权利，所以才能实现从web1取代码后和web2进行通讯(以往这就属于跨域了)，关键就是先要打开一个del.icio.us的页面

利用第三个客户端代理技术最大的好处就是减轻了服务端的WebServices请求压力，我写的那个Google排名查询系统很多网友反映数据老是出错，这我也没办法，就是因为服务器压力过大再加上XMLHttpRequest组件的不稳定所致，现在通过客户端代理，压力全部放在了用户自己的机器上，出错几率当然降为最低了。其实在知道这个工具之前，我也曾想做个基于浏览器的tag浏览小工具，但是还是技术不行啊，想法也没人家大胆，经验也不足，我怎么没想到利用url实现远程跨域操作呢？不得不承认，这个工具所应用的技术和实现创意是我至今见过对AJAX驾驱最强的，尤其是利用url进行跨域操作以及通过XSLT实现超轻量级的数据库，堪称经典。相比之下，那些用AJAX只是实现无刷新读取数据的应用现在看起来是那么的粗陋。

本工具基于的这个客户端代理技术请看作者写的这篇——Creating A Client-Side Web Service Broker

服务端代理和客户端代理比较


界面截图

注：全文完

惨，那篇《AJAX的七宗罪》让CSDN给放到头条了，骂声一片，怪不得耳朵一直热热的……

我这个人还是胆小啊，连回复都没敢去，凭我多年在CSDN混得经验，越参合人家越来劲，不把你骂个体不完肤誓不罢休的，还是老老实实在我的老窝里小声牢骚下就行了^_^

其实对AJAX说yes还是no都无关紧要。AJAX给大家展示的是一幅唯美技术，了解它学习它，重要的是这个过程。那片文章中提起的两个用AJAX用过头的网站，其中的一个已经放弃了，全部改成普通页面了，这说明什么？技术是无罪的，用好用坏在于人，这就像一把刀，可以杀人，也可以切菜，一个道理。

虽然我写了那篇文章，但最近我还是尝试在用它，感觉还行吧。今天给一个客户修改CMS系统，工作量小，我有心尝试下新鲜热乎的AJAX，给一个列表加入了无刷新更新数据和排序，碰到了一个难题就是POST表单时对字节的编码，网上能找到的都不好用，最后还是自己钉钉补补改了一个自认为完美的

<script language="vbscript">
function urlencoding(vstrin)
    dim i,strreturn,strSpecial, t
    strSpecial = " <>""#%{}|^~[]`'&?+"&chr(13)&chr(10)
    strreturn = ""
    for i = 1 to len(vstrin)
        thischr = mid(vstrin,i,1)
        if abs(asc(thischr)) < &hff then
            if instr(strSpecial,thischr)>0 then
                if thischr = " " then
                  strreturn = strreturn & "+"
                else
                  t = hex(asc(thischr))
                  if len(t) = 1 then t = "0"&t
                  strreturn = strreturn & "%" & t
                end if
            else
                strreturn = strreturn & thischr
            end if
        else
            innercode = asc(thischr)
            if innercode < 0 then
                innercode = innercode + &h10000
            end if
            hight8 = (innercode  and &hff00)\ &hff
            low8 = innercode and &hff
            strreturn = strreturn & "%" & hex(hight8)_
 &  "%" & hex(low8)
        end if
    next
    urlencoding = strreturn
end function

</script>

注：全文完

昨天写了篇AJAX的七宗罪，有人专门给我发了mail，也有人专门写了文章指出我所说观点的弊端。今天无力也没必要再一一加以论证了，我就单独以WEB UI的眼光来看看AJAX。

AJAX有三大特点：异步交互(Asynchronous)，基于JavaScript 脚本，和XML封装数据。这三点包括了AJAX运行的全部特征，从客户端用javascript开始request数据后传到server，server用xml做接口用异步方式response数据，javascript在通过parseXML后最终进行UI处理。整齐干净利落的流水线工作，看起来毫无瑕疵，但是大家都忽略了其中的一个关键就是javascript。以下我一一罗列什么样的用户在访问AJAX时会碰到问题：

• 1、早期的浏览器，如IE4
• 2、关闭了浏览器的javascript脚本或者IE下完全禁用ActiveX
• 3、使用了企业级的防火墙、一些安全防护软件和IE里安全级别设置较高
• 4、一些非主流或者冷僻的浏览器，如盲人浏览器、手机浏览器
• 5、在IE或者FireFox里用了第三方浏览器插件或者使用了广告拦截
• 6、搜索引擎的爬行蜘蛛，一些基于http方式的软件，如离线浏览
• 7、一些浏览器安全软件(插件)的正常监控

列表中1、4估计情况还好点，起码部分的javascript能正常运行，这就给了UI设计者喘息之气，起码可以从页面底部显示一个本站推荐1024*768的分辨率下访问类似的提示信息或者跳转页面(跳转到无AJAX的页面——两手准备)的机会，但是像2、3、5情况，javascript根本不能运行就谈不上分析是不是支持AJAX了。我的Maxthon默认打开了软件本身的所有广告拦截设置，并且在每打开一个页面时运行一个叫做“清除烦恼”的第三方插件，这两个强强联手让我访问一些AJAX高级应用的web时普遍都出错。

还有一个我认为是很不爽的就是在AJAX下推崇的是无刷新，号称是大大提高了人机交互，在我看来恰得其反。http://www.standards-schmandards.com/exhibits/ajax/是一个纯AJAX制作的计算器的sample，输入数字后点击ADD，页面不用刷新酷酷的通过server端计算数据并传回结果。这个计算器曾经是大家相互link和学习的好例子，现在却成了基于AJAX下WEB UI的一个疑问。那就是点击ADD后用户不知道什么时候数据是更新了，也许你们也和我一样，输入6+3后然后开始等待，当value变成9的时候就知道运算结束了。晕，既然我知道结果是9那我算它干什么啊。当然，在屏幕上显示一个像"Loading"或者"正在计算中，请稍候..."这样的提示是个好主意，但是这同样需要用户去用眼睛盯着看结果的变化，而且并不知道数据的运算或者数据的传输进行到怎样一个情况，普通的submit表单起码还能看见一个进度条显示页面下载情况。还要注意的是这只是一个计算器，如果屏幕上有很多个计算器在进行同时的异步运算，不管是显示N个"Loading"，还是其他的方式的提示都是不尽人意的UI设计。

我还是坚持我的观点，AJAX在目前的web下最适合的就是企业级应用，大家在开发B/S系统时经常碰到的二三级联动或者树型目录的节点加载，用AJAX来实现简直太easy和完美了。而且在企业级应用不会出现以上所说的javascript问题，开发商完全有理由毫不犹豫地要求客户：我们的系统应用了最新最酷的web技术，所以要求系统用户的浏览器必须是IE6……

注：全文完