• 1. Ajax技术培训 2008-02蔡振兴----武汉FS研发中心
  • 2. 交流议程1、Ajax概述 2、Ajax的优势 3 、Ajax相关技术简介 4、Ajax相关技术深入 5 、几种流行的Ajax框架
  • 3. 1、Ajax概述 2005年Web2.0成了人们关注的焦点.无论是在搜索引擎网站的热门关键字中,还是在众多Blogger(博克)的日志描述中,Web2.0都是一个频繁出现的词汇.伴随着Web2.0的诞生,互联网进入了一个更加开放,交互性更强,由用户决定内容并参与共同建设的可读写网络阶段.早期的Web用户大多数是被动接受网络提供的相关内容,Web2.0更多提倡的理念是Web服务的亲和力,可操作性,即更多的关注用户的体验,用户的感受.
  • 4. Ajax是Web2.0阶段系列技术和相关产品服务中非常重要的技术.其全称为异步JavaScript和XML(即Asynchronous JavaScript and XML).从中可以看到与Ajax直接相关的几个技术点;一个是异步,二是JavaScript,三是XML. 这也反映了这项技术关注的两个问题:一是借助异步JavaScript实现浏览器和服务器之间的异步交互,如无需重载整个页面就可以向服务器发送请求,并接受响应.二是对XML文档的解析和处理. Ajax如何首先处于异步处理状态?当你发送HTTP请求,你不希望浏览器挂起并等待服务器的响应,取而代之的是,你希望通过页面继续响应用户的界面交互,并在服务器响应真正到达后处理它们。要完成它,你可以向XMLHttpRequest注册一个回调函数,并异步地派发XMLHttpRequest请求。控制权马上就被返回到浏览器,当服务器响应到达时,回调函数将会被调用。
  • 5. 同步交互方式用户界面Web服 务器数据库 服务器HTTP请求HTTP+CSS浏览器客户端服务器端
  • 6. 异步交互方式 AJAX用户界面Java ScriptHTML+CSSWeb服 务器数据库 服务器HTTP请求XML数据浏览器客户端服务器端
  • 7. 2、Ajax的优势1、减轻服务器的负担。因为Ajax的根本理念是“按需取数据”,所以最大可能在减少了冗余请求和对服务器造成的负担 2、无需刷新更新页面,减少用户实际和心理等待时间; 3、更好的用户体验; 4、也可以把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,节约空间和带宽租用成本; 5、基于标准化的并被广泛支持和技术,并且不需要插件或下载小程序; 6、Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离);
  • 8. 3、Ajax相关技术简介 1.JavaScript 脚本 2.XHTML和CSS XHTML的全称是可扩展的超文本标记语言(Extensible HyperText Markup Language),是一种为适应XML而重新改造的HTML超文本标记语言.在设计上要比HTML更加严密. CSS层叠样式表是为了弥补HTML超文本标记语言在格式修饰中的不足,同时也为了能够实现页面格式的批量动态更新. 3.DOM DOM的全程是文档对象模型(Document Object Model),它本质上是一个文档平台.借助DOM可以对HTML和XML数据进行解析或更新.
  • 9. 4.XML和XSTL XML可扩展标记语言,它的优势在于允许各个组织,个人建立适合自己需要的标记符号.它最大的优点就在于它的数据存储格式不受显示格式的制约. XSTL的全称是可扩展的样式表转换语言(即 Extensible Stylesheet Transformation Language),它是一种用来转换XML文档结构的语言.它的作用是配合XML进行显示.是XML的样式表,和CSS的区别在于它因为要重新索引树的结构,所以消耗内存比较多,但比CSS更加灵活.
  • 10. 5.XMLHTTPRequest XMLHTTPRequest是Ajax中最重要的一个对象.一个页面可以在不刷新的情况下通过一个XMLHTTPRequest发送请求来获取服务器的响应.开发人员也可以通过使用该对象在不刷新当前页面的情况下更新页面中的数据. XMLHTTPRequest是浏览器中已经定义好的对象,它是Ajax技术的核心组成部分,JavaScript通过它和服务器之间进行通信,并通过它解析从服务器传回来的XML文件. 它最早是由微软做为一个ActiveX对象实现的,之后其它流行的浏览器都提供了对它的支持,在定义它的时候IE和其它浏览器会有所不同.
  • 11. 4、Ajax相关技术深入创建XMLHttpRequest对象 var XMLHttpReq; //创建XMLHttpRequest对象 function createXMLHttpRequest() { if (window.XMLHttpRequest) { //Mozilla 浏览器 XMLHttpReq = new XMLHttpRequest(); } else { if (window.ActiveXObject) { // IE浏览器 try { XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } } }
  • 12. Ajax不同请求方式的处理 1.采用GET方式提交请求 2.采用POST方式提交请求 3.提交XML格式的请求参数
  • 13. 1.采用GET方式提交请求 //发送请求函数 function sendRequest() { createXMLHttpRequest(); XMLHttpReq.open("GET", “login?uname=" + uname+”&psw=“psw, true); XMLHttpReq.onreadystatechange = processResponse;//指定响应函数 XMLHttpReq.send(null); // 发送请求 }
  • 14. 2.采用POST方式提交请求 在使用POST方式提交请求时,对应的参数将作为请求体的一部分进行发送,这一点与GET方式不同.GET方式是将参数作为URL的一部分追加在其后面. //发送请求函数 function sendRequest() { createXMLHttpRequest(); XMLHttpReq.open(“post", “login”, true); XMLHttpReq.onreadystatechange = processResponse;//指定响应函数 XMLHttpReq.send(“uname=" + uname+”&psw=“+psw); // 发送请求 } 注意:get和post区别在于,get提交给服务器的信息大小是有限制的,采有post就没有这个限制.true表示不会继续执行,直到服务器返回信息.
  • 15. 3.提交XML格式的请求参数 客户端通过Ajax除了可以处理从服务端返回的XML数据,还可将请求参数作为XML的个数发送到服务端. //发送请求函数 function sendRequest() { createXMLHttpRequest(); var xml =createXML(); XMLHttpReq.open(“post", “login”, true); XMLHttpReq.onreadystatechange = processResponse;//指定响应函数 XMLHttpReq.setRequestHeader(“Content-Type”,application/x-www-form-urlencoded”); XMLHttpReq.send(xml); // 发送请求 }
  • 16. Ajax的响应处理 从服务器发回的响应数据既可以是文本串的形式,也可以采用XML文档的格式.当数据比较复杂时,往往需要使用XML结构化方式来表示数据.如果数据格式并不复杂,要考虑性能因素的话就可以采用纯文本的形式. responseText属性 当从服务端返回的数据比较简单时,如登录失败的提示信息,就可以用纯文本的形式,在客户端用responseText表示返回信息. 代码如下: if(XMLHttpReq.readState ==4){ //判断对象状态 if(XMLHttpReq,status ==200) //信息已经成功返回,开始处理信息 var res=XMLHttpReq.responseText; window.alert(res); }else{ //页面不正常 window.alert(“你所请求的页面有异常.”); } } }
  • 17. responseXML属性 当从服务端返回的数据比较复杂时,如查询的结果集,就需要通过XML来表示数据,在客户端信息都保存在responseXML中. 代码如下: if(XMLHttpReq.readState ==4){ //判断对象状态,4表示服务器已传回所有信息 if(XMLHttpReq,status ==200) //信息已经成功返回,开始处理信息,确定返回的页面是否有错 var res=XMLHttpReq.responseXML.getElementByTagName(“res”)[0].firstChild.data; window.alert(res); }else{ //页面不正常 window.alert(“你所请求的页面有异常.”); } } }
  • 18. 使用 DOM操作HTML文档 事例代码如下: var row, cell, txtnode; row = document.createlement(“tr”); cell = document.createment(“td”); cell.setattribute(“bgcolor”,”#fffafa”); cell.setattribute(“border”,”0”); txtnode= document.createtextnode(data); cell.appendchild(txtnode); row.appendchild(cell);
  • 19. DOM中相关属性和方法 常用的几种结点类型 element:元素结点(如:,等) text:文本结点 document:document comment:注释的文本 documentFragment:document片断 attr:结点属性
  • 20. document对象的常用方法 createAttribute():用指定的名字创建新的attr结点,即属性结点 createComment():用指定的字符串创建新的comment结点 createElement():用指定的标记创建新的element结点 createTextNode():用指定的文本创建新的textNode结点 getElementById():返回文档中具有指定id属性的element结点 getElementsByTagName():返回文档中具有指定标记名的所有element 结点
  • 21. Element对象的常用方法 getAttribute():以字符串形式返回指定的属性值 getAttributeNode():以attr结点的形式返回指定属性的值 getElementsByTabName():返回一个Node数组,包含具有指定标记的所有element结点的子孙结点,其顺序为在文档中出现的顺序 hasAttribute():如果该元素具有指定名字的属性,则返回true removeAttribute():从元素中删除指定的attr结点 setAttribute():把指定的属性设置成指定的字符串值,如果该属性不存在就添加一个属性 setAttributeNode():把指定的attr结点添加到该元素的属性列表中
  • 22. 5 、几种流行的Ajax框架Prototype's JavaScript 特性   Prototype 是最受欢迎的AJAX框架之一。Ajaxian.com网站2006年的调查结果显示,Prototype同框架规模庞大的Yahoo! User Interface, Google Web Toolkit, and Atlas.等相比较起来,其排名竟然遥遥领先,这不能不令人感到惊异。 答案很简单:Prototype使用起来就像是对于JavaScript语言的自然扩展。尝试过Prototype框架后,觉得Prototype框架应该被纳入JavaScript语言。 对于我们的案例,紧凑、强大并且设计合理的Prototype框架再合适不过了。通过Ajax.Request对象建立两个指向服务器端资源(PBX和账户查询)的并发调用,完成了第一个挑战——资源整合。Ajax.Request对象是对于XMLHTTPRequest对象的跨浏览器抽象,可向服务器端发送普通请求或者异步请求。当调用请求结束时,Ajax.Request对象把回调函数的名字作为参数返回。 因此,通过以下两个连续的调用实现了指向PBX系统两次请求:
  • 23. function getInfo() { //load params from form var callerNum = $F('callerNum'); var url = 'http:///ServiceProvider/pbxService'; var pars = 'callerNum=' + callerNum; //asynchronous calls are used as default var response = new Ajax.Request( url, { method: 'get', parameters: pars onComplete: showPBXResponse }); var callerName = response.responseText ; var url = 'http:///ServiceProvider/acctService'; var pars = 'callerName=' + callerName; var acctResponse = new Ajax.Request( url, { method: 'get',parameters: pars onComplete: showAcctResponse }); }
  • 24. //callback functions function showPBXResponse(requestResults) { //show returned value in the PBX area $('pbxResult').value = requestResults.responseText ; } function showAcctResponse(requestResults) ...
  • 25. Dojo ——神奇的界面工具集世界   Dojo是一种颇受欢迎的开源框架,对于web界面工具集和web开发中与后端系统间交互等诸多重要方面提供广泛的支持。在各种工具中,有些可直接用来渲染呼叫用户列表(Dojo使用手册中这部分的文档不完整),其它像多选列表项的异步调用等则需要作进一步定制工作。 Dojo界面工具的定制需要深入了解Dojo的底层。Dojo的定制机制非常灵活,通晓javascript语言并且对于Dojo框架的细节了如指掌。定制的可能性是无限的。 对于多个后端异步调用的实现,采用了dojo.io.bind对象。Bind对象可实现对后端资源的调用并将结果返回给回调对象。下面的代码完成了针对PBX交换系统的调用。
  • 26. var getURL = 'http:///ServiceProvider/acctService?callerName=' + callerName; dojo.io.bind({ url: getURL, /* URL to be called */ load: function(type, data, evt){ /* normal callback code here */ }, error: function(type, error){ /* error handling callback defined here */ }, mimetype: "text/plain" });
  • 27. DWR — 令人激动的服务器端集成 DWR (Direct Web Remoting) 同上述的框架性质上完全不同。DWR的重点是浏览器/服务器的交互。DWR框架的大部分API函数也是针对这种交互的。DWR是基于java的框架,最适用于后端运行java应用的情况。 因为这些特性,DWR为开发呼叫中心应用提供了一种有趣的途径。这种方法不再使用AJAX控制从服务器返回的文本信息,而是使用javascript调用DWR框架的远程异步对象。实现起来很简单:通过在浏览器端的JavaScript构造和调用PBX和相关JAVA对象。这样就通过优雅而简洁的方式完成了客户端和服务器端的集成。 在Java代码里,定义了PBXService对象,用来根据呼叫用户代码从PBX获取用户详细信息。
  • 28. public class PBXService ...{ public String getCallerName(int callerNumber)...{ ... } } 在html代码里,嵌入了使用PBXService对象和DWR引擎的JavaScript 方法。 ...
  • 29. 从JavaScript调用PBXService的方法如下: PBXService.getCallerName(18003456700, processPBXResponse); 自定义的JavaScript方法processPBXResponse用来处理PBXService.getCallerName 方法的返回结果 尽管不如Dojo的框架复杂精细,也不如Prototype与JavaScript的集成度高,DWR却提供了颇具吸引力的与服务端的集成方式。在与服务器端Java应用的集成方面,DWR做得最好。
  • 30. Yahoo UI (YUI) Toolkit ——争做第一流的框架 YUI 是一种性能稳定的、功能丰富多彩、文档完善的AJAX开发框架。在这几个框架中, YUI框架最具专业水准的感觉。完整的呼叫中心应用由Yahoo工具集实现起来相当容易。 列表和面板等展示层对象采用YUI的面板和对话框组件实现。对于后端PBX和账户查询 系统的异步调用采用Yahoo ConnectorManager(连接管理器)和回调API函数实现。 具体用法如下: var pbxURL = 'http:///ServiceProvider/acctService?callerName=' + callerName; PbxCallback是JavaScript对象,定义如下:
  • 31. var requestFromPBX = YAHOO.util.Connect.asyncRequest('GET', pbxUrl, pbxCallback); var callback = { success:handleSuccess, failure: handleFailure argument: { callerName: "N/A" } }; HandleSuccess 是常规的JavaScript函数,用来读取PBX服务器返回的结果。 并发出以PBX系统返回的呼叫用户名为参数的对于账户查询系统的调用。 var pbxURL = 'http:///ServiceProvider/acctService?callerName=' + callerName; var requestFromAcct = YAHOO.util.Connect.asyncRequest('GET', acctURL, acctCallback);
  • 32. 读者可能会提出疑问,框架提供任务如此之多的特性,是否存在争议之处?确实如此。 YUI是一套特定品牌API的框架,随处可见其商业公司的烙印。其设计和实现由Yahoo的一个项目组专门维护。 同时也用来开发Yahoo公司的门户产品。虽然框架本身是免费的,却会在多处用户的应用代码中表明Yahoo产品的痕迹。 一般来说,YUI工具箱简单、易用。YUI和其它框架比较起来要庞大得多,然而对框架比较熟悉后, 用它开发基本上就是一个组装的过程:在界面上布置各种组件,然后使其协同运行。 总体看来,这是个不错的框架。
  • 33. Google Web Toolkit— 完全Java化 GWT的开发理念同其它几个框架完全不同。GWT是完全基于Java的开发框架,所有的Web组件采用Java编写,然后编译成具有AJAX功能的web页面。如果对Java开发比较熟练的话,使用起来感觉相当自如。但是如果不熟悉Java开发,或需要对于从Java到Web的编译过程有更细致的控制,则会遇到困难。然而,GWT框架非常易用,只要补充一些Java语言技巧就可以开始用GWT了。   对于Java程序员来说,GWT生成Web内容的功能是神奇的(虽然存在少许限制)。典型的Web开发人员偏好对于应用生成的web内容有足够多的控制,而GWT只提供了非常有限的控制方法。例如,案例中使用了com.google.gwt.user.client.ui.HorizontalPanel 设计页面布局。这种Swing风格对于Java开发非常方便,适用于不同的浏览器。然而,若要细致地调整表现层的效果,则需跳出Java的规范,直接通过样式定义来微调输出结果。尽管这种做法很合理,却超出了GWT的Java-only方式。
  • 34. 谢谢!!!