WaveSun

Ajax在门户网中的应用

摘要：现在的各大门户网站都以吸引网民，提高点击率为主要目的。以此为目标不断推出各种服务，内容等以提高自身竞争优势。与此同时如何提高用户满意度作为一项重要的目标摆在各大门户网站的面前。

      用户满意度很大一部分是交互所决定的。在现有计算机网络技术的限制下，交互在很大一部分程度下依赖于服务器本身或者用户的请求内容。甚至一个很小的按钮都会导致也导致页面的提交，并使得服务器必须处理新的页面发给用户，这个交互过程无论是对于服务器还是用户来说都是非常不合适的，基于用户满意度的问题，我们在门户网中引入了Ajax作为关键技术对原有的门户网架构进行重新设计实施。这个项目主要是针对原有的门户网站进行分析，重新添加需求后根据ajax的技术特点重新进行架构设计。我在该门户网担任主要技术负责人，主要工作针对架构设计和系统测试工作。

正文：

     在传统的网络开发中，B/S架构占据了绝对主流的地位。愈来愈多的Web应用出现在网络上，怎么样以一种用户更能接受的方式与用户进行交互，也就是如何创建一种有“智能”的客户端是一个越来越影响门户网站的紧要目标。 我们以此为发展契机，扩大我们门户网站在业界都优势，决定应用现在的ajax技术来完成整个服务变化，为了是保护原来的系统资源，最大程度的利用原有系统的功能和代码，我们选择了ASP.NET与AJAX的混合模式。

     Ajax从字面上来理解是（Asynchornous+javescript+xml），异步的javescript与xml的结合物。在现在普遍流行的N层架构中，服务器往往要和更远的后端服务器（比如说数据库服务器，中间件服务器等）进行通信。Ajax技术主要是在客户端进行使用。在桌面式开发当中，异步工作是一种已经使用了很久的实践。让一个新的线程去处理大量的处理等不用于用户交互的工作。但是对于WEB开发来说，这几乎是不可能的，因为http协议是无连接的请求—响应模式的连接。也就是只能客户端发送请求信息，然后服务器回应信息。但下一次客户端连接的时候，服务器也不能识别出客户端身份。

     普通的交互数据传输总量是一个随着时间增长很大的折线模型，而使用Ajax技术之后的交互数据传输是一个一开始会比较大，不过之后数据量增长得很慢。普通的网络服务回应的是页面，页面中包含有很多大量的数据与页面自身标志或动态代码。而ajax每次从服务器那得到的都是数据，除了第一次的连接传回了包含动态客户端代码之外。介于原来使用的是基于.NET Framework的ASP.NET，所以使用微软推出针对ajax开发的atlas工具包。原来系统机构如下：

（1）本系统可分为4层，分别是Browser、表示层、中间件层和数据层。
          （2）表示层用Java Script来实现页面输出。
          （3）中间件层使用DCOM，即实现Component（构件），主要实现业务逻辑的封装与复用。
          （4）数据层主要是数据库和存储过程的实现。j

在使用Ajax技术后，表示层与中间件层之间增加了一层Client Application tier（CA层）。因为CA层是第一次连接的主要部分，并且占用了第一次连接绝大部分的数据量。所以CA层我们使用了javescript来实现，为了尽量保持代码的简短和安全有效，代码内部原则上不使用2个字符以上的变量名，函数名则不超过3个。为了不影响测试，另外我们专门制作了一个代码缩进程序。把调试好的代码进一步压缩，使得js代码文件尽可能的小，减小网络传输的负担。

DOM 是给 HTML 和 XML 文件使用的一组 API。它提供了文件的结构表述，让你可以改变其中的內容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。所有 WEB 开发人员可操作及建立文件的属性、方法及事件都以对象来展现（例如，document 就代表“文件本身“这个对像，table 对象则代表 HTML 的表格对象等等）。这些对象可以由当今大多数的浏览器以 Script 来取用。一个用 HTML 或 XHTML 构建的网页也可以看作是一组结构化的数据，这些数据被封在DOM（Document Object Model）中，DOM 提供了网页中各个对象的读写的支持。以DOM来使得数据和表现分离，并控制输出。

经过对网站服务的各项分析总结了ajax技术适用的范围。Ajax适用场景有
    1.表单驱动的交互
    传统的表单提交，在文本框输入内容后，点击按钮，后台处理完毕后，页面刷新，再回头检查是否刷新结果正确。使用Ajax，在点击sunmit按钮后，立刻进行异步处理，并在页面上快速显示了更新后的结果，这里没有整个页面刷新的问题。
    2.深层次的树的导航
    深层次的级联菜单（树）的遍历是一项非常复杂的任务，使用JavaScript来控制显示逻辑，使用Ajax延迟加载更深层次的数据可以有效的减轻服务器的负担。我们以前的对级联菜单的处理多数是这样的：
    为了避免每次对菜单的操作引起的重载页面，不采用每次调用后台的方式，而是一次性将级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用 JavaScript来控制它的子集项目的呈现，这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题，但是如果用户不对菜单进行 操作或只对菜单中的一部分进行操作的话，那读取的数据中的一部分就会成为冗余数据而浪费用户的资源，特别是在菜单结构复杂、数据量大的情况下（比如菜单有 很多级、每一级菜又有上百个项目），这种弊端就更为突出。
    如果在此案中应用Ajax后，结果就会有所改观：
在初始化页面时我们只读出它的第一级的所有数据并显示，在用户操作一级菜单其中一项时，会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据，如 果再继续请求已经呈现的二级菜单中的一项时，再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据，以此类推……这样，用什么就取什么、用多少就取 多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于后台处理并重载的方式缩短了 用户等待时间，也把对资源的浪费降到最低。
    3.快速的用户与用户间的交流响应
    在众多人参与的交流讨论的场景下，最不爽的事情就是让用户一遍又一遍刷新页面以便知道是否有新的讨论出现。新的回复应该以最快的速度显示出来，而把用户从分神的刷新中解脱出来，Ajax是最好的选择。
    4.类似投票、yes/no等无关痛痒的场景
对于类似这样的场景中，如果提交过程需要达到40秒，很多的用户就会直接忽略过去而不会参与，但是Ajax可以把时间控制在1秒之内，从而更多的用户会加入进来。
    5.对数据进行过滤和操纵相关数据的场景
    对数据使用过滤器，按照时间排序，或者按照时间和名称排序，开关过滤器等等。任何要求具备很高交互性数据操纵的场合都应该用JavaScript，而不是用一系列的服务器请求来完成。在每次数据更新后，再对其进行查找和处理需要耗费较多的时间，而Ajax可以加速这个过程。
    6.普通的文本输入提示和自动完成的场景
在文本框等输入表单中给予输入提示，或者自动完成，可以有效的改善用户体验，尤其是那些自动完成的数据可能来自于服务器端的场合，Ajax是很好的选择。

     最后根据以上分析完成了整个门户网的项目。在开发过程中，我们发现ajax作为一项新技术，也有它不成熟的地方。

1．没有强大的IDE来支持javescipt代码的编写和调试工作。CA层的代码编写和测试显得格外举步维艰。

2．因为javescript的本身原因，用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是让人头痛的事。

3．Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的。

4．一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。