15.1 什么是Ajax - 《SVG开发实践》 - 免费试读 - book.csdn.net

这一章，将介绍SVG如何同数据库进行交互，程序自 动从数据库获得相关数据，并且使用SVG作为数据的展现手段。这样SVG更加符合表现层的要求，数据由专门的数据库保存和处理，尽量减少SVG处理商业逻 辑运算，甚至一些SVG的配置项也可以保存在数据库中，供载入SVG文档的时候使用，可以提高SVG的灵活性和可配置性。

15.1  什么是Ajax

Ajax (（Asynchronous JavaScript and XML)）并不是一项新的技术，而是多种技术的综合，或者说是一种设计方式，这些技术包括JavaScript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest等技术。其中：

— 使用XHTML和CSS实现标准化的呈现界面。

— 使用DOM实现动态的显示和交互。

— 使用XMLHttpRequest实现与服务器的异步通信(（ASV3中由“getURL”函数提供该功能)）。

— 使用JavaScript将XHTML、DOM、XML、XMLHttpRequest绑定。

各种技术在Ajax引擎中的作用如图15-1所示。

图15-1  各种技术在Ajax引擎中的作用

整个交互通信过程是异步进行的，异步这个词是指 Ajax应用软件与主机服务器进行联系的方式。如果使用传统模式，每当用户执行某种操作、向服务器请求获得新数据，Web浏览器就会更新当前窗口。图 15-2展示了Ajax所采用的异步模式，浏览器不必等待用户请求操作，也不必更新整个窗口就可以显示新获取的数据。只要来回传送采用XML格式的数据， 在浏览器里面运行的JavaScript代码就可以与服务器进行联系。执行结果到达时，才会通知浏览器客户端，使之能够在合适的时间显示执行结果。 JavaScript代码还可以把样式表加载到检索到的数据上，然后在现有网页的某个部分加以显示。

图15-2  Ajax的异步传输过程

Ajax的主要功能在于，改变浏览器客户端和服务器 端传统的同步的交互通信方式为异步通信交互方式，从而丰富浏览器客户端功能，解决浏览器频繁刷新页面等待数据传输的问题，改善Web应用程序的用户体验。 使用Ajax，就算不重载刷新Web页面，用户也可以顺利的快速的得到Web服务器的数据。

典型的，看看微软的Vitual Earth的功能（http://local.）。当用户拖动地图左上角的放大标尺的时候，Web页上的地图立即被放大，页面却没有刷 新。当按住鼠标左键移动地图的时候，地图跟着移动。这个过程是快速的，而期间用户并没有向服务器提交表单或者单击一个超链接。如果用传统的Web应用程序 交互思维来理解，这个过程是难以理解的。这正是Ajax的魅力。

作为Web应用程序一部分的Ajax的生命周期更像 桌面系统的GUI，而DOM在扮演了类似GUI控件的角色。JavaScript脚本向DOM注册事件监听器，操作DOM响应事件。在响应事件的过程 中，Web服务器可能被调用。这个调用是异步进行的，所以事件监听阶段和事件响应阶段是分开的。

下面是一个典型的浏览器中Ajax应用的生命周期。

— 用户访问：用户访问一个网站，比如单击链接或者在浏览器中输入网站的URL地址。

— 页面初始化：页面初始化加载，准备处理用户输入或者刷新页面内容。

— 触发浏览器事件：浏览器触发一个事件，比如鼠标单击或者按下键盘。

— 向服务器发起请求：浏览器向服务器发出一个请求。

— 服务器处理请求：服务器收到浏览器发出的请求，调用业务逻辑接口处理请求。

— 服务器响应请求：服务器响应浏览器发出的请求，将处理结果返回。这个返回结果传递给在发出请求时指定的请求调用函数。

— 浏览器更新页面：请求调用函数根据响应结果更新DOM内容，比如DOM变量或者任何的JavaScript变量，更新页面内容。

“触发浏览器事件à向服务器发起请求à服务器处理请 求à服务器响应请求à浏览器更新页面”这个过程是可以多次循环的，如图15-3所示。在循环过程中通常会有很多的变量产生，很多事件也可能在客户端解决而 不提交到服务器。有些Ajax应用的生命周期可能是短暂的，随着用户提交表单或者重新刷新页面而结束。其他则持续呈现在浏览器上（用户不重新刷新页面，也 不提交表单），一直响应用户的行为。

而在SVG中，Ajax使用变得更加简单，它将采取如下的工作方式：

—  JavaScript事件触发：用户操作Web页面上的某个控件或者文字链接，触发一个JavaScript事件。比如单击一个按钮，或者自动请求一个页面。

—  JavaScript 事件处理函数执行，调用getURL函数：JavaScript事件被触发，相应的事件处理函数即被调用。在getURL函数 中，XMLHttpRequest对象被初始化，并根据情况向服务器发出异步通信请求，将用户的请求提交到服务器。只不过这个过程被封装了，对开发者不可 见了。

图15-3  Ajax的生命周期

— 服务器接收用户请求：这个步骤与传统的Web应用程序交互模式一致。服务器接收到用户请求后，根据URL地址判断用户行为，响应用户行为，并将响应结果以HTML/XHTML/XML的形式打印（Response）出来。

—  XMLHttpRequest接收服务器的响应数据：XMLHttpRequest检测到服务器已经将响应结果打印出来，即将响应结果以文本或者XML文档的形式返回，赋予一个JavaScrip变量，在SVG中这个变量为“data”。

—  JavaScript调用DOM处理“data”，更新页面内容：JavaScript调用DOM相应的方法，解析“data”，然后更新相应的页面内容。

— 页面被更新，一次Ajax处理过程结束。

这个工作方式和过程需要Ajax的各个组成技术 相互配合，Ajax的主要角色在于JavaScript事件触发和响应、发起异步通信请求、接收返回的数据并更新Web页面内容。而生成 HTML/XHTML/XML格式的数据的任务，由服务器完成。生成HTML/XHTML/XML格式的数据的方法，取决于Web应用程序所选择的解决方 案，会有所不同。本书将使用微软的.NET技术作为服务器端技术。