阳光报复连码专家六肖

 

天地方圆

AJAX 简介

作者:赵荣香  工作单位:天地方圆公司  联系方式:13834535037  发表时间:2011-03-21  浏览次数:1761

1.1 AJAX 简介
  AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML)。
㈠您应当具备的基础知识
   在继续学习之前,您需要对下面的知识有基本的了解:
   AJAX = 异步 JavaScript 及 XML(Asynchronous JavaScript and XML)。 AJAX 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
   通过 AJAX,您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象,您的JavaScript 可在不重载页面的情况与 Web 服务器交换数据。
   AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
   AJAX 可使因特网应用程序更小、更快,更友好。
   AJAX 是一种独立于 Web 服务器软件的浏览器技术。
㈡AJAX 基于 Web 标准
   AJAX 基于下列 Web 标准:
    JavaScript XML HTML CSS 在 AJAX 中使用的 Web 标准已被良好定义,并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。
㈢AJAX 是更优秀的应用程序
   Web 应用程序较桌面应用程序有诸多优势;它们能够涉及广大的用户,它们更易安装及维护,也更易开发。
   不过,因特网应用程序并不像传统的桌面应用程序那样完善且友好。
   通过 AJAX,因特网应用程序可以变得更完善,更友好。
㈣今天您就可以使用 AJAX
   没有什么新东西可学。
   AJAX 基于已有的标准。这些标准已被大多数开发者使用多年。
㈤应用案例
   该技术在1998年前后得到了应用。允许客户端脚本发送HTTP请求(XMLHTTP)的第一个组件由Outlook Web Access小组写成。该组件原属于微软Exchange Server,并?#24050;?#36895;地成为了Internet Explorer 4.0的一部分。部分观察家认为,Outlook Web Access是第一个应用了Ajax技术的成功的商业应用程序,并成为包括Oddpost的网络邮件产品在内的许多产品的领头羊。但是,2005年初,许多事件使得Ajax被大众所接受。Google在它著名的交互应用程序中使用了异步通讯,如Google讨论组、Google地图、Google搜索建议、Gmail等。Ajax这个词由《Ajax: A New Approach to Web Applications》一文所创,该文的迅速流传提高了人们使用该项技术的意识。另外,对Mozilla/Gecko的支持使得该技术走向成熟,变得更为易用。
   AJAX前景非常乐观,可以提高系统性能,优化用户界面。AJAX现有直接框架AjaxPro,可以引入AjaxPro.2.dll文件,可以直接在前台页面JS调用后台页面的方法。但此框架与FORM验证有冲突。另微软也引入了AJAX组件,需要添加AjaxControlToolkit.dll文件,可以在控件列表中出现相关控件。
㈥AJAX模式
   许多重要的技术和AJAX开发模式可以从现有的知识中获取。例如,在一个发送请求到服务端的应用中,必须包含请求顺序、优先级、超时响应、错误处理及回调,其?#34892;?#22810;元素已经在Web服务中包含了,就像现在的SOA。AJAX开发人员拥有一个完整的系统架构知识。同时,随着技术的成熟?#22815;?#26377;许多地方需要改进,特别是UI部分的易用性。
   AJAX开发与传统的CS开发有很大的不同。这些不同引入了新的编程问题,最大的问题在于易用性。由于AJAX?#35272;?#27983;览器的JavaScript和XML,浏览器的兼容性和支持的标准也变得和JavaScript的运行时性能一样重要了。这些问题中的大部分来源于浏览器、服务器和技术的组合,因此必须理解如何才能最好的使用这些技术。
   综合各种变化的技术和强耦?#31995;?#23458;户服务端环?#24120;珹JAX提出了一种新的开发方式。AJAX开发人员必须理解传统的MVC架构,这限制了应用层次之间的边界。同时,开发人?#34987;?#38656;要考虑CS环境的外部和使用AJAX技术来重定型MVC边界。最重要的是,AJAX开发人员必须禁止以页面集?#31995;?#26041;式来考虑Web应用而需要将其认为是单个页面。一旦UI设计与服务架构之间的范围被严格区分开来后,开发人?#26412;?#38656;要更新和变化的技术集合了。
㈦更好的用户体验
  AJAX的最大机遇在于用户体验。在使应用更快响应和创新的过程中,定义Web应用的规则正在被重写;因此开发人员必须更注重用户。现在用户已经逐渐习惯如何使用Web应用了。例如用户通常希望每一次按钮点击会导致?#35813;?#30340;延迟和屏幕刷新,但AJAX正在打破这种长时间的状况。因此用户需要重新体验按钮点击的响应了。
    可用性是AJAX令人激动的地方而且已经产生了几种新颖的技术。其中最引人注目的是一种称为“黄色隐出”的技术,它在数据更新之前时将用户界面变为黄色,更新完成后立刻?#25351;?#21407;来的颜色。AJAX开发人员将用户从Web应用的负载中解放出来;小心地利用AJAX提供的丰富接口,不久桌面开发人?#34987;?#21457;现AJAX是他们的方向。
1.2 几种工具和技术
  随着AJAX迅速地引人注目起来,我想开发人员对这种技术的期待也迅速地增加。就像任何新技术,AJAX的?#36865;?#20063;需要一整个开发工具/编程语言及相关技术系统来支撑。
㈠主要包含的技术
  基web标准(standards-based presentation)XHTML+CSS的表示;
    使用 DOM(Document Object Model)进行动态?#20801;?#21450;交互;
    使用 XML 和 XSLT 进行数据交换及相关操作;
    使用 XMLHttpRequest 进行异步数据查询、检索;
   使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文,原文题目(Ajax: A New Approach to Web Applications)。
   类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实?#24076;?#19968;些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。
   AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:
   Google Chrome、Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。
㈡JavaScript
  如名字所示,AJAX的概念中最重要而最易被忽视的是它也是一种JavaScript编程语言。JavaScript是一种粘合剂使AJAX应用的各部分集成在一起。在大部分时间,JavaScript通常被服务端开发人员认为是一种企业级应用不需要使用的东西应该尽力避免。这种观点来自以前编写JavaScript代码的经历:繁杂而又易出错的语言。类似的,它也被认为将应用逻辑任意地散布在服务端和客户端中,这使得问题很难被发现而且代码很难重用。在AJAX中JavaScript主要被用?#21019;?#36882;用户界面?#31995;?#25968;据到服务端并返回结果。XMLHttpRequest对象用来响应通过HTTP传递的数据,一旦数据返回到客户?#21496;?#21487;以立刻使用DOM将数据放到网面上。
㈢XMLHttpRequest
  XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端,但并不会打断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式,虽然?#29992;?#23383;上建议是XML格式的数据。
   开发人员应该已经熟悉了许多其他XML相关的技术。XPath可以访问XML文档中的数据,但理解XML DOM是必须的。类似的,XSLT

是最简单而快速的从XML数据生成HTML或XML的方式。许多开发人员已经熟悉Xpath和XSLT,因此AJAX选择XML作为数据交换格式是有意义的。XSLT可以被用在客户端和服务端,它能够减少大量的用JavaScript编写的应用逻辑。
㈢CSS
  为了正确的浏览AJAX应用,CSS是一种AJAX开发人员所需要的重要武器。CSS提供了从内容中分离应用样式和设计的机制。虽然CSS在AJAX应用中扮演至关重要的角色,但它也是构建跨浏览器应用的一大阻碍,因为不同的浏览器厂商支?#25351;?#31181;不同的CSS级别。
㈣服务器端
  但不像在客户端,在服务端AJAX应用还是使用建立在如Java,.Net和PHP语言基础上机制;并没有改变这个领域中的主要方式。既然如此,我们对Ruby o n Rails框架的兴趣也就迅速增加了。在一年多以前,Ruby o n Rails已经吸引了大量开发人员基于其强大功能来构建Web和AJAX应用。虽然目前还有很多快速应用开发工具存在,Ruby o n Rails看起来已经储备了简化构建AJAX应用的能力。
1.3 调试与浏览器兼容性问题
㈠调试问题
  在?#23548;使?#24314;AJAX应用中,你需要的不只是文本编辑器。既然JavaScript是非编译的,它可以容易地编写和运行在浏览器?#23567;?#28982;而,许多工具提供了有用的扩展如语法高亮和智能完成。
   不同的IDE提供了对JavaScript支持的不同等级。来自JetBrains的IntelliJ IDEA是一个用来JavaScript开发的更好的IDE,虽然许多开发人员也?#19981;禡icrosoft’s Visual Studio产品(允诺会在最新的版本中改善对AJAX的支持)。Eclipse包含了两个免费的JavaScript编辑器插件和一个商业的来自ActiveStat的Komodo IDE。   另一个JavaScript和AJAX开发中的问题是调试困难。不同的浏览器提供不同的通常是隐藏的运行时错误信息,而JavaScript的缺陷如双重变量?#25345;?通常是由于缺少数据类型)使得调试更加困难。在AJAX的开发中,调试就更复杂了,因为其需要标识究竟是客户端还是服务端产生的错误。在过去,JavaScript调试的方法是?#22659;?#25152;有代码然后一行行的增加直到错误出现。现在,更多开发人?#34987;?#21040;为IE准备的Microsoft Script Debugger和为Mozilla浏览器准备的Venkman。
㈡浏览器兼容性
  JavaScript编程的最大问题来?#22278;?#21516;的浏览器对各种技术和标准的支持。构建一个运行在不同浏览器(如IE和火狐)是一个困难的任务。因此几种AJAX JavaScript框架或者生成基于服务端逻辑或标?#24378;?#30340;JavaScript,或者提供符合跨浏览器AJAX开发的客户端JavaScript库。一些流行的框架包括:, Backbase, Bitkraft, Django, DOJO, DWR, MochiKit, Prototype, Rico, Sajax, Sarissa, and Script.
   这些框架给开发人?#22791;?#22810;的空间使得他们不需要担?#30446;?#27983;览器的问题。虽然这些框架提升了开发人员构建应用的能力,但由于厂商已经开发了更细节的用户界面的打包组件解决方案,因此在AJAX组件市场中需要考虑一些其他因素。例如提供通用用户界面的组件如组合框和数据栅格的几个厂商,都可以被用来在应用中创建良好的通过类似电子数据表方式来查看和编辑数据的体验。但这些组件不仅是封装了组件的用户界面而且包括与服务端数据的通讯方式,这些组件通常使用基于标记方式来实现如或JSF控件。
㈢展望
  最近IE和火狐之间的浏览器之争变得火热起来,因此AJAX开发人员需要足够敏捷的作出反应。关键点在一些问题如CSS或XML,虽然各种浏览器形成采用最新标准的不同阵营(如Mozilla?#24403;VG和E4X标准及在最新火狐BETA版本中使用XUL,而微软使用自己的XAML技术)。所有这些技术代表当前AJAX主流JavaScript和XML的市场方向改变。
   总的来?#25285;珹JAX开发人员必须尽快地跟进最新的技术并利用高产的工具集。成功的AJAX开发人?#34987;?#38656;要留心他们的使用者以避免将任何问题扩大化。并且AJAX开发人?#34987;?#38656;要持续地创新?#21019;?#24314;增强Web应用易用性的新方法。
1.4 AJAX示例程序
  将以下文本放入一个HTML页面即可看到效果,将会有两次弹出提示,最后在页面上?#20801;綴ES,表?#23601;?#25104;
1.5 优点和缺点
优点:更迅捷的响应速度
  传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,?#20250;?#36820;回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就?#35272;?#20110;服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
   与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因此在服务器和浏览器之间交换的数据大量减少,结果我们就能看?#36739;?#24212;更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。
   使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。
  Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器?#29616;?#34892;。就像DHTML应用程序那样,Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟,一些简化Ajax使用方法的程序库也相继问世。同样,也出现了另一?#25351;?#21161;程序设计的技术,为那些不支持JavaScript的用户提供替代功能。
缺点与其中一些问题的对应解决方案
  对应用Ajax最主要的批评就是,它可能破坏浏览器后退按钮的正常行为。在动态更新页面的情况下,用户无法回到前一个页面状态,这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常都希望单击后退按钮,就能够取消他们的前一次操作,但是在Ajax应用程序中,?#27425;?#27861;这样做。不过开发者已想出了种种办法来解决这个问题,当中大多数都是在用户单击后退按钮访问历史记录时,通过建立或使用一个隐藏的IFRAME来重现页面?#31995;?#21464;更。(例如,当用户在Google Maps中单击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果?#20174;?#21040;Ajax元素?#24076;?#20197;便将应用程序状态?#25351;?#21040;当时的状态。)
   一个相关的观点认为,使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹?#23567;?#35813;问题的解决方案也已出现,大部分都使用URL片断标识符(通常被称为锚点,即URL中#后面的部分)来保?#25351;?#36394;,允许用户回到指定的某个应用程序状态。(许多浏览器允许JavaScript动态更新锚点,这使得Ajax应用程序能够在更新?#20801;?#20869;容的同时更新锚点。)这些解决方案也同时解决了许多关于不支持后退按钮的争论。
   进行Ajax开发时,网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应 ,没有恰当的预读数据 ,或者对XMLHttpRequest的不恰当处理,都会使用户感到延迟,这是用户不欲看到的,也是他们无法理解的。通常的解决方案是,使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。
   一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax;
   用JavaScript作的Ajax引擎,JavaScript的兼容性和DeBug都是让?#36865;?#30171;的事;
   Ajax的无刷新重载,由于页面的变化没有刷新重载那么明显,所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的;现有的解决有:在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等;
  对串流媒体的支持没有FLASH、Java Applet好;

1.6Ajax图书
   ①Ajax基础教程
  (亚马逊计算机榜首图书,国内第1本Ajax图书)
   作 者: (美)阿斯利森,(美)舒塔 著,金灵 等译
   出 版 社: 人民邮电出版社   
     出版时间: 2006-2-1 字 数: 356000 版 次: 1 页 数: 253
     印刷时间: 2006/02/01 开 本: 印 次: 纸 张:
     胶版纸 I S B N : 9787115144812 包 装: 平装
   ②Ajax技术应知应会90题
  编著:卜维丰   改编:丁卫颖、?#24230;?#38155;
   出版社:电子工业出版社   
    出版时间:2008年5月
   开本:720*1000 1/16 印张:22.75 页数:354页 ISBN:978-7-121-06197-4 定价:39.80元(含光盘一张)
   运用GWT开发
1.7 基础应用
㈠创建XMLHttpRequest 方法
  XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入,被称为XMLHTTP。 后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类,不过它们创建XMLHttpRequest类的方法不同。
   ①对于Internet Explorer浏览器:
   xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
  xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
   xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
   由于在不同Internet Explorer浏览器中XMLHTTP版本可能不一致,为了更好的兼容不同版本的Internet Explorer浏览器,因此我们需要根据不同版本的Internet Explorer浏览器?#21019;?#24314;XMLHttpRequest类,上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。
   对于Mozilla﹑Netscape﹑Safari等浏览器
   ②创建XMLHttpRequest 方法如下:xmlhttp_request = new XMLHttpRequest();
  如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作。
    为了解决这个问题,如果服务器响应的header不是text/xml,可以调用其它方法修改该header。
   xmlhttp_request = new XMLHttpRequest();   
    xmlhttp_request.overrideMimeType('text/xml');
   在?#23548;?#24212;用中,为了兼容多种不同版本的浏览器,一般将创建XMLHttpRequest类的方法写成如下形式:
   try{   
     if( window.ActiveXObject ){
   for( var i = 5; i; i-- ){
   try{   
     if( i == 2 ){
   xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }
   else{   
     xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
   xmlhttp_request.setRequestHeader("Content-Type","text/xml");
   xmlhttp_request.setRequestHeader("Charset","gb2312"); }
   break;}   
     catch(e){
   xmlhttp_request = false; } } }
   else if( window.XMLHttpRequest )
   { xmlhttp_request = new XMLHttpRequest();
   if (xmlhttp_request.overrideMimeType)
   { xmlhttp_request.overrideMimeType('text/xml'); } } }
   catch(e){ xmlhttp_request = false; }
㈡发送请求
  可以调用HTTP请求类的open()和send()方法,如下所示:
   xmlhttp_request.open('GET', URL, true);
  xmlhttp_request.send(null);   
open()的第一个参数是HTTP请求方式—GET,POST或任何服务器所支持的您想调用的方式。 按照HTTP规范,该参数要大写?#29615;?#21017;,某些浏览器(如Firefox)可能无法处理请求。
   第二个参数是请求页面的URL。
   第三个参数设置请求是否为异步模式。如果是TRUE,JavaScript函数将继续执行,而不等待服务器响应。这就是"AJAX"中的"A"。
㈢服务器的响应
  这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示:
   xmlhttp_request.onreadystatechange =FunctionName;
   FunctionName是用JavaScript创建的函数名,注意不要写成FunctionName(),当然我们也可以直接将JavaScript代码创建在onreadystatechange之后,例如:
   xmlhttp_request.onreadystatechange = function(){
   // JavaScript代码段
   };
  首先要检查请求的状态。只有当一个完整的服务器响应已经收到了,函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。
   readyState的取值如下:   
    0 (未初始化)   
    1 (正在装载)   
    2 (装载完毕)   
    3 (交互中)   
    4 (完成)   
    所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应。具体代码如下:
   if (http_request.readyState == 4) { // 收到完整的服务器响应 }
  else { // 没有收到完整的服务器响应 }
  当readyState=4时,一个完整的服务器响应已经收到了,接着,函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时,表示状态正常。
㈣处理从服务器得到的数据
  有两种方式可以得到这些数据:
   (1) 以文本字符串的方式返回服务器的响应
  (2) 以XMLDocument对象方式返回响应

 

2011-3-21

阳光报复连码专家六肖