一种新的胖客户端技术——Ajax(二)

图3　传统的与基于Ajax的Web开发模式
 上图右边显示了使用Ajax技术后的开发模式，原来的网上应用模型即左边的那一部分，客户端和Web服务器是直接进行交互的。当你请求一个数据返回的时候，会将整个页面全都发回去从用户那里收到的所有数据，经过处理，再把所有的数据都发回来，不论你想刷新页面的哪一个部分，整个页面都需要刷新，使用Ajax技术后，情况不一样了，中间有一个XML数据缓冲区，这个缓冲区和Ajax引擎负责处理一部分数据。当需要和服务器端再次发送数据时，只需要发送一小部分请求，而服务器端只需要返回那一小部分请求就可以了。相比把所有请求发过去，所有页面发回来的那种传统的方式，大大的提高了性能。
 3．2．2  Web与Ajax的技术结合点
 （1）Ajax通过RSS/ATOM同步数据；通过RSS/ATOM聚合数据；使用友好的URL（即好记的域名，比如http：//blog.csdn.net/jianhao）；支持按照Blog的方式来发表；采用REST（Representational State Transfer）的API或者XML的Web Service；具有社会性；能把东西分享给朋友等；
 （2）Ajax使用CSS+XHTML的方式控制网页元素，这样做的好处是页面更小，加载更快；页面更规范，减少了和程序的交互；而且可以轻松支持多种样式，提供更个性化服务。但这种技术也存在一定的局限，它还没有好的可视化编辑器，从加大了美术设计师的工作。
 （3）使用格式化输出的一个规范即XML格式。
 在Web与Ajax的技术结合点方面，因为Ajax是一种客户端请求通过异步调整服务器数据,实现页面无刷新操作的技术，所以在基于Ajax技术的Web应用程序中，它的好处主要表现在用户不需要刷新页面就可以完成异步的数据交换，在Smart Client技术成熟之前，可以比较完美地实现富客户端（RIA）。
 3.3 综述
 使用Ajax可以带来的好处有以下几个方面：
 （1）服务器的负担。Ajax的原则是“按需取数据“，可以最大程度地减少冗余请求，减轻服务器的负担。
 （2）无需刷新页面，减少用户心理和实际的等待时间。特别是在读取大量数据时，不会像刷新页面那样出现白屏的情况，Ajax使用XMLHttpRequest对象发送请求并且得到服务器响应，在不重新载入整个页面的情况下，用java script操作DOM更新页面。因此在读取数据的过程中，用户所面对的不是白屏，是原来的页面内容(也可以加一个“正在读取中”的提示框让用户知道目前正在读取数据)只有在数据接收完毕之后才更新相应部分的内容。这种更新是瞬间的，用户几乎感觉不到。
 （3）带来更好的用户体验。
 （4）可以把以前的一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器负担，充分利用带宽资源，节约空间和宽带租用成本。
 （5）可以调用外部数据。
 （6）基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
 （7）进一步促进页面呈现与数据的分离。
4．目前的应用
 4.1 应用场景
 Ajax的特点在于异步交互、动态更新Web页面，因此客观存在的适用范围是交互较多、频繁读取数据的Web应用。它在以下几个场景中经常使用。
 （1）数据验证。
 在填写表单内容时，需要保证数据的惟一性(例如新用户注册填写的用户名)，因此必须对用户输入的内容进行数据给以验证。数据验证通常有两种方式：一种是直接填写，然后提交表单，这种方式需要将整个页面提交到服务器端进行验证，整个过程不仅时间长而且造成了服务器不必要的负担。第二种方式是改进了的验证过程，用户可以通过点击相应的验证按钮，打开新窗口查看验证结果，是这样需要新开一个浏览器窗口或者对话框，还需要专门编写验证的页面，比较耗费系统资源。而使用Ajax技术，可以由XMLHttpRequest对象发出验证请求，根据返回的HTTP响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又不加重服务器负担。
 （2）按需取数据。
 分类树或树形结构在Web应用系统中使用得非常广泛，例如部门结构、文档的分类结构常常使用树形控件呈现。以前每次对分类树的操作引起页面重载，为了避免这种情况出现，一般不采用每次调用后台的方式，而是一次性将分类结构中的数据全部读取出来并写入数组，然后根据用户的操作，用java script来控制节点的呈现，这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题，如果用户不对分类树进行操作或者只对分类树中的一部分数据进行操作的话，那么读取的数据中就会有相当大的冗余，浪费了用户的资源。特别是在分类结构复杂、数据量庞大的情况下，这种弊端就更加明显了。
 现在应用Ajax改进分类树的实现机制。在初始化页面时，只获取第一级子分类的数据并且显示；当用户点开一级分类的某一节点时，页面会通过Ajax向服务器请示当前分类所属的二级子分类的所有数据；如果再继续请求已经呈现的二级分类的某一节点时，再次向服务器请求当前分类所属的三级子分类的所有数据，以此类推。页面会根据用户的操作向服务器请求它所需要的数据，这样就不会存在数据的冗余，减少了数据下载总量。同时，更新页面时不需要重载所有内容，只更新的那部分内容即可，相对于以前后台处理并且重载的方式，大大缩减了用户的等待时间。
 （3）自动更新页面
 在Web应用中有很多数据的变化是十分迅速的，例如最新的热点新闻、天气预报以及聊天室的聊天内容等。在Ajax出现之前，用户为了及时了解相关的内容必须不断刷新页面，查看是否有新的内容变化，或者页面本身实现定时刷新的功能。有可能会发生这种情况：有一段时间网页的内容没有发生任何变化。但是用户并不知道仍然不断地刷新页面；或者用户失去了耐心，放弃了刷新页面，却很有可能在此时有新消息出现，这样就错过了第一时间得知消息的机会。
 应用Ajax可以改善这种状况，页面加载后，会通过Ajax引擎在后台进行定时的轮询，向服务器发送请求，查看是否有最新的消息。如果有则将新的数据（不是所有数据）下载并且在页面上进行动态的更新，通过一定的方式通知用户（实现这样的功能正是下载并且在页面上进行动态的更新，通过一定的方式通知用户（实现这样的功能正是java script的强项）。这样既避免了用户不断手工刷新页面的不便，也不会因为重复刷新页面造成资源浪费。
 4.2 网页中的Ajax应用
 Ajax针对网站开发起着更重要的作用，而且目前应用最广是网站开发。下面我们来分析一下它在网页中的简单应用：即基于MVC架构的应用。
 4.2.1 Ajax的MVC三个部分
 在网页应用中，我们要解决的问题是如何在网页中设定真正有效的Ajax应用，即在Ajax中如何设计M，V，C。Ajax的MVC架构分为M，V，C三个部分：
(1) M：（modal）即实体，是Ajax中用来传载数据或承载的的一个基础部分。我们在Ajax网页设计中，如果要涉及到一些特殊的东西，比如需要建立一个HTTPXMLRequest 对象，那就需要一个实体来承载它。
(2) V：（View）即视图，主要介绍用户界面如何显示。在显示网页时，一般不建议使用HTML来做，而使用XHTML+CSS+java script这样一个方式来做。网页上有什么内容，只需用XML来表示出有什么内容，具体这些内容的位置，显示效果如何，并不需要用网页内部的HTML语言来实现。简单的说，首先不用使用TABLE来做定位，而是使用CSS来做定位。所有的显示外观和效果都不使用HTML来实现，而是需要使用CSS来实现，即用CSS来定义网页显示的效果。如果实在需要某种元素的显示绘制，也使用java script添加，而不是一次性的早早的把它绘制好，因此这种方式比较灵活。
(3)C：（Controller），即控制器。如果在页面上有一个元素，需要对它做出响应时，我们如何的获取它，不是简单地使用一个Document的对象，而是使用java script将它封装起来，并且最好是一个封装的事件，那么就使用的Lessoner模式，即监视者或监听的模式，用它来主动监听这种事件，并用它来进行处理。
 4.2.2  Web中的MVC
 传统模式的MVC架构：数据流是传统MVC的视图部分，CGI或者其他交互性的Web应用就是传统MVC的控制器部分。我们现在看到的大多数的Web应用都是传统模式的，比如ASP，PHP，JSP。MVC是三个英文字母的缩写，即Model，View，Controller。MVC是将网页应用分成三个部分来做介绍，以便开发时好分工。在传统的MVC架构中，网页就是视图，控制器是中间的数据流，后台有服务器。它们的传输模式如图所示。

图4　传统的MVC
 在传统的MVC的开发过程中，前台人员只负责定义一些模板页的模式，所有的数据都是通过ASP后台生成的。在这种情况下，当需要客户端与服务器交互时，一定要把数据传到后台去，后台接收数据后做响应然后再传回来。
 Ajax中的MVC与传统的大不一样，浏览器中的MVC图如下：
 
图5　浏览器中的MVC
 在这种模式下，View负责显示HTML代码和一些特效,它的主要应用是：提供可视化界面，负责监视界面的操作；提供通过和Controller交互更新Model的数据并传送显示。Controller负责监视视图上呈现的各种控件的动作，一旦有动作以后，它便会处理。Server传出一些模型的原型，传给控制器，由控制器根据这些模型的原形传给视图。
 Ajax在设计时一定要按照MVC架构来设计网页这一段，这样的好处是：首先它会对性能有很好的提高。其次它在开发过程中的分工特别明确。对开发人员的要求比较明确，对美工等各方面的人要求比较明确。而且对复用性有很好的支持。从软件工程的角度来讲，MVC的架构是符合正确的开发道路的。在传统的开发模式中，经常会出现美工人员，编辑和技术人员意见不统一，而原来开发方式要求这些人必须要协作，必须按同步的思维来做。美工人员进行设计多从艺术性和创造性考虑，编辑更多地是希望内容吸引人的眼球，程序员则希望循规蹈矩，后台数据库却希望实现更容易一些，这样就使协调起来比较麻烦。使用MVC架构后，将View视图分开了。美工只需和编辑去沟通就可以了，不需要与程序员做任何沟通，而程序员只需拿到需求文档就可以了，因此按照MVC架构进行更有助于分工。
 4.2.3 设计实例
 下面通过一个虚拟音乐键盘的实例来加深对MVC架构的认识。我们要实现的效果是如图6所示，页面中有不同颜色的方框，用鼠标点击不同的方框，会在下边的框中出现do，ra，mi，fa，……等不同的字符，就是一个虚拟的音乐键盘。
 
 图6 音乐键盘实例
 下面我们来看一下这个实例的代码部分：
 表示层的代码如下：
 music.html：
 1 <html>
 2 <head>
 3 <title>Keyboard</title>
 4 <link rel= 'stylesheet' type='text/css' href='music.css'/>
 5 <script type='text/java script' src='music.js'></script>
 6 <script type='text/java script'>
 7window.onload=assignKeys;
 8 </script>
 9 </head>
 10 <body>
 11<div id='keyboard' class='musicalKeys'>
 12<div class='do musicalButton'></div>
 13<div class='re musicalButton'></div>
 14<div class='mi musicalButton'></div>
 15<div class='fa musicalButton'></div>
 16<div class='so musicalButton'></div>
 17<div class='la musicalButton'></div>
 18<div class='xi musicalButton'></div>
 19<div class='do musicalButton'></div>
 20</div>
 21<div id='console' class='console'>
 22</div>
 23</body>
 24</html>
 代码解释：我们在表示层里定义了界面，你会发现显示全部是用CSS完成的。4行引用了一个CSS，6行引用了一个java script，注意7行这里的代码是在window.onload中加入一个java script程序,它在MVC中属于控制器那一部分的内容。11行至19行显示视图部分的代码，仅仅几行简洁的代码，便添加了musicalButton。
 然后我们在CSS中定义了一个显示模式：
 music.css
 /*CSS Document*/
 1 body{
 2 background-color=white;
 3 }
 4 .musicalKeys{
 5  background-color:#ffe0e0;
 6  border:solid maroan 2px;
 7  width:536px;
 8  height:68px;
 9  top:24px;
 10  left:24px;
 11  margin:4px;
 12  position:absolute;
 13  overflow:auto;
 14}
 15.musicalButton{
 16  border:solid navy 1px;
 17  width:60px;
 18  height:68px;
 19  margin:2px;
 20  position:relative;
 21  float:left;
 22}
 23.do{background-color:red;}
 24.ra{background-color:orange;}
 25.mi{background-color:yellow;}
 26.fa{background-color:green;}
 27.so{background-color:blue;}
 28.la{background-color:indigt;}
 29.xi{background-color: violet;}
 30  div.console{
 31  font-family:Arial,helvetisa;
 32  font-size:1px;
 33  color:navy;
 34  background-color:white;
 35  border:solid navy 2px;
 36  width:536px;
 37  height:320px;
 38  top:108px;
 39  left:24px;
 40  margin:4px;
 41  position:absolute;
 42  overflow:auto;
 43 }
 代码解释：15至22行对musicalButton又做了一次具体的定义。没有将其定义在HTML中的好处有两个：一是定义在单独的文件里阅读比较方便，另外一个就是可以复用。另外，可以把这一段给一个专业的美工去做，就可以非常方便地进行修改，而且，显示代码简洁，一目了然。
 然后我们来分析一下应用层（脚本）的代码：
 music.js
 //java script Document
 1 function assignKeys(){
 2  var keyboard=document.getElementById("keyboard");
 3  var keys=keyboard.getElemnentByTagName("div");
 4  if(keys){
 5   for(var i=0;i<keys.length;i++){
 6     var key=keys[i];
 7     var classes=(key.className).sp ("");
 8     if(classes&&classes.lgngth>=2&&classes[1]=="musical){
 9      var note=classes[0];
 10     key.note=note;
 11     key.onclick=playNote;
 12     }
 13    }
 14  }
 15}
 16function playNote(event){
 17  var note=this.note;
 18  var console=document.getElementById("console");
 19  if(note&&console){
 20   console.innerHTML+=note+" ";
 21  }
 22}
 代码解释：在脚本代码中定了两个函数。一个是assignKeys，我们来分析一下它的功能：首先通过getElementById获得keyboard，keyboard就是在musical.html文件中的第11行代码中的id。之所以先用div定义一个keyboard，然后再定义musicalButton。是因为我们需要对每个Button使用不同的java script方式进行绑定。assignKeys的工作就是将事件与对象做绑定，它将八个键分别绑定到不同的java script事件里。但无论怎样，我们最后要做的都是一样的，即当我们单击不同的按钮时，需要显示对应的字符。最好的方法是我们先定义一个根元素，然后Button做为子元素，按图索，我们就可以把子元素找到，并且由于它的子元素绑定的方式是完全一样的，而且处理的函数完全可以根据getElementById进行相应的判断。首先在2行代码取根结点的元素，然后将根结点中所有子结点全部取到。3行代码中，getElementByTagName的意思是我们用元素的标记名称来获得这个元素，这里的子元素的标记名称都是div。4行至13行代码是一个标准的遍历算法，这段遍历写法是首先将每个元素单独取出来，获得keys元素以后，把keys元素的名字用split函数把它切开，split是一个将字符串进行切分的函数，切分的结果是一个数组。4行进行判断，keys是子元素的一个集合，或者说是子元素的一个数组。如果8行中的条件成立，即取得的keys 值是我们需要的do，ra，mi等字符，就对这个子元素进行一下绑定。
 另一个函数是playNote，它是一个标准的事件触发函数，当我们触发它时，就会我们从页面中获得console这个控件，然后在console.innerHTML+=note+" ";里输出。
 4．3 应用实例
 4．3．1 Google Maps
 Google Maps 地图搜索的Web应用。在地图展示区中，用户可以鼠标拖动地图，或者用滚轮放大、缩小地图。在这个操作过程中用户可以看到，原来没有展示的区域会暂时处于空白状态，不久从服务器端传回的数据就可以将空白部分填满。但是整个下载数据的过程并不影响用户，用户可以继续其他的操作。Google Maps中还有一个很有趣的功能就是动态的信息提示，如图所示。当鼠标移到相应位置上时，会出现有关该位置的详细信息注意，这此信息是取出时获取的，而不是事先下载到本地的，这实际上这也是Ajax按需取数据原则的一个体现。

图7  Google Maps
    4．3．2 Gmail
 Gmail是Google推出的电子邮件系统，它从布之日起，就受到了业内极大的关注，原因之一是其超大的容量（2.5G，并在不断的增长中），另一个重要原因则是该系统广泛使用了Ajax技术，给用户带来了很多便利，同时也引起了Web开发人员的广泛关注。
 在以往的邮件系统中写邮件时，如果出现错误或者操作失误导致浏览器关闭，那么邮件的内容就会丢失。如果遇到这样的问题，人们以后再写比较长的邮件会先在其他编辑器中写好，再复制到邮件系统中去。现在使用Gmail则不会出现这个问题，人们以后再写比较长的邮件会先在其他编辑器中写好,再复制到邮件系统中去。现在使用Gmail则不会再出现这种问题，因为它会定时自动保存邮件的内容，即使是被关闭也没有关系，邮件的内容已经在服务器上保存了。
 在桌面的电子邮件客户端程序中，收件人地址填写的提示功能是很方便的，而传统基于WEB的邮件系统则不会具有这种便利。但是在Gmail中，只需输入一部分邮件地址，就可以得到相应的提示，既快速又准确。
 Gmail电子邮件系统中还有很多细微而贴心的小功能，虽然是一些小的改进，但是意义却是重大的。大多数功能的实现是基于Ajax技术的，在Gmail电子邮件系统中，由于大量使用了AJAX技术，浏览器不再仅仅是呈现页面内容，更重要的是承载了一个功能丰富的应用系统。

图8 Gmail图例1

图8 Gmail图例2
 4．3．3 A9.com
 A9.com是Amazon的搜索引擎，其特点是搜索选项可以随时增加、去除。如图所示是仅搜索“Web页”和“图像”的结果，如果这时用户还想看一看当前的搜索词在“图书”中有哪些结果，只需勾上“BOOKS”选项，页面会自动变为如图所示，及时加载“图书”相关的搜索结果。由于应用了Ajax技术，原有的搜索结果仍然在网页上保留，只是添加了在“图书”范围内搜索并返回的结果，同时页面的布局发生了相应改变。当然所有这些过程中，页面只是局部更新，而不是刷新整个页面。

图9 A9.com
 4．4 综述
 通过上面的应用实例，我们可以体验到这些网站无论是从视觉效果还是易用性方面来讲都对我们产生了巨大的冲击力，其中Ajax技术功不可没。基于Ajax技术的Web应用程序可以实现Web浏览者更高的、全方位的体验要求，利用Ajax技术可以创建具有高度互动性和丰富用户体验的网络应用程序。
5 结论
 Ajax是Web2.0时代的核心技术之一，而它的优势让我们看到了它在Web开发中的重要作用，这些作用中，最重要的便是它实现了胖客户端的技术，改变了传统的关于Web应用程序都是瘦客户端的思维。综合Ajax技术的特征，我们可得出这样的结论：Ajax是一种新的胖客户端开发技术。
 5.1  胖客户端与瘦客户端的概念及比较。
 （1）概念
 在WEB应用中，按照通常的三层架构来区分，包含数据库操作的应用可分为：表示层，中间层（包括数据库访问层和事务层）和数据库层。如果把表示层和中间层混在一起写出来的程序就是胖客户端，和数据库关联起来就叫C/S（客户/服务器）,如果把表示层和中间层分开写成两个程序，表示层所在的程序就叫瘦客户端，这种划分标准本来和浏览器没什么关系，因为浏览器中的网页只能是表示层而不含中间层，加上非常流行，传统概念中的基于Web的应用程序就成了瘦客端的代名词。
 “胖客户端”是相对于“瘦客户端”而言的，它是在客户机器上安装配置的一个功能丰富的交互式的用户界面。九十年代末以来，基于Web的应用程序得到了广泛的使用，这主要是因为它们可以很容易地被终端用户使用，终端用户只要一台能够上网的电脑就行。然而，对于高交互性的程序接口来说，基于Web的接口很难满足要求。编写复杂的在终端用户浏览器中执行的客户端脚本不是一个可行的增强交互性的方法。开发人员认识到有时候部署一个基于Web的解决方案并不能满足所有用户需求。此外，基于Web的应用程序也不能够脱机使用。
 新一代的“胖客户端”又叫“智能客户端”。它在传统的九十年代中期以来的C/S结构中的胖用户接口上作了一些改变。在传统的胖客户端中，通过使用标准的界面——使用典型的界面组件，如菜单、上下文菜单、工具栏、分层次的数据视图、数据表格、图等，用户可以很方便地和收集或展示的数据进行交互，这给终端用户提供了很高的可用性和效率。在此之外，智能客户端加入了基于Web的配置，增加了对自动版本更新、联机/脱机操作、以一种可控制的安全的方式管理客户端安全等的支持。
 （2）胖客户端与瘦客户端的比较分析
 表2 胖客户端与瘦客户端的比较
 胖客户端 瘦客户端
运行文件尺寸 大 小
客户端安装 需要 不需要
客户端维护 需要 不需要
版本更新 需要 自动
客户端状态 有 无
界面表现 丰富 简单
 
 5．2 Ajax技术是一种胖客户端技术
 （1）实现功能
 经由前面的分析，Ajax技术的优点主要体现在用户体验上，纯粹从用户体验的方面来讲，Ajax的目的是一种RIA，也就是在Web浏览器这样的瘦客户端上模拟胖客户端的用户体验。从这一点来讲，无论在哪个层面——整体还是局部使用Ajax，首要问题是实现用户的体验。
 Ajax为Web应用开发提供了新的机会，利用Ajax技术，胖客户与瘦客户之间的界限不再分明。胖客户端的优势在于优良的客户体验以及可以离线操作,浏览器的优势在于易于部署管理,全部数据存储在服务器,不存在数据同步问题.胖客户端与传统的Web应用程序相比，而且拥有更快的响应，而Ajax可以使用异步方法提高响应速度．Ajax技术实现了胖客户端的这种优势．
 （2）技术分析
 借助于Ajax和RIA，构建复杂的动态用户界面的推动力正在促使开发人员使用先前与胖客户端紧密联系的设计模式（例如：MVC）。未来的胖客户端发展趋势是所有客户端用到的代码都是按需要从服务器下载的，具有离线操作的能力，支持数据同步，并有优良的客户体验，也可以说胖客户端和Ajax实现了一种综合。
 （3）发展趋势
 从发展趋势上看，Ajax的兴起代表着胖客户端时代的再次来临，基于Ajax的Web系统的开发中，服务器的开发被大大的减少了,主要的工作都在java script中进行,连表格创建都在客户端进行, Ajax有一个大的好处就是降低了服务器端的压力,把许多工作放到IE上完成,事实上是分流工作的一种方法,代表着未来的方向。
 利用Ajax技术，我们可以改变传统的客户端与服务器端的通讯模式，从而实现用户与界面的高度交互性，胖客户端与瘦客户端的界限因此不再分明，而在Ajax与RIA的综合和Web的发展趋势上，看到Ajax在Web应用中发展的未来方向，Ajax是一种新的胖客户端开发的技术。

参 考

首页 上一页 1 2 下一页 尾页 2/2/2