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

简介:

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

术语: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演示(动画演示和一个表单验证插件)

相关文章
|
6月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
49 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
2月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
109 1
|
3月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
35 1
|
3月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
3月前
|
JSON 安全 JavaScript
Web安全-JQuery框架XSS漏洞浅析
Web安全-JQuery框架XSS漏洞浅析
500 2
|
3月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
44 4
|
3月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
24 1
|
4月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
222 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
4月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
34 0
|
4月前
|
JavaScript 前端开发
Ajax的使用(jquery的下载)
这篇文章是关于Ajax学习笔记的分享,包括JQuery的下载方式、Ajax的主要参数说明,以及如何在网页中使用Ajax进行异步请求的示例代码。