[转贴] 20个你应该知道的Ajax技术
1) TextboxList自动完成 (源码,演示)1 u6 P8 B- e7 v. f5 _ H
这个控件主要来自Facebook吧,在网易的邮件里也能看到,还有hotmail等等,在文本框里输入文本不但可以出现相关数据的列表,而且选中后的字符串还会变成一个小图标。这个控件主要用在电子邮件中吧。
2 d$ n3 [ S$ Q" c$ v3 r
2) Ajax IM即时聊天 (源码,演示)8 t( J7 T3 l; H" H
Ajax IM是一个很牛的即时聊天的客户端,你可以使用它制作一个Web-Based的即时聊天工具,这是一个非常强大的Ajax技术。
( w" D2 I( C& l: o1 B& n5 W/ N
3)即时校验用户的输入(源码,演示)
以前,检验WEB表单的输入需要放在后台,因此,用户需要提交表单数据到后台才能知道是否所填写的内容有误。Ajax把实时检测表单输入域变成了现实,如今,我们在网上已经能看到很多很多的这样的应用,比如在你注册一个用户输入一个用户名的时候,不用提交整个表单到后台,你就能知道用户名是否已被人使用。
L+ a. v. i3 a8 U
4)即时编辑器(源码,演示)
所谓即时编辑器就是双击一下网页上的文本,于是你就要吧编辑它了,编辑完后再单击一下别的地方,编辑过的内容就会被提交到后台保存。在这里,给出的示例是一个非常小巧的即时编辑器—— inline editor2 m1 G$ Q- _( r3 n, x
/ B8 W% M* ?; q7 x3 X e8 E
5)Ajax 式文件上传3 T, |: j) H; {. T/ F
使用Ajax上传文件会让用户得到非常好的用户体验,上网随例搜索一下,有太多太多的各式各样的文件上传的Ajax源码可以使用。然而,在coderproject网站有,你可以下载到一款非常小又非常好的Ajax程序,网址如下:http://www.codeproject.com/KB/aspnet/AJAXUpload.aspx。
当然,如果你要一次上传多个文件,那个这个小程序还不足以满足你。不过,你可以使用JQuery的JQUploader。
0 c& Q8 d% W5 n, @
6)Fancy Upload (源码,演示)- a' `" i5 A. Y- \- }1 k* J
更为迷人的文件上传程序,你可以试试Fancy Upload,它通非常优秀的Javascript框架MooTools(http://mootools.net/)构造。
7)点击记录ClickHeat (源码,演示)
ClickHeat是一个非常简单而非常强大的Ajax技术,它可以记录下访问者们对你网站的点击坐标,以便于你分析你网站的访问者的习惯和他们的关注点。- a# q( l. W5 R( X# X! i4 T4 }! Y$ ?0 S
源码,演示)% e% T: S& w k9 J0 q8 d
这里主要推荐一款叫Maillist的Ajax程序,这是用来校验并提交电子邮件的地址的(不需要刷新页面),这样的设计极大地方便了用户的使用邮件订阅某些更新。我们想想看,这样的用户体现绝对会让你网站的用户特别愿意提交他们的电子邮件。( e/ K c4 l! ]* r% }" p* ?0 u/ n, ? S% b, W0 t( i {7 H6 q% D
管理器 (源码,演示)
使用Ajax做一个在线的WEB的目录浏览器是非常酷的事情,如果没有Ajax,这样的用户体验除上让用户装一个ActiveX控件,我们几乎无法在Web上实现。在这里,我们推荐Relay这个框架,它基本上有这样一些功能,a)支持文件拖拉,b)动态地载入文件目录列表,c)还有上传的进度条,d)支持多用户帐号。还有很多很多。Relay绝对实现了你所能想得到的功能。" J1 H9 [9 q$ y* W y6 B( @7 ^- T. A3 C7 T/ f" x. Q- G' U+ w' W
10)Ajax邮件客户端
目前,太多太多的邮件系统越来越多的使用Ajax技术。在用户体验方面,Gmail和网易邮箱最好。Hotmail的界面和outlook很相似了,可惜的是hotmail的运行速度感觉就像一辆后面拖着大石头的跑车。如果你想要开发一个Ajax的邮件客户端,那么,你一定要读一下下面的这篇文章:
http://www.devarticles.com/c/a/XML/Take-AJAX-to-Your-Email-Inbox-Developing-a-Webbased-POP-3-Client/
! C( D" h! G( ?( d, ?1 C! ^2 h
增强WEB表单的Usability有很多很多的方法,在网上一搜一大片,然后有些时候,用户会被表单搞得很混乱,而且,不同的用户会对表单有不同的理解,其输入也是千奇百怪。所以,为表单字段增加一下自动帮助信息的提示绝对是非常不错的选择。这点在淘宝网上表现得比较出现。下面是一个非常简单短小的教程。
http://woork.blogspot.com/2008/04/improve-form-usability-with-auto.html* J! G4 o( ^. m. t7 l
7 ]% Y$ `' T4 K7 u$ l7 O; O1 @8 p
8 Z7 a+ Q6 y) u* H8 V& ~ h9 \
12) qGallery (演示)# f' N" m( K9 g* |! ]
虽然这不是一个有丰富功能的图库应用,但这绝对是一个非常优秀的Ajax应用。它基于Prototype Javascript框架(http://prototypejs.org/)制作,它对图片集的处理是非常优秀的。而且是它在节省网络带宽方面也很出色。本文写作之时,他目前还在开发阶段,还没有开放给大家下载。不过再等几个星期也就差不多该Release了。4 [# }' X. P" T0 J' ^0 j: j3 D
! H) v. R' V% t4 M
13)Ajax 星式打分(源码,演示)" A F0 t6 @' h0 J. f
人们总是想给他们身连的事物表达他们的喜恶,所以有一个星式打分控件绝对能满足他们的欲望。一个非常简单的Ajax脚本可以从下面的链接找到:http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar/
14)CakePHP Ajax表单" O2 e9 Y" O* R0 x: G
如果你是 Django 或 CakePHP的使用者,那么你应该要感谢CakeBaker 的这个教程——《how to submit a form with Ajax》,而它最强大的功能在于,如果我们的浏览器disable了Javascript,表单照样能够正常提交。) r& H" v2 c/ n# N' e! K
15)Amberjack 站点导航(源码,演示)
在Web开发,Amberjack绝对令人过目难忘的Javascript库,它能够帮助你快速地创建站点导航。Amberjack 最优秀的地方是,这个javascript库只有4K大小,但却有令人难以置信的简易。
O$ O, [6 v, @) H& ^' [
16)Prototype UI(源码,演示)& b3 y4 w0 K/ _' T" H
Prototype UI基于Prototype 和Scriptaculous开发而成,它主要提供一堆图形界面的控件,本质上来说,他是一个用户接口类库,这个类库目前还持续增加中。而且所有的控件都可以很方便地定制。
, X% S1 Z7 p6 D& j1 B# s: Q
17)JCrop (源码,演示)
在线的图片编辑显然是一个很棘手的事,那怕你使用photoshop,你也会觉得很难使用。当然,对于更多人,我们并不需要使用太多太复杂的图片编辑功能,如果有你上传图片的时候有这么一个功能可以让你剪裁你的图片,那么将会是一件很方便的事情。JCrop是一个jQuery 的插件,它允许你上传图片,并提供了非常多丰富的图片剪裁功能。很有前途。& H: C$ w, P/ `" f9 A) Q7 U
% d$ x+ o7 p' l5 G
18)JQuery Auto-tabbing 插件(源码,演示)9 j, }7 P) a/ D Z( l: c/ U, v
我们知道,在我们输入WEB表单的时候,当我们输入完一个字段的时候,我们需要按Tab键或是用鼠标去点击下一个输入域,所以,如果有一个好的插件可以让光标自动跳到下一个输入域,这会是一个非常不错的用户体验。这个JQuery的插件可以做到这件事。6 A( a' r8 O3 R
源码)
单击表格头标题可以根据该列对整个表格排序,是一个非常不错的功能。这里有一个非常不错的教程教你如何做到这个事,其最终的Javascript是sortable.js。) [" ]( _! H4 W' w, X" u
1 d' s) A; X; S5 a6 Z s" V
20) DrasticMap (源码,演示)3 Z5 s. U: @: U( N% v
Google Maps大家都很熟悉了,DrasticMap 可能让你后台的PHP和Mysql数据库同Google Map链动起来,它可以方便地把存储在数据库里的经纬库坐标展示在Google Map上。而且,它相当的灵活,它似乎可以被无限度