推荐使用轻量级ajax框架-jQuery

1 minute read

小而强大是我们在系统开发的时候所追求的,用少量代码解决复杂问题这是优秀代码的灵魂; 而我们平常使用的架构、框架正是这种思想的实例化;

术语:RIA(RIA是Rich Internet Applications的缩写,翻译成中文为富因特网应用程序)技术 随着浏览器厂商对产品的标准化和Web2.0技术的成熟程度我们会经常在开发中使用AJAX这种看似简单但功能强大的技术,关于AJAX技术的介绍在此省略大家可以到网上查找相关 资料;在使用AJAX开发的过程中重点还是怎么提交表单、根据数据操作DOM,随后大量的JS框架、工具应声而起,像:prototype.js、jQuery.js、Ext.js以及单独用于Java语言的Dojo框架, 当然还有公司自己写的一些工具(操作DOM,获得XMHttpRequest对象、发送AJAX请求等等),因对于AJAX技术的兴趣所以就在项目中初体验了一把: 下面简单介绍这几个框架的特点: 一、prototype.js ??? 1、程序代码使用面向对象的思想实现,封装、分类很好,功能强大;$(‘标签ID’)返回的是原始的DOM对象 ??????? 例如: ??????? 1)隐藏一个DIV标签就可以这样写:Element.hide(‘divname’); ??????? 2)获得一个对象的value属性:$(‘loginName’).value; ??????? 发送AJAX请求: ????????? var url = ‘login.do’; ????????? new Ajax.Request( ??????????? url, ??????????? { ????????????? method:’post’, ????????????? onComplete:function(originalRequest) { ??????????????? var result = originalRequest.responseText; ????????????? } ??????????? } ????????? ); ??? 2、有完善的API文档,上手程度:容易,有一定DOM基础一周即可上手 ??? 二、DOJO ??? 一款基于JAVA语言的AJAX开发框架,因为和JAVA代码有耦合关系所以不推荐 ??? 三、Ext.js ??? 1、一款完全使用BS模拟CS的框架,功能相当强大、界面也很美观,堪称目前最完美的框架,代码封装很好易于调用,好像代码写法类似于prototype.js, ??? 这个没有怎么研究不发表意见,但通过看了一些DEMO和代码想熟练应用需要一段时间学习 ??? ??? 2、有完善的API文档,但功能强大的背后需要你花大量时间学习,公司讲究的是效率,而且Ext.js源文件相当庞大(大概1M左右) ?????? 上手程度:难 ?????? 四、jQuery.js ??? 1、是继prototype.js发布以来又一款优秀JS框架,jQuery.js最新的版本只有30k大小,和Ext.js比较一下吧…… ??? 2、强大的$()选择器: ??????? 1)根据ID属性选择对象:$(‘#idname’)返回一个 jQuery对象,当然可以通过.get(num)来获得原始的DOM对象 ??????? 2)根据class属性选择:$(‘.lock’),选择class为lock的对象 ??????? 3)根据DOM层级关系选择:$(‘div p’),选择div下面的所有p对象 ??????? 4)根据XPath选择:$(‘a[@title]’),选择所以带title属性的链接对象 ?????? 所以的选择操作都是使用$()这个不起眼的方法,这里就不在一一列举了,大家可以下载一个JS包然后根据API文档体验一把 ??? 3、AJAX请求: ??????? $.ajax({ ????????? url : url, ????????? data : { ??????????? id : detailId ????????? }, ????????? dataType : “json”,//返回数据类型(json|xml|文本) ????????? success : function(json){//成功时调用函数 ??????????? //循环设置文本框的值 ??????????? for (key in json) { ????????????? $(‘#’ + key).val(json[key]); ??????????? } ????????? }, ????????? error : function() { ??????????? $_form_common.dialog(‘加载信息失败,请重试!’,’error’); ????????? } ??????? }); ?????? 动态加载javascript文件: ??????? $.getScript(‘../../loadx.js’); ?????? 动态加载文件内容到页面: ??????? $.load(‘editForm.html’, function(){alert(‘加载完成’);}); ??????? ………… ??? 4、动画功能: ??????? 我们在开发一个系统的时候做一个动作可能会显得生硬,恰巧jQuery提供了动画功能,例如:$(‘#infoDiv’).fadeIn()做出淡入的效果也可以使用: ??????? $(‘#infoDiv’).fadeOut()产生淡出的效果,当然也可以自定义动画效果给用户另一种体验 ??? 5、另外一个惊喜是基于jQuery框架有几百种开发RIA应用的插件(包括:用户界面、DOM操作、表单、ajax工具、对话框、列表、翻页、动画插件和辅助工具等等) ??? 6、插件继承方便:因为插件都继承与jQuery框架,所以在使用插件的时候只要引入jQuery.js和插件的javascript文件就可以了 ??? 7、使用jQuery开发系统我们完全有能力用BS实现CS架构的系统 ??? 五:一些关于jQuery的资料: ??? 目前最新版本为:1.3.1 ? 1、官方网站:http://jquery.com/, ???? 插件下载地址:http://plugins.jquery.com/(包含所有RIA开发时使用的插件,想到的插件基本上都有) ???? 中文网站:http://wiki.jquery.org.cn/doku.php,BBS:http://bbs.jquery.org.cn/ ???? 另外国内一个RIA技术网站:http://www.cssrain.cn/,里面有很多关于 jQuery插件及技术帖子 ???? ? 2、在eclise中编写javascript插件spket,可以和编写java代码一样提示输入等,插件地址:http://spket.com/(安装方法就不用介绍了吧) ? ? 3、另外也有图书出版:《Learning jQuery》,为一个纯javascript框架出书还不叫少见…… ? ? 小而强大jQuery做到了,相信他会为我们节省不少的时间,而且会更好的提升用户体验 ? 因为jQuery小巧且功能强大,目前微软和诺基亚准备在不改变源码的情况下集成到自己的开发包中,这样的话以后的市场可想而知。 ? 说点题外话:前段时间在jQuery官网下载一个对话框插件的时候遇到了点问题就找作者询问,竟然是软件园的(世界真小) ? ? 前段时间业余时间使用jQuery开发了一个小系统,因为不常在公司所有有兴趣的同事可以通过wotalk联系 ? ? 附:jQuery资料.rar ??? 1)jquery.js的源码(原始版本、最小版本、压缩版本) ??? 2)API文档 ??? 3)一些学习资料 ??? 4)DEMO演示(动画演示和一个表单验证插件)