48、万维网之三（应用层）

动态Web页面和Web应用

• 到目前为止我们使用的静态页面模型将页面作为多媒体文档处理，这些文档被方便地链接在一起。这是Web 初期的一个拟合模型，因为大量的信息都可在线查询。如今，围绕着Web 的许多兴奋点在于可将它用作应用程序和服务。应用例子包括在电子商务网站购买产品、检索图书馆目录、探索地图、阅读和发送电子邮件，以及进行文档合作。
• 这些新的用途犹如传统的应用软件（例如，邮件阅读器和文字处理器〉。扭曲的只是这些应用程序运行在浏览器内部，而用户数据存储在Internet 数据中心的服务器上。它们利用Web 协议通过Internet 访问信息，而浏览器显示用户界面。这种方法的优点是用户不需要安装单独的应用程序，可以从不同的计算机访问用户数据，而且由服务提供商负责备份。它被证明是如此地成功，几乎可以和传统的应用软件相媲美。当然，这些应用程序由大型服务提供商免费提供的事实也有助于推动应用的进一步展开。这种模式就是云计算（ cloud computing）的普遍形式， 它将计算从个人台式电脑转移到Internet 上的共享服务器集群。
• 为了运行应用程序， Web 页面不能再是静态的了，动态内容是必需的。例如，一个图书馆目录的页面应该反映出哪些书籍当前可借和哪些书籍已经借出因而不可用等书籍的当前状态。类似地， 一个有用的股票市场页面将允许用户与页面交互，以便查看不同时期的股票价格，以及计算利润和亏损。这些事例表明，动态内容可以由服务器上或浏览器内〈或者同时运行在两个地方）运行的程序产生。
• 在本节中，我们将依次考查这两种情况。一般的情况如图所示。例如，考虑一个地图服务：让用户输入一个街道地址，然后给出相应位置的地图。给定一个位置请求， Web服务器必须使用一个程序来创建一个页面，该页面显示了该街道地址在地图上的对应位置，而位置信息则是从一个街道数据库和其他地理信息数据库中提取出来的。这一系列动作反映在图中的第1 ～3 步。请求（第1 步〉导致在服务器上运行一个程序： 该程序查询一个数据库以便生成相应的页面（第2 步〉，并将该页面返回给浏览器（第3 步〉。
• 然而，有更多的动态内容。返回的页面本身还可能包含着在浏览器中运行的程序。以我们的地图为例，该程序将允许用户发现一条路线，以及不同详细程度地探索周围的附近区域。它会更新页面，跟随用户的指示缩小或放大（第4 步〉。为了处理一些交互事件，该程序可能需要从服务器端获取更多的数据。在这种情况下， 程序将给服务器发送一个请求（第5 步〉，服务器从数据库中检索出更多的信息（第6 步），并且给浏览器返回一个响应（第7 步）。然后，该程序将继续更新页面( 第4 步）。请求和响应都发生在后台，用户甚至可能根本意识不到它们的存在， 因为页面的URL 和标题通常不会改变。通过引入客户端程序，页面可以提供一个比单靠服务器端程序更能响应用户的接口。

服务器端动态Web 页面生成

• 让我们更详细地来看服务器端是如何生成动态页面内容的．服务器端必须处理的一个简单情况是表单的使用。加入一个用户填写了邮购表单，然后点击“提交订单”按钮。当用户点击该按钮后， 一个请求就被发送到由URL指定的服务器，请求包含表单以及用户填写的表单内容（如到http://widget.com/cgi-bin/order.cgi 的POST）。这些数据必须由某个程序或脚本来处理。因此，该URL 指定了要运行的程序，提供的数据作为该程序的输入。在这种情况下， 处理将涉及在内部系统输入订单、更新客户记录和收取信用卡的付费。这个请求返回的页面将取决于处理过程中发生的事情，它并不像一个静态页面那样固定不变。如果订单成功，返回的页面可能给出了预计的出货日期：如果订单不成功，返回的页面可能会给出订购的部件缺货或出于某种原因信用卡不再有效等有关信息。
• 究竟如何在服务器上运行一个程序而不是检索一个文件则取决于Web 服务器的设计。Web 协议本身没有说明。这是因为该接口可以是专有的，浏览器并不需要知道里面的细节。至于浏览器，它仅仅负责发出请求和获取页面。然而，为了让Web 服务器能够调用程序，已经开发出了标准的API 。这些接口的存在使得开发人员更加容易地把不同的服务器扩展到Web 应用程序。我们将通过简要地考查两个API ，让你感觉它们是如何工作的。
• 第一种处理动态页面请求的方法称为公共网关接口（ CGI, Common Gateway Interface)，由RFC 3875 定义，这是自从有了Web 就一直可用的方法。CGI 提供了一个接口，允许Web 服务器与后端程序及脚本通信：这些后端程序和脚本接受输入信息（例如，来自表单），并生成HTML 页面作为响应。通常，这些后端程序可以用任何一种开发者便利的语言编写，通常都是些方便开发的脚本语言。可以选择Python、Ruby 、Perl 或任何你喜欢的语言。
• 按照惯例，通过CGI 调用的程序常驻在一个称为cgi-bin 的目录下，该目录在URL 中可以看到。服务器将一个请求映射到这个目录下一个程序名，并且以一个单独的进程执行该程序。它把与请求一起发送过来的任何数据作为程序的输入，而程序的输出则提供了一个返回给浏览器的网页。在我们的例子中，调用的程序是order.cgi 。它解析参数并处理订单。一个有用的约定是如果没有提供表单的输入数据，那么该程序将返回订单的HTML。通过这种方式，程序一定要知道表单的表示。
• 我们将看到的第二种常见的API 方法相当不同。这里的方法是在HTML 页面中嵌入少量的脚本，然后让服务器来执行这些脚本以便生成最终发送给客户的页面。编写这些脚本的一种流行语言是超文本预处理器（PHP, Hypertext Preprocessor ）。为了使用PHP，服务器必须能够理解PHP，就好像浏览器必须理解css 才可以解释具有样式表的Web 页面一样。通常，服务器用文件扩展名php 来标识包含PHP 的Web 页面，而不是用html 或者htm扩展名。
• PHP 的使用类似于CGI。作为一个展示其如何处理表单的例子，我们看图(a）所示的例子。此图的顶部包含了一个含有简单表单的普通HTML 页面。这时，＜form＞标签指明了当用户提交表单后应该调用action.php 文件来处理参数。该页面显示了两个文本框，一个要求输入名字，另一个要求输入年龄。当用户填写了这两个框并且表单被提交后，服务器解析并且把名字放到name 变量中，把年龄放到age 变量中：然后，作为应答，服务器开始处理action.php 文件，如图(b）所示。在处理这个文件的过程中，要执行PHP 命令。如果用户在框中输入的是“Barbara"和"32 ”，那么返回的HTML文件将如图(c）所示。因此，使用PHP 以后处理表单变得非常简单。尽管PHP 非常易于使用，但它实际上是一种功能强大的程序设计语言，是Web 和服务器数据库的接口。它具有变量、字符串、数组，以及在C 语言中可以找得到的绝大多数控制结构，而且它还有比printf 更强大的I/O功能。PHP 是开放源码，可以免费获取，而且用途广泛。经过精心设计，PHP能与Apache 服务器很好地协同工作：而Apache 也是开放源码的，是世界上使用最为广泛的Web 服务器。要了解PHP 的更多信息，请参看（ Valade,2009 ）。
• 我们现在已经看到了两种用来生成动态HTML 页面的不同方法： CGI 脚本和内嵌的PHP。除此之外，还存在几种其他技术可选。Java 服务器页面（JSP，JavaServer Pages ）与PHP非常相似，只不过页面中的动态部分是用Java 编程语言而不是PHP编写的。使用这种技术的页面具有文件扩展名.jsp 。活动服务器页面（ASP.NET, Active Server Page ）是Microsoft 版本的PHP和JSP 。它使用Microsoft专用的 .NET 网络应用框架来生成动态内容。使用这种技术的页面具有文件扩展名.aspx。在这3 种技术中，究竟选择哪种通常更多地与策略有关（开放源码与Microsoft ）而并非取决于技术，因为这3 种语言旗鼓相当。

客户端动态Web 页面生成

• PHP和CGI 脚本解决了处理表单输入以及服务器与数据库的交互问题。它们都可以接受来自表单的入境信息、查询一个或多个数据库，然后利用查找结果生成HTML 页面。它们所不能做的是响应鼠标移动事件，或者直接与用户交互。为了达到这个目的，有必要在HTML 页面中嵌入脚本，而且这些脚本必须运行在客户机上而不是在服务器上。从HTML4.0 开始，可以通过＜script>标签来启用这样的脚本。用来产生这种交互式Web 页面的技术统称为动态HTML。
• 最流行的客户端脚本语言是JavaScript，我们现在快速简短地了解它。无论名字看起来有多么的类似， JavaScript 与Java 编程语言几乎没有共同之处。与其他脚本语言一样，JavaScript 是一种非常高级的语言。例如，仅仅只要一行JavaScript 代码就可以弹出一个对话框、等待文本输入，然后将结果字符串存放到一个变量中。这种高级特性使得JavaScript非常适合于设计交互式Web 页面。另一方面，它的变异速度比用X 光机捕捉到的果蝇还要快，所以，要想编写出能在所有平台上都良好工作的JavaScript 程序非常困难，但也许有一天它会稳定下来。
• 作为JavaScript 程序的一个例子如下图。它显示了一个表单要求输入名字和年龄，并且预测这个人明年的年龄。主体部分基本上与PHP 例子相同，主要的区别在于submit 按钮的声明，以及其中的赋值语句。赋值语句告诉浏览器，当按钮被单击时调用response 脚本，并且将表单作为一个参数传递给它。
• 这里全新的部分在于HTML 文件头部对JavaScript 函数response 的声明， HTML 文件的头部通常是为标题、背景颜色等保留的。这个函数从表单的name字段提取出相应的值，并将它作为一个字符串存放在person 变量中。它还提取出age 字段的值，并且通过eval 函数将该值转化为一个整数，然后加1 并把结果存放在years 变量中。接着，它打开一个用于输出的文档，利用writeIn 方法向这个文档做了四次写操作，然后关闭文档。该文档是一个HTML 文件，这可以从文档中的各种HTML 标签看出来。然后浏览器在屏幕上显示这个文档。
• PHP 和JavaScript 看上去很相似，它们都是嵌入在HTML 文件中的代码，但它们的处理方式完全不同，理解这一点非常重要。在PHP 例子中，当用户单击了submit按钮后，浏览器将表单中的信息收集到一个长字符串中，然后将它发送给服务器请求一个PHP 页面。服务器加载该PHP 文件，并且执行内嵌的PHP 脚本，由此产生一个新的PHP页面。然后该页面被送回给浏览器以便显示出来。浏览器不能确定这是由一个程序生成的。这个过程由图（a）的第1 ～4 步表示。
• 在JavaScript 示例中，当用户点击submit 按钮，浏览器就解释该页面中包含的一个JavaScript 函数。所有的工作都在本地完成，即在浏览器内部完成。这时没有与服务器取得任何联系。这个处理过程如图(b）的第1 步和第2 步所示。因此，结果几乎在瞬间就显示出来，而用PHP生成的HTML 在到达客户端之前可能有几秒钟的延迟。
• 这种区别并不意味着JavaScript 比PHP更好。它们的用途完全不同。PHP （同时也暗示着JSP 和ASP ）用在需要与远程数据库进行交互时；而JavaScript （和其他我们将要提及的客户端语言，比如VBScript ）则用在需要客户端计算机与用户交互时。当然有可能将两者结合起来，正如我们马上要看的。
• JavaScript 并不是使Web 页面具备高度交互性的唯一方法。另外一种适用于Windows平台的方法是VBScript，它基于VisualBasic。还有另一种跨平台的流行方法是使用小程序(Applet ）。这些Java 小程序已经被编译成一种虚拟机的机器指令，这种虚拟机称为Java 虚拟机（ JVM, Java Virtual Machine ）。Applet 可以被嵌入到HTML 页面中（在＜applet>和</ applet>之间），并被具有JVM 能力的浏览器解释执行。因为Java 小程序是被解释执行而不是被直接执行的，因此Java 解释器可以防止它们做坏事。至少理论上是这样的。实际上，小程序编写者已经发现在Java I/O 库中有近乎无限的错误需要被发掘。Microsoft 对于Sun 公司Java 小程序的回应是允许Web 页面包含ActiveX 控件，这是指一种被编译成x86 机器指令的程序，可以直接在硬件裸机上执行。这种特性使得ActiveX控件比解释执行的Java 小程序更快更灵活，因为它可以完成任何普通程序能够做到的事情。当Internet Explorer 浏览器在某个Web 页面中发现了一个ActiveX 控件时，它会下载该控件，检验它的身份然后执行该控件。然而，下载和运行外部程序将会带来巨大的安全问题。
• 由于几乎所有的浏览器都可以解释Java 程序和JavaScript，所以如果设计者希望制作出具有高度交互性的Web 页面，则他至少有两种技术可供选择：另外，如果多平台的移植性不是一个问题，则还可以考虑使用ActiveX 技术。作为一般规则， JavaScript 比较容易编写， Java 小程序执行得更快一些，而ActiveX 控件是运行速度最快的。而且，由于所有的浏览器实现了完全相同的JVM，但是没有两个浏览器实现了相同版本的JavaScript，所以Java 小程序比JavaScript 程序具有更好的移植性。

AJAX——异步JavaScript 和XML

• 引人注目的Web 应用程序需要用户界面具备可响应能力，而且能无缝访问存储在远程Web 服务器上的数据。客户端上的脚本（例如，使用JavaScript ）和服务器上的脚本（比如PHP ）只是提供某种解决方案的基本技术，这些技术通常与其他几个关键技术结合起来一起使用，这些技术的组合就称为异步JavaScript 和XML(AJAX, Asynchronous Javascript and Xml ）。许多全功能的Web 应用，比如谷歌的Gmail 、地图和文档都是以AJAX 编写的。

• AJAX 有点混乱，因为它不是一种语言。它是一组需要一起协同工作的技术，正是这些技术使得Web 应用程序和传统的桌面应用一样能响应用户的每个动作。这些技术包括：
  (1 ）用来表现页面信息的HTML 和CSS。
  (2 ）浏览时改变部分页面的DOM (Document Object Model ）。
  (3 ）使得程序与服务器交换应用数据的XML ( eXtensible Markup Language ）。
  (4 ）程序发送和检索XML 数据的异步方式。
  (5 ）将所有功能组合在一起的JavaScript。
  由于这是一个相当大的集合，我们将逐个考查每一块的属性。我们己经看过了HTML和CSS 。它们标准化了如何描述内容和如何显示内容。可以产生HTML 和CSS的任何程序都可以使用Web 浏览器作为显示引擎。

• 文档对象模型（ DOM, Document Object Model) 是通过程序访问HTML 页面的一种表示。这种表示结构化成一棵反映HTML 元素的树。例如，PHP实例中时中HTML 对应的DOM树如图所示。根是一个HTML 元素，代表整个HTML 块。这个元素是body 元素的父节点， body 元素反过来又是form 元素的父节点。表单有两个属性，画在表单的右侧，一个属性为表单的方法（ POST ），另一个属性为表单的动作（请求的URL ）。这个元素有三个子结点，反映了表单包含的两个段落标签和一个输入标签。在树的底部是叶结点，包含了元素或者文字，如文本字符串。

• DOM 模型的意义在于它给程序提供了一种改变部分页面内容的简单方法。没有必要重写整个页面。只有包含了需要改变内容的树结点才对页面内容进行替换。当页面内容发生变化时，浏览器将相应地更新显示内容。例如，如果部分页面上的一个图像被DOM 改变了，浏览器将更新该图像，而不改变页面的其他部分内容。DOM 是一个强大的制作网页万法，井且可以演变发展。

• 第三个技术，可扩展标记语言（XML， eXtensible Markup Language ）是一个说明结构化内容的语言。HTML 将内容与格式混合在一起，因为它关注的是信息的表示。然而，随着Web 应用程序变得越来越普遍，将独立的结构化内容从它的表示中分离开来的需求也越来越强烈。例如，考虑一个程序，针对一些书它去搜索Web，以期找出最好的价格。为此它需要分析许多Web 页面， 寻找表项的标题和价格。对程序来说，要找出HTML 网页中哪里是标题、哪里是价格是一件非常困难的事情。出于这个原因， W3C 开发了XML (Bray 等， 2006 ），为了能够自动处理允许网页内容结构化。与HTML 不同， XML 没有定义任何标签。每个用户可以定义自己的标签。

• 下图给出了一个简单的XML 文档例子。它定义了一个名为book list 的结构， 这是一个图书列表。每本书有3 个字段：标题、作者、出版年份。这些结构非常简单。结构允许有重复的字段〈例如，多个作者〉、可选字段〈例如，有声读物URL ）和替代字段（例如，如果它是印刷版，给出一家书店的URL ；或者如果它是绝版书，给出拍卖网站的URL ）。在这里例子中，三个字段中的每一个都是不可分割的整体，但它允许被进一步划分。例如，作者字段可作如下划分，以便对搜索和格式化做细粒度的控制：
  < author>
  <first_name> George </first_name>
  < last name> Zipf </last_name>
  </ author>
  每个字段进一步划分成子字段和子字段，可以达到任意深度。图中全部文件所做的只是定义了一个包含3 本书的图书清单。它非常适合于浏览器端运行的程序和服务器传输信息，但它没有说明如何显示作为网页的文档。要做到这一点，一个分析信息并判定1949 是图书出版年的程序可能输出这样的HTML：标题被标记为斜体文本。另外， 一种称为可扩展样式表语言转换（ XSLT, eXtensible Stylesheet Language Transformations ）的语言可以用来定义如何将XML 转换成HTML。XSLT 类似于CSS ， 但比CSS 更强大。

• 不用HTML 而采用XML 来表示数据的另一个优点是数据更易于被程序分析。HTML最初是手工编写（而且现在往往仍然如此〉，所以它多少有点马虎。有时候会忘记写上结束标签，比如＜/p＞ 。其他标签没有匹配的结束标签，像＜br＞。还有其他标签可能被不恰当地嵌套着，而且标签和属性名可以有所不同。大多数浏览器都各尽其能地工作。XML 在定义上更严格也更清晰。标签名字和属性总是小写的，标签必须始终以它们打开的相反次序关闭（或者清楚地表明它们是否是一个没有相应关闭的空标签〉，而且属性值必须用引号括起来。这种精确定义使得程序解析更加容易，而且绝无二义性。

• 甚至HTML 也可以按照XML 术语来定义。这种方法称为扩展超文本标记语言（XHTML， eXtended HyperText Markup Language ）。基本上，它是一个非常挑剔的HTML版本。XHML页面必须严格符合XML 规则，否则它们不会被浏览器接受。这种情况下，没有更多伪劣的网页，而且也不存在浏览器之间的不一致。就XML 而言，其目的是为了产生更好的网页供程序处理（即Web 应用程序〉。虽然XHTML 自1998 年就己经出现，但它的发展一直很缓慢。生成HTML 的人们不明白为什么他们需要XHTML，而且浏览器的支持也已经落后。现在HTML5.0 已经被定义出来，因此页面可以表示成HTML 也可以表示成XHTML，这样有助于过渡。最终， XHTML 将取代HTML，但在完成过渡之前将是一个漫长的过程。XML 也被证明可用作程序之间的流行通信语言。当这种通信由HTTP 协议承载时。特别是，简单对象访问协议（ SOAP, Simple Object Access Protocol) 是一个实现了Web 服务的方法，它以一种语言无关并且系统无关的方式执行程序之间的RPC 。客户端构造一个XML 消息的请求，并使用HTTP 协议把它发送到服务器：服务器返回一个XML 格式的消息作为应答。这样，异构平台上的应用程序可以进行通信。

• 回到AJAX，我们的观点很简单，当运行在浏览器和服务器上的程序需要进行数据交换时， XML是一种有用的格式。然而，为了在发送或接收数据时为浏览器提供可响应的接口，它必须尽可能用脚本来执行异步I/O 而不会阻塞页面的显示，同时等待对一个请求的响应。例如，考虑在浏览器中滚动一幅地图。当浏览器收到滚动动作的通知，地图页面上的脚本可能会向服务器请求更多的地图数据，尤其是显示的地图接近数据的边缘。在获取这些数据时界面不应该呆滞，因为这样的接口不会赢得任何用户的赞赏。相反，地图的滚动应该继续平滑地进行。当数据到达后要通知该脚本以便它可以使用新到的数据。如果一切顺利，新的地图数据应该在需要它之前获得。现代浏览器都支持这种通信模型。

• 拼图中的最后一块是将AJAX 保持住的脚本语言，对上述列表中的技术提供访问方式。在大多数情况下，这种语言是JavaScript，但也有诸如VB Script 的替代品。我们之前介绍了JavaScript 的一个简单例子。注意不要被这种简单性所愚弄， JavaScript 有许多怪癖：但它是一个完全成熟的编程语言，拥有所有C 或Java 的能力。它有变量、字符串、数组、对象、函数和所有通常的控制结构。它还具有与浏览器和Web 页面的特殊接口。JavaScript可以在屏幕上跟踪鼠标在对象上的移动，这样很容易突然弹出一个菜单，使得Web 页面看起来更加生动活泼。它还可以使用DOM 来访问页面、操作HTML 和XML，并执行异步HTTP 通信。

• 让我们简要地总结到目前为止涉及的技术，并用一张图把它们联系起来。完整的Web 页面可以用服务器机器上的各种脚本动态生成。这些脚本可以用诸如PHP, JSP 或 ASP. NET 这样的服务器扩展语言编写，或者由作为单独的
  CGI 进程运行，从而可以用任何语言来编写。这些选项如图所示。

• 一旦浏览器接收到这些网页，就把它们视为HTML 、CSS和其他MIME 类型的正常页面对待，并且显示给用户。可以通过安装运行在浏览器内部的插件和运行在浏览器之外的辅助应用程序，来扩展浏览器支持的MIME 类型。在客户端生成动态内容也是可能的。嵌入到网页中的程序可以用JavaScript 、VB Script、Java 和其他语言编写。这些程序可以执行任意的计算，并且更新屏幕显示。使用AJAX,Web 页面中的程序可以异步地与服务器交换XML 和其他各种数据。这种模式支持丰富的Web 应用程序，使它们看起来就像传统的应用程序一样，只有一点除外，那就是它们运行在浏览器内而且访问的信息存储在Internet 的服务器上。