系统中Ajax技术的应用

Ajax的概述

Ajax 这一术语是短语 Asynchronous JavaScript and XML，中文译作“异步式JavaScript 与 XML”，它是近几年出现，并迅速红遍大江南北的一项技术。严格来说，Ajax 不是一个新技术，而是几种已有技术的组合，或者也可以说是一种模式，它主要包括一下项技术：

基于 web 标准的 XHTML+CSS 的表示。

使用 DOM（Document Object Model）进行动态显示及交互。

使用 XML  和  XSLT 进行数据交换及相关操作。

使用 XMLHttpRequest  进行异步数据查询、检索。

传统的 web 应用允许用户填写表单，当提交表单时就向 web 服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分 HTML 代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。与此不同，Ajax 应用可以仅向服务器发送并取回必需的数据，它使用 SOAP或其它一些基于 XML 的 Web Service 接口，并在客户端采用 JavaScript 处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以 Web 服务器的处理时间也减少了。Ajax 应用程序的优势在于：

1.通过异步模式，提升了用户体验。

2.优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。

3. Ajax 引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

2.5.2 Ajax 技术的实现原理

图 2-2  传统同步模型下请求示意图

图 2-3  Ajax 异步模型请求示意图

图 2-2 显示了在传统的同步模型情况下，B/S 架构的系统是如何工作的。在 这种架构下，客户端发出请求，可能是单纯请求一个新页面，也可能是提交了包含数据的表单。不论怎样，这些请求信息将被提交到服务端，在从提交开发，客户端就进入“假死”状态，服务端收到请求信息及数据，按照指定的程序对其进 行处理，然后把响应信息交给客户端，这些响应信息是完整的页面。客户端接到 响应信息后，把它们显示在浏览器中。

图 2-3 是基于 Ajax 技术异步模型下 B/S 系统的工作原理图。在这里，客户端不再直接向服务端发出请求，而是通过一个 XMLHttpRequest 对象发送一个异步请求，而后，服务端接收到请求和数据，开始按照程序进行处理，而此时的客户端不必等待，可以继续做自己的工作。当服务端完成处理后，将自动调用一个在发送请求时指定的回调函数，这个回调函数一般使用 JavaScript 对页面的 DOM 进行操作，完成页面的更新。而整个这个过程是不需要刷新页面的。

2.5.3．Ajax的几种框架

    目前我们采用的比较多的ajax框架主要有ajax.dll，ajaxpro.dll，magicajax.dll 以及微软的atlas框架。Ajax.dll和Ajaxpro.dll这两个框架差别不大，而magicajax.dll只是封装得更厉害一些，比如说它可以直接返回DataSet数据集，前面我们已经说过，ajax返回的都是字符串，magicajax只是对它进行了封装而已。但是它的这个特点可以给我们带来很大的方便，比如说我们的页面有一个列表，而列表的数据是不断变化的，那么我们可以采用magicajax来处理，操作很简单，添加magicajax之后，将要更新的列表控件放在magicajax的控件之内，然后在pageload里面定义更新间隔的时间就ok了，atlas的原理和magicajax差不多。但是，需要注意的一个问题是，这几种框架都只支持IE，没有进行浏览器兼容方面的处理，用反编译工具察看他们的代码就可以知道。

 除这几种框架之外，我们用到的比较多的方式是自己创建xmlHttpRequest对象，这种方式和前面的几种框架相比更具有灵活性。另外，在这里还提一下ASP.NET2.0自带的异步回调接口，它和ajax一样也可以实现局部的无刷新，但它的实现实际上也是基于xmlhttprequest对象的，另外也是只支持IE，当然这是微软的一个竞争策略。

2.5.4．Ajax在系统中的应用

ASP.NET MVC中内置了Ajax的辅助方法，可以辅助开发人员快速的实现Ajax的开发效果。系统在MasterPage中加载了MicrosoftAjax.js,MicrosoftMvcAjax.js两个JavaScript文件，使用Ajax.BeginForm()、Ajax.ActionLink()方法来进行Ajax调用，并使用一些支持Ajax框架的jQuery来简化对Ajax的调用。使用Ajax辅助方法操作数据，页面并不会换页，而是直接将操作的结果显示在页面上，界面显示非常友好。