应用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>
12<div></div>
13<div></div>
14<div></div>
15<div></div>
16<div></div>
17<div></div>
18<div></div>
19<div></div>
20</div>
21<div>
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 }
相关文章
精彩导读
热门资讯
关注我们
