1.1 动态页面和静态页面

通过HTML、CSS和JavaScript这些技术开发出来的网站页面，因为使用了GIF图片、Flash动画、CSS动态效果、JS交互等技术，页面也“动”了起来，不过它们仍然属于静态页面。本节将介绍什么是动态页面，使用动态页面的好处，以及Web应用系统的工作原理。

1.1.1 动态页面案例

假设现在需要完成一个订票网站的查询功能，即用户输入“出发地”、“目的地”和“出发日期”，单击“查询”按钮，需要查出车次及余票信息，如图1.1和图1.2所示。

图1.1 订票网站查询功能

图1.2 订票网站查询结果

回想一下之前学习的技术，能实现这样的功能吗？答案是否定的。因为之前写的页面，里面的内容都是事先准备好的，编写出的页面都是固定内容的，不能根据用户输入的条件，结合实际的数据，将变化的内容展现给特定查询的用户。

类似这样的需求非常多，例如网上银行，用户需要查询指定账户、指定时间的交易明细，Web应用系统需要根据用户的输入，提供给用户查询信息，如图1.3和图1.4所示。

图1.3 网上银行查询功能

图1.4 网上银行查询结果

进行网上银行查询时，根据不同的用户、不同的查询条件，Web系统会动态组织页面内容，这就是动态网页的一个典型应用。

1.1.2 动态页面

动态页面是在服务器端运行的程序，它会使用服务器端脚本语言（例如JSP、PHP、ASP），直接或者通过其他程序，存取数据库中的数据，将结果动态生成页面内容展现给用户。

除了查询结果页面是动态页面外，购物车、订单查询、商品列表、处理用户登录操作等很多类型的页面，都属于获取数据库中特定数据并展示的动态页面；而处理用户注册、在线问卷调查、网上投票等操作的页面，属于将用户表单中提交的数据存储到数据库表的动态页面。

接下来介绍静态页面和动态页面的特点。

● 静态页面

Web应用系统访问者只能被动地浏览页面内容。其特点如下：

（1）页面内容不会发生变化，除非页面设计者修改了页面内容，并上传到服务器进行了更新。

（2）不能实现与用户的交互。即信息流向是单向的，只能从服务器到浏览器，服务器不能根据用户的选择调整返回给用户的页面内容。

● 动态页面

对于动态页面，Web服务器处理方式和对静态页面的处理方式完全不同。当Web服务器接收到静态页面的请求后，直接将该页面反馈给客户端浏览器，不进行任何的处理。而如果接收到的是动态页面的请求，则先从Web服务器中找到该页面，并将它传递给一个应用程序服务器，由应用程序服务器来解释和执行，将执行结果反馈给客户端浏览器。动态页面的特点如下：

（1）动态页面以数据库技术为基础，可以根据用户的需求从数据库中获取特定的数据，动态地产生页面内容，增强了页面的灵活性，减少了Web应用系统开发者的工作量。

（2）采用动态页面技术，可以增强Web应用系统的功能，例如用户注册、用户登录、订单查询等功能。

（3）动态页面必须有Web服务器和应用程序服务器的支持，当用户请求一个动态页面时，服务器根据用户的请求参数，组织动态页面的内容并反馈给客户端浏览器。

（4）因为动态页面是在用户请求时才动态组织页面内容的，所以对搜索引擎的支持不够好，如果开发的Web应用系统需要能很好地支持搜索引擎，则需要做特殊的处理。

静态页面和动态页面各有特点，Web应用系统是采用静态页面还是动态页面，取决于该Web应用系统的功能需求。如果该Web应用仅是一个企业网站，且该企业网站上的内容很少更新，则建议采用纯静态页面的形式，简单且速度快。反之，一般需要采用动态页面技术来实现Web应用系统。

1.1.3 Web应用系统基础

● Web应用系统工作原理

Web应用系统通常也称为B/S（浏览器/服务器）构架应用系统，采用请求/响应的模式进行交互，工作原理如图1.5所示。

图1.5 Web应用系统工作原理

（1）用户在页面表单中输入信息，例如在百度主页中输入JSP，单击“百度一下”按钮。

（2）客户端浏览器向服务器指定地址发送请求，请求中包含刚才输入的请求参数“JSP”。

（3）服务器端接收到请求之后，根据请求的类型（如百度网页查询）和请求参数进行处理，发送SQL语句，访问数据库。

（4）数据库服务器接收SQL语句，对SQL语句进行处理，并将处理结果提供给应用程序服务器。

（5）服务器对数据库查询结果进行处理，动态产生页面内容，返回给客户端浏览器。

（6）客户端浏览器解释执行服务器返回的页面内容，呈现给用户最终结果。

● HTTP协议

HTTP协议是Web应用系统最重要的协议，下面作简要介绍。

超文本传输协议（HyperText Transfer Protocol，HTTP）是一种详细规定了浏览器和Web服务器之间互相通信的规则，通过互联网传送Web文档的数据传送协议。该协议用于从Web服务器传输超文本到客户端浏览器，它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪一部分内容首先显示（如文本先于图形）等。

HTTP协议是一个应用层协议，由请求和响应构成，是一个标准的客户端/服务器端模型。HTTP协议的主要特点包括：

（1）支持C/S（客户端/服务器端）模式。

（2）简单快速：客户端向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、POST，每种方法规定了客户与服务器联系的类型。由于HTTP协议简单，对应Web服务器处理起来也比较简单，客户端和服务器端通信速度很快。

（3）灵活：HTTP协议允许传输任意类型的数据对象，正在传输的类型由Content-Type加以标记。

（4）无连接：无连接是指HTTP协议限制每次连接只处理一个HTTP请求。服务器处理完客户端的请求，并收到客户的应答后，即断开连接。

（5）无状态：无状态是指HTTP协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则必须重新发送给服务器。

● HTTP请求

下面是一个HTTP请求的例子，读者可通过对请求消息的分析，了解HTTP协议的请求内容。

      GET /examples/index.html HTTP/1.1
      Host:www.blue-bridge.com
      Connection:Keep-Alive
      User-agent:Mozilla/4.0
      Accept-language:zh-cn
      user=jacky&pwd=654321

一个HTTP请求的内容可以不止这五行，也可以只有一行。该请求的第一行称为请求行，后续各行都称为请求头部。请求行里有三个字段，分别是方法字段、URL字段、HTTP版本字段。方法字段有若干个值可供选择，通常使用的方法是GET或POST方法。

接下来介绍HTTP请求的请求头部。头部行Host:www.blue-bridge.com指定接收HTTP请求的主机，Connection: Keep-Alive是在告知服务器本请求使用持久的TCP连接，服务器返回请求的对象后不关闭TCP连接。持久连接是HTTP1.1版连接的默认行为，是指每个TCP连接可以处理多个HTTP请求，解决了一个HTTP请求需要一个连接所造成的需要和服务器建立多个连接的服务器负担问题。User-agent指定用户代理，也就是产生了当前请求的浏览器类型。这个头部行很有用，因为服务器可以给不同类型的用户代理发送同一个对象的不同版本。最后，Accept-language头部行指出如果所请求对象有指定语言版本（例如简体中文版），那么用户接收该版本，如果没有这个语言版本，那么服务器应该发送其默认版本。user=jacky&pwd=654321表示多个参数名和参数值，可以是通过表单提交的，也可以是程序员自己编写的。

通常程序员会采用POST方法发送请求提交表单内容，采用POST方法，则在请求头部之后会有一个请求体。用户采用POST方法提交表单时，表单中请求参数不放在请求的头部，而是放在请求体里。

● HTTP响应

下面是一个HTTP响应的例子。

      HTTP/1.1200 0K
      Connection:close
      Date: Thu, 13 Oct 2013 11:17:34 GMT
      Server: Apache/2.0.54 (Unix)
      Last-Modified:Mon,22 Jun 2012 10;22;24 GMT
      Content-Length:4322
      Content-Type:text/html
      数据…

这个HTTP响应分为三个部分：首先是起始的状态行，之后是头部行（又称为消息报头）、最后是响应正文。状态行有三个字段：协议版本字段、状态码字段、状态代码文本描述字段。

现在看一下本例中的各个头部行。服务器使用Connection:close头部行告知客户端自己将在发送完本消息后关闭TCP连接，Date头部行指出服务器创建并发送本响应消息的日期和时间。注意，这并不是对象本身的创建时间或最后修改时间，而是服务器把该对象从其文件系统中取出，插入响应消息中发送出去的时间。本例中Server头部行指出本消息是由Apache服务器产生的，它与HTTP请求消息中的User-agent头部行类似，Last-Modified头部行指出对象本身的创建或最后修改日期和时间，Last-Modified头部对于对象的高速缓存至关重要，需要读者引起注意。Content-Length头部行指出所发送对象的字节数，Content-Type头部行指出包含在响应正文中的对象的类型，本例是HTML文本。

接下来重点介绍状态行中的状态码。状态码由三位数字组成，第一位数字定义了响应的类别，且有五种可能取值。

1**：指示信息，表示请求已接收，需要继续处理。

2**：成功，表示请求已被成功接收、理解、接受。

3**：重定向，代表需要客户端采取进一步的操作才能完成请求。

4**：客户端错误，请求有语法错误或请求无法实现。

5**：服务器端错误，服务器未能实现合法的请求。

下面是常见的状态码、状态描述及说明：

200：OK，客户端请求成功。

301/302：Moved Permanently/Found，被请求的资源已永久/临时移动到新位置，需要重定向。

400：Bad Request，客户端请求有语法错误，不能被服务器所理解。

401：Unauthorized，请求未经授权。

404：Not Found，请求资源不存在，输入了错误的URL。

500：Internal Server Error，服务器发生不可预期的错误。

503：Server Unavailable，服务器当前不能处理客户端的请求，一段时间后可能恢复正常。