1.1 動(dòng)態(tài)頁(yè)面和靜態(tài)頁(yè)面

通過(guò)HTML、CSS和JavaScript這些技術(shù)開(kāi)發(fā)出來(lái)的網(wǎng)站頁(yè)面，因?yàn)槭褂昧薌IF圖片、Flash動(dòng)畫、CSS動(dòng)態(tài)效果、JS交互等技術(shù)，頁(yè)面也“動(dòng)”了起來(lái)，不過(guò)它們?nèi)匀粚儆陟o態(tài)頁(yè)面。本節(jié)將介紹什么是動(dòng)態(tài)頁(yè)面，使用動(dòng)態(tài)頁(yè)面的好處，以及Web應(yīng)用系統(tǒng)的工作原理。

1.1.1 動(dòng)態(tài)頁(yè)面案例

假設(shè)現(xiàn)在需要完成一個(gè)訂票網(wǎng)站的查詢功能，即用戶輸入“出發(fā)地”、“目的地”和“出發(fā)日期”，單擊“查詢”按鈕，需要查出車次及余票信息，如圖1.1和圖1.2所示。

圖1.1 訂票網(wǎng)站查詢功能

圖1.2 訂票網(wǎng)站查詢結(jié)果

回想一下之前學(xué)習(xí)的技術(shù)，能實(shí)現(xiàn)這樣的功能嗎？答案是否定的。因?yàn)橹皩懙捻?yè)面，里面的內(nèi)容都是事先準(zhǔn)備好的，編寫出的頁(yè)面都是固定內(nèi)容的，不能根據(jù)用戶輸入的條件，結(jié)合實(shí)際的數(shù)據(jù)，將變化的內(nèi)容展現(xiàn)給特定查詢的用戶。

類似這樣的需求非常多，例如網(wǎng)上銀行，用戶需要查詢指定賬戶、指定時(shí)間的交易明細(xì)，Web應(yīng)用系統(tǒng)需要根據(jù)用戶的輸入，提供給用戶查詢信息，如圖1.3和圖1.4所示。

圖1.3 網(wǎng)上銀行查詢功能

圖1.4 網(wǎng)上銀行查詢結(jié)果

進(jìn)行網(wǎng)上銀行查詢時(shí)，根據(jù)不同的用戶、不同的查詢條件，Web系統(tǒng)會(huì)動(dòng)態(tài)組織頁(yè)面內(nèi)容，這就是動(dòng)態(tài)網(wǎng)頁(yè)的一個(gè)典型應(yīng)用。

1.1.2 動(dòng)態(tài)頁(yè)面

動(dòng)態(tài)頁(yè)面是在服務(wù)器端運(yùn)行的程序，它會(huì)使用服務(wù)器端腳本語(yǔ)言（例如JSP、PHP、ASP），直接或者通過(guò)其他程序，存取數(shù)據(jù)庫(kù)中的數(shù)據(jù)，將結(jié)果動(dòng)態(tài)生成頁(yè)面內(nèi)容展現(xiàn)給用戶。

除了查詢結(jié)果頁(yè)面是動(dòng)態(tài)頁(yè)面外，購(gòu)物車、訂單查詢、商品列表、處理用戶登錄操作等很多類型的頁(yè)面，都屬于獲取數(shù)據(jù)庫(kù)中特定數(shù)據(jù)并展示的動(dòng)態(tài)頁(yè)面；而處理用戶注冊(cè)、在線問(wèn)卷調(diào)查、網(wǎng)上投票等操作的頁(yè)面，屬于將用戶表單中提交的數(shù)據(jù)存儲(chǔ)到數(shù)據(jù)庫(kù)表的動(dòng)態(tài)頁(yè)面。

接下來(lái)介紹靜態(tài)頁(yè)面和動(dòng)態(tài)頁(yè)面的特點(diǎn)。

● 靜態(tài)頁(yè)面

Web應(yīng)用系統(tǒng)訪問(wèn)者只能被動(dòng)地瀏覽頁(yè)面內(nèi)容。其特點(diǎn)如下：

（1）頁(yè)面內(nèi)容不會(huì)發(fā)生變化，除非頁(yè)面設(shè)計(jì)者修改了頁(yè)面內(nèi)容，并上傳到服務(wù)器進(jìn)行了更新。

（2）不能實(shí)現(xiàn)與用戶的交互。即信息流向是單向的，只能從服務(wù)器到瀏覽器，服務(wù)器不能根據(jù)用戶的選擇調(diào)整返回給用戶的頁(yè)面內(nèi)容。

● 動(dòng)態(tài)頁(yè)面

對(duì)于動(dòng)態(tài)頁(yè)面，Web服務(wù)器處理方式和對(duì)靜態(tài)頁(yè)面的處理方式完全不同。當(dāng)Web服務(wù)器接收到靜態(tài)頁(yè)面的請(qǐng)求后，直接將該頁(yè)面反饋給客戶端瀏覽器，不進(jìn)行任何的處理。而如果接收到的是動(dòng)態(tài)頁(yè)面的請(qǐng)求，則先從Web服務(wù)器中找到該頁(yè)面，并將它傳遞給一個(gè)應(yīng)用程序服務(wù)器，由應(yīng)用程序服務(wù)器來(lái)解釋和執(zhí)行，將執(zhí)行結(jié)果反饋給客戶端瀏覽器。動(dòng)態(tài)頁(yè)面的特點(diǎn)如下：

（1）動(dòng)態(tài)頁(yè)面以數(shù)據(jù)庫(kù)技術(shù)為基礎(chǔ)，可以根據(jù)用戶的需求從數(shù)據(jù)庫(kù)中獲取特定的數(shù)據(jù)，動(dòng)態(tài)地產(chǎn)生頁(yè)面內(nèi)容，增強(qiáng)了頁(yè)面的靈活性，減少了Web應(yīng)用系統(tǒng)開(kāi)發(fā)者的工作量。

（2）采用動(dòng)態(tài)頁(yè)面技術(shù)，可以增強(qiáng)Web應(yīng)用系統(tǒng)的功能，例如用戶注冊(cè)、用戶登錄、訂單查詢等功能。

（3）動(dòng)態(tài)頁(yè)面必須有Web服務(wù)器和應(yīng)用程序服務(wù)器的支持，當(dāng)用戶請(qǐng)求一個(gè)動(dòng)態(tài)頁(yè)面時(shí)，服務(wù)器根據(jù)用戶的請(qǐng)求參數(shù)，組織動(dòng)態(tài)頁(yè)面的內(nèi)容并反饋給客戶端瀏覽器。

（4）因?yàn)閯?dòng)態(tài)頁(yè)面是在用戶請(qǐng)求時(shí)才動(dòng)態(tài)組織頁(yè)面內(nèi)容的，所以對(duì)搜索引擎的支持不夠好，如果開(kāi)發(fā)的Web應(yīng)用系統(tǒng)需要能很好地支持搜索引擎，則需要做特殊的處理。

靜態(tài)頁(yè)面和動(dòng)態(tài)頁(yè)面各有特點(diǎn)，Web應(yīng)用系統(tǒng)是采用靜態(tài)頁(yè)面還是動(dòng)態(tài)頁(yè)面，取決于該Web應(yīng)用系統(tǒng)的功能需求。如果該Web應(yīng)用僅是一個(gè)企業(yè)網(wǎng)站，且該企業(yè)網(wǎng)站上的內(nèi)容很少更新，則建議采用純靜態(tài)頁(yè)面的形式，簡(jiǎn)單且速度快。反之，一般需要采用動(dòng)態(tài)頁(yè)面技術(shù)來(lái)實(shí)現(xiàn)Web應(yīng)用系統(tǒng)。

1.1.3 Web應(yīng)用系統(tǒng)基礎(chǔ)

● Web應(yīng)用系統(tǒng)工作原理

Web應(yīng)用系統(tǒng)通常也稱為B/S（瀏覽器/服務(wù)器）構(gòu)架應(yīng)用系統(tǒng)，采用請(qǐng)求/響應(yīng)的模式進(jìn)行交互，工作原理如圖1.5所示。

圖1.5 Web應(yīng)用系統(tǒng)工作原理

（1）用戶在頁(yè)面表單中輸入信息，例如在百度主頁(yè)中輸入JSP，單擊“百度一下”按鈕。

（2）客戶端瀏覽器向服務(wù)器指定地址發(fā)送請(qǐng)求，請(qǐng)求中包含剛才輸入的請(qǐng)求參數(shù)“JSP”。

（3）服務(wù)器端接收到請(qǐng)求之后，根據(jù)請(qǐng)求的類型（如百度網(wǎng)頁(yè)查詢）和請(qǐng)求參數(shù)進(jìn)行處理，發(fā)送SQL語(yǔ)句，訪問(wèn)數(shù)據(jù)庫(kù)。

（4）數(shù)據(jù)庫(kù)服務(wù)器接收SQL語(yǔ)句，對(duì)SQL語(yǔ)句進(jìn)行處理，并將處理結(jié)果提供給應(yīng)用程序服務(wù)器。

（5）服務(wù)器對(duì)數(shù)據(jù)庫(kù)查詢結(jié)果進(jìn)行處理，動(dòng)態(tài)產(chǎn)生頁(yè)面內(nèi)容，返回給客戶端瀏覽器。

（6）客戶端瀏覽器解釋執(zhí)行服務(wù)器返回的頁(yè)面內(nèi)容，呈現(xiàn)給用戶最終結(jié)果。

● HTTP協(xié)議

HTTP協(xié)議是Web應(yīng)用系統(tǒng)最重要的協(xié)議，下面作簡(jiǎn)要介紹。

超文本傳輸協(xié)議（HyperText Transfer Protocol，HTTP）是一種詳細(xì)規(guī)定了瀏覽器和Web服務(wù)器之間互相通信的規(guī)則，通過(guò)互聯(lián)網(wǎng)傳送Web文檔的數(shù)據(jù)傳送協(xié)議。該協(xié)議用于從Web服務(wù)器傳輸超文本到客戶端瀏覽器，它可以使瀏覽器更加高效，使網(wǎng)絡(luò)傳輸減少。它不僅保證計(jì)算機(jī)正確快速地傳輸超文本文檔，還確定傳輸文檔中的哪一部分，以及哪一部分內(nèi)容首先顯示（如文本先于圖形）等。

HTTP協(xié)議是一個(gè)應(yīng)用層協(xié)議，由請(qǐng)求和響應(yīng)構(gòu)成，是一個(gè)標(biāo)準(zhǔn)的客戶端/服務(wù)器端模型。HTTP協(xié)議的主要特點(diǎn)包括：

（1）支持C/S（客戶端/服務(wù)器端）模式。

（2）簡(jiǎn)單快速：客戶端向服務(wù)器請(qǐng)求服務(wù)時(shí)，只需傳送請(qǐng)求方法和路徑。請(qǐng)求方法常用的有GET、POST，每種方法規(guī)定了客戶與服務(wù)器聯(lián)系的類型。由于HTTP協(xié)議簡(jiǎn)單，對(duì)應(yīng)Web服務(wù)器處理起來(lái)也比較簡(jiǎn)單，客戶端和服務(wù)器端通信速度很快。

（3）靈活：HTTP協(xié)議允許傳輸任意類型的數(shù)據(jù)對(duì)象，正在傳輸?shù)念愋陀蒀ontent-Type加以標(biāo)記。

（4）無(wú)連接：無(wú)連接是指HTTP協(xié)議限制每次連接只處理一個(gè)HTTP請(qǐng)求。服務(wù)器處理完客戶端的請(qǐng)求，并收到客戶的應(yīng)答后，即斷開(kāi)連接。

（5）無(wú)狀態(tài)：無(wú)狀態(tài)是指HTTP協(xié)議對(duì)于事務(wù)處理沒(méi)有記憶能力。缺少狀態(tài)意味著如果后續(xù)處理需要前面的信息，則必須重新發(fā)送給服務(wù)器。

● HTTP請(qǐng)求

下面是一個(gè)HTTP請(qǐng)求的例子，讀者可通過(guò)對(duì)請(qǐng)求消息的分析，了解HTTP協(xié)議的請(qǐng)求內(nèi)容。

      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

一個(gè)HTTP請(qǐng)求的內(nèi)容可以不止這五行，也可以只有一行。該請(qǐng)求的第一行稱為請(qǐng)求行，后續(xù)各行都稱為請(qǐng)求頭部。請(qǐng)求行里有三個(gè)字段，分別是方法字段、URL字段、HTTP版本字段。方法字段有若干個(gè)值可供選擇，通常使用的方法是GET或POST方法。

接下來(lái)介紹HTTP請(qǐng)求的請(qǐng)求頭部。頭部行Host:www.blue-bridge.com指定接收HTTP請(qǐng)求的主機(jī)，Connection: Keep-Alive是在告知服務(wù)器本請(qǐng)求使用持久的TCP連接，服務(wù)器返回請(qǐng)求的對(duì)象后不關(guān)閉TCP連接。持久連接是HTTP1.1版連接的默認(rèn)行為，是指每個(gè)TCP連接可以處理多個(gè)HTTP請(qǐng)求，解決了一個(gè)HTTP請(qǐng)求需要一個(gè)連接所造成的需要和服務(wù)器建立多個(gè)連接的服務(wù)器負(fù)擔(dān)問(wèn)題。User-agent指定用戶代理，也就是產(chǎn)生了當(dāng)前請(qǐng)求的瀏覽器類型。這個(gè)頭部行很有用，因?yàn)榉?wù)器可以給不同類型的用戶代理發(fā)送同一個(gè)對(duì)象的不同版本。最后，Accept-language頭部行指出如果所請(qǐng)求對(duì)象有指定語(yǔ)言版本（例如簡(jiǎn)體中文版），那么用戶接收該版本，如果沒(méi)有這個(gè)語(yǔ)言版本，那么服務(wù)器應(yīng)該發(fā)送其默認(rèn)版本。user=jacky&pwd=654321表示多個(gè)參數(shù)名和參數(shù)值，可以是通過(guò)表單提交的，也可以是程序員自己編寫的。

通常程序員會(huì)采用POST方法發(fā)送請(qǐng)求提交表單內(nèi)容，采用POST方法，則在請(qǐng)求頭部之后會(huì)有一個(gè)請(qǐng)求體。用戶采用POST方法提交表單時(shí)，表單中請(qǐng)求參數(shù)不放在請(qǐng)求的頭部，而是放在請(qǐng)求體里。

● HTTP響應(yīng)

下面是一個(gè)HTTP響應(yīng)的例子。

      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
      數(shù)據(jù)…

這個(gè)HTTP響應(yīng)分為三個(gè)部分：首先是起始的狀態(tài)行，之后是頭部行（又稱為消息報(bào)頭）、最后是響應(yīng)正文。狀態(tài)行有三個(gè)字段：協(xié)議版本字段、狀態(tài)碼字段、狀態(tài)代碼文本描述字段。

現(xiàn)在看一下本例中的各個(gè)頭部行。服務(wù)器使用Connection:close頭部行告知客戶端自己將在發(fā)送完本消息后關(guān)閉TCP連接，Date頭部行指出服務(wù)器創(chuàng)建并發(fā)送本響應(yīng)消息的日期和時(shí)間。注意，這并不是對(duì)象本身的創(chuàng)建時(shí)間或最后修改時(shí)間，而是服務(wù)器把該對(duì)象從其文件系統(tǒng)中取出，插入響應(yīng)消息中發(fā)送出去的時(shí)間。本例中Server頭部行指出本消息是由Apache服務(wù)器產(chǎn)生的，它與HTTP請(qǐng)求消息中的User-agent頭部行類似，Last-Modified頭部行指出對(duì)象本身的創(chuàng)建或最后修改日期和時(shí)間，Last-Modified頭部對(duì)于對(duì)象的高速緩存至關(guān)重要，需要讀者引起注意。Content-Length頭部行指出所發(fā)送對(duì)象的字節(jié)數(shù)，Content-Type頭部行指出包含在響應(yīng)正文中的對(duì)象的類型，本例是HTML文本。

接下來(lái)重點(diǎn)介紹狀態(tài)行中的狀態(tài)碼。狀態(tài)碼由三位數(shù)字組成，第一位數(shù)字定義了響應(yīng)的類別，且有五種可能取值。

1**：指示信息，表示請(qǐng)求已接收，需要繼續(xù)處理。

2**：成功，表示請(qǐng)求已被成功接收、理解、接受。

3**：重定向，代表需要客戶端采取進(jìn)一步的操作才能完成請(qǐng)求。

4**：客戶端錯(cuò)誤，請(qǐng)求有語(yǔ)法錯(cuò)誤或請(qǐng)求無(wú)法實(shí)現(xiàn)。

5**：服務(wù)器端錯(cuò)誤，服務(wù)器未能實(shí)現(xiàn)合法的請(qǐng)求。

下面是常見(jiàn)的狀態(tài)碼、狀態(tài)描述及說(shuō)明：

200：OK，客戶端請(qǐng)求成功。

301/302：Moved Permanently/Found，被請(qǐng)求的資源已永久/臨時(shí)移動(dòng)到新位置，需要重定向。

400：Bad Request，客戶端請(qǐng)求有語(yǔ)法錯(cuò)誤，不能被服務(wù)器所理解。

401：Unauthorized，請(qǐng)求未經(jīng)授權(quán)。

404：Not Found，請(qǐng)求資源不存在，輸入了錯(cuò)誤的URL。

500：Internal Server Error，服務(wù)器發(fā)生不可預(yù)期的錯(cuò)誤。

503：Server Unavailable，服務(wù)器當(dāng)前不能處理客戶端的請(qǐng)求，一段時(shí)間后可能恢復(fù)正常。