其中包含 PPT, DWR JQUERY 及 多套资料文档 AJAX学习 作者：高伟 2009.11.18 E-mail:mygw@163.com QQ:349566018 目录 一．AJAX是什么 二．为什么要使用AJAX 三．怎么使用AJAX 四．AJAX 有哪些优秀开源框架 五．AJAX会有怎样的未来 AJAX是什么 历史1998 2009 2005 Outlook Web Access 的组件XMLHTTP Internet Explorer 4支持 Google讨论组、Google地图、Google搜索建议、Gmail 大量的开源框架 不同的业务应用开始支持 AJAX是什么 AJAX基础 AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML） 它不是单纯的一种技术，而是多种技术的融合。 包括： 使用XHTML+CSS来表示信息； 使用JavaScript操作DOM（Document Object Model）进行动态显示及交互； 使用XML和XSLT进行数据交换及相关操作； 使用XMLHttpRequest对象与Web服务器进行异步数据交换； 使用JavaScript将所有的东西绑定在一起。 使用SOAP以XML的格式来传送方法名和方法参数。 AJAX是什么 注意：AJAX核心技术是JavaScript，而与JavaScript又有本质的区别，AJAX是多种WEB技术的融合，其中就包含了JavaScript AJAX是什么 创建核心对象XMLHttpRequest –在Mozilla, Firefox, Safari, Netscape中创建: var xmlhttp=new XMLHttpRequest() –在Internet Explorer 5.5, 6, 7,8中创建: var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") 或 var xmlhttp=new ActiveXObject("Msxml2.XMLHTTP") AJAX是什么 JavaScript高级特性 任何类型或对象均可以被定义为var 例如： 1.var a=55;var b=“abc”; 2.var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") 3.var alertf = window.alert; alertf(‘msg’); AJAX是什么 JavaScript高级特性 JS面向对象设计 1. var myObject= { username : "beansoft", age : 24, test : function() { alert(this.age); } }; myObject.test(); 2. var myObject= new Object(); myObject.username= "beansoft"; myObject.age= 24; alert(myObject.age); 下接 AJAX是什么 JavaScript高级特性 3. function MyObject(username, age) { this.username = username; this.age = age; this.test = function() {alert(this.age);}; } var myObject = new MyObject(“test", 24); alert(myObject.username); myObject.username="test1"; alert(myObject["username"]); 为什么要使用AJAX 特点 Web 1.0 为什么要使用AJAX 特点 WEB2.0 为什么要使用AJAX 特点 为什么要使用AJAX 特点 1、异步交互 2、用户体验优秀 3、网页内容动态载入 为什么要使用AJAX 优点 1、按需加载，减轻服务器的负担 2、响应速度快 3、不需要插件支持 4、用户体验良好 5、充分利用客户端资源（利用闲置客户端资源） 为什么要使用AJAX 缺点 1、开发难度大（设计编码测试） 2、浏览器兼容性有待提高（手机、PDA这些设备尤其突出） 3、搜索引擎不友好（SEO不好优化） 4、浏览器前进、后退按钮失效 5、胖客户端 为什么要使用AJAX RIA 丰富型互联网应用程序（Rich Internet applications，简称RIA）是一种具有近似于传统桌面应用系统功能和特性的网络应用系统。RIA系统最大的特点是将大部分处理任务都从用户界面端移植到客户端，仅保留一些必要数据与服务器端进行信息交互。 RIA凭借自己不需要安装，只要有浏览器支持就可以运行的特点，吸引着无数人的眼球，其中代表是Flex Ajax自身也是RIA范畴中的成员，Flex目前还存在很多缺点自然Ajax 还在RIA中占据着大哥的位置 怎么使用AJAX？ 用法-例子 <HTML><HEAD><TITLE>Hello,world!</TITLE></HEAD><BODYonload="HelloWorld()"><DIVID="ajax-sample"></DIV></BODY> </HTML> 怎么使用AJAX？ //获取Http请求对象，这个对象用于客户端向服务端发送异步的http请求functiongetHTTPObject(){varhttp;varbrowser=navigator.appName;if(browser=="MicrosoftInternetExplorer"){//如果用户使用IE，就返回XMLHTTP的ActiveX对象http=newActiveXObject("Microsoft.XMLHTTP");}else{//否则返回一个XMLHttpRequest对象http=newXMLHttpRequest();}returnhttp;} 怎么使用AJAX？ //获取全局的HTTP请求对象varhttp=getHTTPObject();//处理请求状态变化functioncallback (){//4表示请求已完成if(http.readyState==4){//获取服务段的响应文本varhelloStr=http.responseText;//插入响应到ID为ajax-sample的DIV标签内document.getElementById("ajax-sample").innerHTML=helloStr;}} 怎么使用AJAX？ functionHelloWorld(){varurl="hello.jsp";//指定服务端的地址http.open("GET",url,true);//请求状态变化时的处理函数http.onreadystatechange=callback;//发送请求http.send(null);} hello.jsp页面 <%out.print(“hello world!”);%> 怎么使用AJAX？ 用法-描述 1.open创建请求 2.send发送请求 3.onreadystatechange捕获请求的变化状态 4.readyState判断请求状态 5.status判断请求结果 6.responseText 返回文本 7.responseXML返回XML文档 8.abort取消当前请求 怎么使用AJAX？ 用法-readyState状态说明 0 (未初始化)：(xml(标准化越来越近了)HttpRequest)对象已经创建，但还没有调用open()方法。 1 (载入)：已经调用open() 方法，但尚未发送请求。 2 (载入完成)：请求已经发送完成。 3 (交互)：可以接收到部分响应数据。 4 (完成)：已经接收到了全部数据，并且连接已经关闭 怎么使用AJAX？ 用法-常见问题及解决 跨浏览器问题（标准语法，通用CSS） 性能问题（压缩代码、按需载入JS） 搜索引擎问题（使用冗余地址url#a url?a） 怎么使用AJAX？ 开发及调试工具 AJAX核心技术是JS，因此JS的优秀调试工具即能调试AJAX 开发 Aptana Studio Aptana Studio是一个完整的网络开发环境。它提供有JavaScript代码自动完成和调试，HTML/CSS/JavaScript代码提示，以及对重要的Ajax类库的支持。Aptana Studio甚至给你页面上所有的，包括你自己的JavaScript提供代码提示。 Komodo Edit Komodo Edit是一种免费开放的源编辑程序。它提供自动完成，调用提示，多种语言支持，语法高亮颜色显示，语法检查，Vi emulation，Emacs快捷键绑定等等功能。扩展Komodo Edit是其最实用的功能之一。你会发现各种对JavaScript开发者有用的扩展（如JSLint plugin for Komodo,Venkman JavaScript Debugger，等等）。 Spket IDE Spket IDE是JavaScript和XML开发功能强大的工具包。JavaScript, XUL/XBL and Yahoo! Widget开发功能强大的编辑器。JavaScript编辑器有代码完成，语法高亮显示和内容概要等功能，这些功能帮助开发者高效制作出有效的JavaScript代码。Spket IDE为非商业用途免费提供。 怎么使用AJAX？ 调试 Firebug 作为最受欢迎的网页开发程序工具，Firebug是Firefox的一个插件，可以用它在任何网页上现时编辑，调试和监控CSS, HTML, 和JavaScript。它提供给JavaScript登陆和调试控制台一些有用的功能如AJAX requests logging，JavaScript解释器，DOM explorer等等。Firebug Lite可以在IE, Opera, 和Safari上使用。 IE Developer toobar 微软公司提供给页面开发人员的一套调试工具 Javascript调试工具包 JavaScript调试工具包是一种跨浏览器调试JavaScript的eclipse plugin，它可以在IE,Firefox,Safari,Chrome,Opera甚至是移动浏览器上调试JavaScript。 Venkman Venkman为基于Gecko的浏览器提供功能强大JavaScript调试环境。这个调试器以Firefox & Mozilla插件的形式使用。可以在用户界面上和控制台命令中使用断点管理，调用栈检查，变量/对象检查等功能，可以让你以最习惯的方式调剂。 NitobiBug NitobiBug是一种基于浏览器的JavaScript对象记录和检查工具——与Firebug作用相似。NitobiBug在可以在不同的服务器（IE6+, Safari, Opera, Firefox）上运行以提供开发各种Ajax应用程序一致且功能强大的工具。 DamnIT DamnIT是一种免费服务，当用户在网页上遇到JavaScript错误时它会给你发送电子邮件。 JS Bin JS Bin是一种在线网络应用程序，为帮助JavaScript开发者在一定情景里测试代码片段以及协作调试代码而特别设计。你可以用JS Bin在线编辑测试JavaScript和HTML代码。一旦完成，你可以将URL保存并发送给同伴来进行审查或获得帮助。 Blackbird 许多JavaScript开发者仅仅使用alert()来显示各种信息调试代码。Blackbird在JavaScript上提供了记录信息的简单方式以及一个引人注意的控制台程序来察看并过滤信息。 AJAX 有哪些优秀开源框架 Prototype DWR DOJO jQuery EXT AJAX 有哪些优秀开源框架 Prototype Prototype真正意义上只是一个类库，许多的AJAX框架都扩展prototype而来，大名鼎鼎的$() 获取dom 的ID方法就来源于此。 Prototype 是由Sam Stephenson 所开发的JavaScript开发函式库及框架。它提供了完整的Ajax框架及其它的工具。它的代码完全包含在一个单一的prototype.js 文件中。 优点：基本底层，易学易用，甚至是其他一些js特效开发包的底层，体积算是最小的了。 缺点：如果说缺点，可能就是功能是他的弱项 AJAX 有哪些优秀开源框架 DWR DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).它的最新版本DWR0.6添加许多特性如:支持Dom Trees的自动配置,支持Spring(JavaScript远程调用spring bean),更好浏览器支持,还支持一个可选的commons-logging日记操作. AJAX 有哪些优秀开源框架 DOJO Dojo是一个用JavaScript语言实现的开源DHTML工具包。它是在几个项目捐助基础上建立起来的(nWidgets, Burstlib, f(m))，这也是为什么叫它a unified toolkit的原因。Dojo的目标是解决开发DHTML应用程序遇到的那些、长期存在、历史问题，以及DHTML 跨浏览器问题。 Dojo能够让你更容易使Web页面具有动态能力，或者在任何能够稳定支持JavaScript语言的环境中发挥作用。 优点：库相当完善，发展时间也比较长，功能强大，据说利用Dojo 的io.bind() 可以实现comet 看见其功能强大非一般，得到IBM 和SUN 的支持。 缺点：文件体积比较大，500多KB，初次下载相当慢，此外，Dojo 的类库使用显得不是那么易用，JS语法增强方面不如Prototype AJAX 有哪些优秀开源框架 jQuery jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。 jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。 优点：注重简介和高效，js 效果有yui-ext 的选择，因为yui-ext 重用了很多jQuery 的函数 缺点：门槛高，不易入门。 AJAX 有哪些优秀开源框架 EXT ext是一个强大的js类库,以前是基于YAHOO-UI,现在已经完全独立了, 主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid了,编程思想是基于面对对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了. 主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口),在引用ext类库的时候.这三个文件必不可少. 它提供了丰富的，非常漂亮的外观体验，成为众多界面层开发人员的追捧！其核心的组件基本覆盖了我们构建富客户端的常用的组件。 从Ext 2开始，商业版(针对那些以盈利为目的的开发方)要收费了。这可能会影响一些他的应用前景。 目前的最新版本为3.0，该版本是在2009年5月4日发布的。 优点：结构化，类似于java 的结构，清晰明了，底层用到了Jquery 的一些函数，使整合使用有了选择，最重要的一点是界面太让让人震撼了。 缺点：太过复杂，整个界面的构造过于复杂。 AJAX会有怎样的未来？ AJAX会有怎样的未来？ ……………………. AJAX学习交流结束啦！...展开收缩
相关文章
精彩导读
热门资讯
关注我们
