j15Ajax技术及Ajax框架简介.pptVIP

Ajax框架的分类 客户端的Ajax框架 服务端的Ajax框架 1、Dojo 2、Rico 3、Tibet 4、Flash/Javascript集成框架 5、Google AjaxXLT 6、libXmlRequest 7、RSLite 8、sack 9、sarrise 10、XHConn 11、JQuery 1、CPAINT 2、Sajax 3、JSON/JSON-RPC 4、Direct Web Remoting 5、SWATO 6、Java BluePrints 7、AjaxNet 8、Microsoft的Atlas项目 9、Ruby on Rails 如何引用Ajax框架？ 若是.jar文件，则将下载的框架文件添加到项目中的lib文件夹中 若是.js文件，则将.js文件直接添加到存放js文件夹中 script type=text/javascript src=../js/jquery-1.4.2.min.js /script script type=text/javascript $(function() { $(input:text).mouseover(focusSelect); $(input:password).mouseover(focusSelect); }); function focusSelect() { this.focus(); this.select(); } /script 使用框架的步骤 下载框架文件 将框架文件拷贝到指定的文件夹中 在文件中引用框架 使用jquery框架示例 将下载好的jquery库文件放置到js文件夹中 创建文件userJQuery.html userJQuery.html代码如下 script type=text/javascript src=../js/jquery-1.4.2.min.js/script script type=text/javascript $(function() { $(input:text).mouseover(focusSelect); $(input:password).mouseover(focusSelect); }); function focusSelect() { this.focus(); this.select(); } /script ...... table border=1 cellspacing=0 cellpadding=0 trtd用户名：/td tdinput type=text name=name //td/tr trtd密码：/td tdinput type=password name=password //td/tr /table JQuery的基本知识 jquery是一个优秀的JavaScript框架 丰富的JS、CSS、DOM、Ajax于一体 主要提供的功能： 访问页面框架的局部 修改页面的表现（Presentation） 更改页面的内容 响应事件 为页面添加动画 与服务器异步交互 简化常用的JavaScript操作 演示示例2：页面对象拷贝示例 页面动画示例 script type=text/javascript src=../js/jquery-1.4.2.min.js/script script type=text/javascript $(function(){ $(input:first).click(function(){ $(img).hide(3000); }); $(input:last).click(function(){ $(img).show(1000); }); }); /script input type=button value=隐藏 value=Hide() / input type=button value=显示 value=Show() / pimg src=../images/013.png/p 演示示例3：页面对象的显示/隐藏 页面动画示例 对上面的例子进行更新：实现渐渐出现、渐渐隐藏的效果 对多个浏览器都支持，不需要开发者再去判断浏览器的类型 演示示例4：页面对象的显示/隐藏 本讲任务 了