使用 AJAX 改进 Web 应用程序的设计模式
在本文中，我们将讨论如何将 AJAX 整合到我们的 Web 应用程序设计模式中，并探讨 Web 开发中最常用的一些场景（身份验证和数据绑定）的不同方法。
目录
引言
AJAX 在我们的 Web 应用程序架构中处于何种地位？在本文中，我们将讨论如何将 AJAX 整合到我们的 Web 应用程序设计模式中，并探讨 Web 开发中最常用的一些场景（身份验证和数据绑定）的不同方法。
图 1：基于 AJAX-MVC 模式开发的一个模型和两个视图（请参阅示例部分）
背景
在万维网的早期，HTTP 的第一个版本（0.9 版）只包含一个命令：GET [文件名]。Web 应用程序并没有太多内容：一堆静态 HTML 文档。数据和显示样式被硬编码到页面中，并且没有明确的方法来根据请求动态更改页面数据或样式。为了后来标准化网页开发，W3C 推出了级联样式表和 HTTP 1.0 标准。这些标准允许 HTML 文档的结构化布局，并为 HTTP 通信添加了头信息，这显著提高了 Web 服务器管理 Web 应用程序的能力。
对动态网页日益增长的需求导致了我们今天所知的服务器端脚本的广泛实现。Web 开发人员需要一种技术来操作页面内容，并在将其发送到客户端之前嵌入他们的数据和样式。他们知道如何在独立应用程序中做到这一点；他们习惯于显示和格式化数据，输出是计算机屏幕或打印机。要在 Web 应用程序中做到这一点，他们所要做的就是“渲染”其内容的 HTML 版本，然后将其交给 Web 服务器发送到客户端。尽管从那时起引入了所有改进和新标准，但这种方法仍然是 Web 应用程序的基础技术：在服务器端渲染页面并将其刷新到客户端。
另一方面，为了控制 HTML 文档元素的行为，创建了不同的客户端脚本语言。1995 年，已经采用 Java 的 Netscape 创建了第一个 JavaScript 版本，名为“LiveScript”。基本上，它是一种用于服务器端和客户端脚本的松散类型脚本版本的 Java，后来成为 ECMAScript 标准。JavaScript 的服务器端脚本能力从未受到太多关注，但 JavaScript 仍然是主要的客户端脚本语言，用于在客户端浏览器中编程网页的行为。然而，JavaScript 主要用于执行绑定到页面 HTML 元素的有限操作，并且从未成为我们 Web 应用程序设计中的主要角色——事实上，您可以禁用 JavaScript 并继续使用 Web 应用程序——但是，AJAX 的广泛使用改变了这一切。
Web 开发中的 MVC 设计模式
ASP.NET Web 应用程序设计模式
首先，让我们回顾一下我们的 ASP.NET Web 应用程序的结构。默认情况下，ASP.NET 实现“页面控制器”模式，这是流行 OOP 设计模式“模型-视图-控制器”的变体。[1] 和 [2]
图 2：页面控制器结构 [1]
Java Web 应用程序框架“Struts”和 ASP.NET 对 MVC 设计模式的实现使 MVC 成为 Web 开发中最常用的设计模式之一。正如“可重用面向对象软件的元素”一书所定义的 MVC [3]，MVC 获得巨大受欢迎的原因在于它提供了表示层（视图）和数据层（模型）的解耦。这正是开发人员梦寐以求的 Web 应用程序：修改 Web 应用程序的数据或表示层而不影响另一层。此外，使用 MVC 设计模式，您可以为一个模型提供多个视图，或者为一个视图提供不同的模型。
图 3：MVC：一个模型和三个视图 [3]
然而，这种灵活性是有代价的，那就是视图-控制器和控制器-模型之间的紧密耦合。控制器将视图和模型松散耦合，但它本身却被其中之一紧密耦合。这意味着除非我们在更高层次上就接口达成一致，否则我们不能随意更改模型、视图和控制器。尽管 MVC 可以提供很大的灵活性，但实现 MVC 设计模式的复杂性可能会拖慢大多数 Web 开发项目。
在基于 MVC（观察者）模式设计的 Web 应用程序中，当页面触发事件时，视图类通知控制器类（代码隐藏）。根据事件，控制器将事件分派给其他类，检索或更新模型，并通知视图进行更新。为了使其正常工作，我们需要在所有视图和控制器上实现一系列公共接口，以使它们能够相互交互。这涉及大量的编程，更不用说您的控件将特定于您的项目，并且您将无法使用第三方控件（例如 ASP.NET 控件）而无需付出大量努力。
Web 应用程序中 MVC 模式的另一种方法
在开发人员努力解决其 Web 应用程序中复杂的 MVC 实现的同时，另一种方法悄然实现了 MVC 的优势，而没有遭受其缺点。
我确信我们都曾在各处看到过 RSS 源的橙色图标。就我个人而言，我曾在许多不同的网站上看到过 CodeProject 文章源，以许多不同的格式呈现，以及来自其他来源的源。
同一个模型有不同的视图，一个视图有不同的模型；这难道不是我们希望通过 MVC 设计模式实现的目标吗？好吧，如果我们的网页中只显示 RSS 源，那么答案是肯定的，但更重要的问题是，这能否扩展到涵盖我们所有的应用程序需求？
为了回答这个问题，让我们看看 RSS 是如何工作的。RSS（Rich Site Summary / Really Simple Syndication）是一个严重依赖元数据（关于数据的数据）的 XML 文档 [4]。RSS 基于资源描述框架（RDF）构建。RDF 是 W3C 启动的语义 Web 项目的组成部分，它提倡数据应该以一种可以在较低级别由自动化软件处理的方式呈现，然后才呈现给人类 [5]。如果你打开一个 RSS 文档，你几乎无法阅读它，但任何 RSS 阅读器都可以轻松地以你想要的任何演示格式显示和更新 RSS 源。
回到我们的 Web 应用程序，我们使用类似于 RDF 建议的技术来耦合我们的视图和控制器。在这种方法中，我们的视图足够智能，可以通过读取元数据来显示控制器返回的数据，而无需直接指示如何显示数据。控制器只控制数据驱动事件，数据的显示细节由视图决定，控制器不干预。事实上，每个视图都有一个 JavaScript 控制器，但 JavaScript 的松散类型脚本特性使其更加灵活。换句话说，我们不是在每次调用时重新渲染页面，而是将页面的标记文档和样式存储在静态 HTML 文件中。在 AJAX 的帮助下，标记文档调用控制器类并填充/更新其数据。例如，在电子邮件 Web 应用程序中，页面本身在被不同用户调用后不会改变，但页面的嵌入数据是使一个用户的收件箱与其他用户不同的原因。每当我们更新或添加新视图时，我们都会更新或添加一个新的 HTML 文档，对控制器没有任何影响。
图 4：使用 AJAX 实现 MVC 的新方法
基于 AJAX-MVC 方法开发的示例：身份验证、DataGrid、日历等
在本节中，我将向您展示一些使用 JavaScript 原型化控件进行基本身份验证和数据绑定的示例。这将帮助您认识到新方法与传统服务器控件相比效率有多高。所有控件渲染都在客户端执行，服务器负载大大降低。我将在进行认真清理并使其可读后将源代码添加到本文中 :) - 代码是 JavaScript，所以您无论如何都应该知道如何查看它。将来，在另一篇文章中，我们将讨论如何从头开始编写 JavaScript 控件。
如何查看这些示例：请确保您拥有最新版本的浏览器。这些示例已针对 Firefox 1.5+、IE 7.0+ 和 Opera 9.0 或更高版本进行了优化。您可以在The Morning Outline找到完整的示例集合。
- 身份验证：基本身份验证：AJAX 登录控件
- 一个模型，两个视图：数据绑定：AJAX 图表、
DataGrid、日历 - Flickr 查看器：数据绑定：AJAX RSS 阅读器
结论
面向对象编程已成为 Web 应用程序的首选方法。JSP、ASP.NET 以及最近的 PHP 5.x 都内置了对 OOP 实现的支持。OOP 设计模式可以提供巨大的优势，例如可重用性、模块化和可维护性，但我们的 Web 应用程序如何从这些特性中受益可能并不明显。
"在 20 世纪 60 年代的太空竞赛期间，NASA 面临一个重大问题。宇航员需要一支能在太空真空中书写的笔。NASA 开始着手解决。耗资 150 万美元，他们开发了“宇航员笔”。你们有些人可能还记得。它在商业市场上取得了微小的成功。
俄罗斯人也面临同样的困境。他们用铅笔。"——一个重要的教训，来自一个古老的谣言。
有时，我们使用常识来设计应用程序，而忽略了既定的设计模式。这种疏忽可能会导致整个项目的过度结构化，并削弱 OOP 的优势，尤其是在处理大型项目时。在某些场景中，即时 AJAX 框架中的 UpdatePanel 就是 Web 应用程序中过度结构化的一个例子，页面在每次调用时都会经历完整的生命周期，而实际上，它对我们的应用程序并没有益处。
参考文献
- [1] 页面控制器 - MSDN
- [2] ASP.NET 和 Struts：Web 应用程序架构 - MSDN
- [3] Smalltalk MVC 中的设计模式 - “可重用面向对象软件的元素（四人帮）”一书
- [4] RSS - 维基百科
- [5] RDF - 维基百科