HTTP協議簡介

在Web應用中，服務器把網頁傳給瀏覽器，實際上就是把網頁的HTML代碼發送給瀏覽器，讓瀏覽器顯示出來。而瀏覽器和服務器之間的傳輸協議是HTTP，所以：

• HTML是一種用來定義網頁的文本，會HTML，就可以編寫網頁；
• HTTP是在網絡上傳輸HTML的協議，用於瀏覽器和服務器的通信。

在舉例子之前，我們需要安裝Google的Chrome瀏覽器。

為什麼要使用Chrome瀏覽器而不是IE呢？因為IE實在是太慢了，並且，IE對於開發和調試Web應用程序完全是一點用也沒有。

我們需要在瀏覽器很方便地調試我們的Web應用，而Chrome提供了一套完整地調試工具，非常適合Web開發。

安裝好Chrome瀏覽器後，打開Chrome，在菜單中選擇“視圖”，“開發者”，“開發者工具”，就可以顯示開發者工具：

Elements顯示網頁的結構，Network顯示瀏覽器和服務器的通信。我們點Network，確保第一個小紅燈亮著，Chrome就會記錄所有瀏覽器和服務器之間的通信：

當我們在地址欄輸入www.sina.com.cn時，瀏覽器將顯示新浪的首頁。在這個過程中，瀏覽器都幹了哪些事情呢？通過Network的記錄，我們就可以知道。在Network中，定位到第一條記錄，點擊，右側將顯示Request Headers，點擊右側的view source，我們就可以看到瀏覽器發給新浪服務器的請求：

最主要的頭兩行分析如下，第一行：

GET / HTTP/1.1

GET表示一個讀取請求，將從服務器獲得網頁數據，/表示URL的路徑，URL總是以/開頭，/就表示首頁，最後的HTTP/1.1指示採用的HTTP協議版本是1.1。目前HTTP協議的版本就是1.1，但是大部分服務器也支持1.0版本，主要區別在於1.1版本允許多個HTTP請求複用一個TCP連接，以加快傳輸速度。

從第二行開始，每一行都類似於Xxx: abcdefg：

Host: www.sina.com.cn

表示請求的域名是www.sina.com.cn。如果一臺服務器有多個網站，服務器就需要通過Host來區分瀏覽器請求的是哪個網站。

繼續往下找到Response Headers，點擊view source，顯示服務器返回的原始響應數據：

HTTP響應分為Header和Body兩部分（Body是可選項），我們在Network中看到的Header最重要的幾行如下：

200 OK

200表示一個成功的響應，後面的OK是說明。失敗的響應有404 Not Found：網頁不存在，500 Internal Server Error：服務器內部出錯，等等。

Content-Type: text/html

Content-Type指示響應的內容，這裡是text/html表示HTML網頁。請注意，瀏覽器就是依靠Content-Type來判斷響應的內容是網頁還是圖片，是視頻還是音樂。瀏覽器並不靠URL來判斷響應的內容，所以，即使URL是http://example.com/abc.jpg，它也不一定就是圖片。

HTTP響應的Body就是HTML源碼，我們在菜單欄選擇“視圖”，“開發者”，“查看網頁源碼”就可以在瀏覽器中直接查看HTML源碼：

當瀏覽器讀取到新浪首頁的HTML源碼後，它會解析HTML，顯示頁面，然後，根據HTML裡面的各種鏈接，再發送HTTP請求給新浪服務器，拿到相應的圖片、視頻、Flash、JavaScript腳本、CSS等各種資源，最終顯示出一個完整的頁面。所以我們在Network下面能看到很多額外的HTTP請求。

HTTP請求

跟蹤了新浪的首頁，我們來總結一下HTTP請求的流程：

步驟1：瀏覽器首先向服務器發送HTTP請求，請求包括：

方法：GET還是POST，GET僅請求資源，POST會附帶用戶數據；

路徑：/full/url/path；

域名：由Host頭指定：Host: www.sina.com

以及其他相關的Header；

如果是POST，那麼請求還包括一個Body，包含用戶數據

步驟2：服務器向瀏覽器返回HTTP響應，響應包括：

響應代碼：200表示成功，3xx表示重定向，4xx表示客戶端發送的請求有錯誤，5xx表示服務器端處理時發生了錯誤；

響應類型：由Content-Type指定；

以及其他相關的Header；

通常服務器的HTTP響應會攜帶內容，也就是有一個Body，包含響應的內容，網頁的HTML源碼就在Body中。

步驟3：如果瀏覽器還需要繼續向服務器請求其他資源，比如圖片，就再次發出HTTP請求，重複步驟1、2。

Web採用的HTTP協議採用了非常簡單的請求-響應模式，從而大大簡化了開發。當我們編寫一個頁面時，我們只需要在HTTP請求中把HTML發送出去，不需要考慮如何附帶圖片、視頻等，瀏覽器如果需要請求圖片和視頻，它會發送另一個HTTP請求，因此，一個HTTP請求只處理一個資源(此時就可以理解為TCP協議中的短連接，每個鏈接只獲取一個資源，如需要多個就需要建立多個鏈接)

HTTP協議同時具備極強的擴展性，雖然瀏覽器請求的是http://www.sina.com的首頁，但是新浪在HTML中可以鏈入其他服務器的資源，比如，從而將請求壓力分散到各個服務器上，並且，一個站點可以鏈接到其他站點，無數個站點互相鏈接起來，就形成了World Wide Web，簡稱WWW。

HTTP格式

每個HTTP請求和響應都遵循相同的格式，一個HTTP包含Header和Body兩部分，其中Body是可選的。

HTTP協議是一種文本協議，所以，它的格式也非常簡單。

HTTP GET請求的格式：

 GET /path HTTP/1.1
 Header1: Value1
 Header2: Value2
 Header3: Value3

每個Header一行一個，換行符是\\r\\n。

HTTP POST請求的格式：

 POST /path HTTP/1.1
 Header1: Value1
 Header2: Value2
 Header3: Value3
​
 body data goes here...

當遇到連續兩個\\r\\n時，Header部分結束，後面的數據全部是Body。

HTTP響應的格式：

 200 OK
 Header1: Value1
 Header2: Value2
 Header3: Value3 

​
 body data goes here...

HTTP響應如果包含body，也是通過\\r\\n來分隔的。

請再次注意，Body的數據類型由Content-Type頭來確定，如果是網頁，Body就是文本，如果是圖片，Body就是圖片的二進制數據。

當存在Content-Encoding時，Body數據是被壓縮的，最常見的壓縮方式是gzip，所以，看到Content-Encoding: gzip時，需要將Body數據先解壓縮，才能得到真正的數據。壓縮的目的在於減少Body的大小，加快網絡傳輸。

WSGI接口

Web應用的本質就是：

0. 瀏覽器發送一個HTTP請求；
1. 服務器收到請求，生成一個HTML文檔；
2. 服務器把HTML文檔作為HTTP響應的Body發送給瀏覽器；
3. 瀏覽器收到HTTP響應，從HTTP Body取出HTML文檔並顯示。

所以，最簡單的Web應用就是先把HTML用文件保存好，用一個現成的HTTP服務器軟件，接收用戶請求，從文件中讀取HTML，返回。Apache、Nginx、Lighttpd等這些常見的靜態服務器就是幹這件事情的。

如果要動態生成HTML，就需要把上述步驟自己來實現。不過，接受HTTP請求、解析HTTP請求、發送HTTP響應都是苦力活，如果我們自己來寫這些底層代碼，還沒開始寫動態HTML呢，就得花個把月去讀HTTP規範。

正確的做法是底層代碼由專門的服務器軟件實現，我們用Python專注於生成HTML文檔。因為我們不希望接觸到TCP連接、HTTP原始請求和響應格式，所以，需要一個統一的接口，讓我們專心用Python編寫Web業務。

這個接口就是WSGI：Web Server Gateway Interface。

WSGI接口定義非常簡單，它只要求Web開發者實現一個函數，就可以響應HTTP請求。我們來看一個最簡單的Web版本的“Hello, web!”：

def application(environ, start_response):
 start_response('200 OK', [('Content-Type', 'text/html')])
 return [b'
Hello, web!
']

上面的application()函數就是符合WSGI標準的一個HTTP處理函數，它接收兩個參數：

• environ：一個包含所有HTTP請求信息的dict對象；
• start_response：一個發送HTTP響應的函數。

在application()函數中，調用：

start_response('200 OK', [('Content-Type', 'text/html')])

就發送了HTTP響應的Header，注意Header只能發送一次，也就是隻能調用一次start_response()函數。start_response()函數接收兩個參數，一個是HTTP響應碼，一個是一組list表示的HTTP Header，每個Header用一個包含兩個str的tuple表示。

通常情況下，都應該把Content-Type頭髮送給瀏覽器。其他很多常用的HTTP Header也應該發送。

然後，函數的返回值b'

Hello, web!

有了WSGI，我們關心的就是如何從environ這個dict對象拿到HTTP請求信息，然後構造HTML，通過start_response()發送Header，最後返回Body。

整個application()函數本身沒有涉及到任何解析HTTP的部分，也就是說，底層代碼不需要我們自己編寫，我們只負責在更高層次上考慮如何響應請求就可以了。

不過，等等，這個application()函數怎麼調用？如果我們自己調用，兩個參數environ和start_response我們沒法提供，返回的bytes也沒法發給瀏覽器。

所以application()函數必須由WSGI服務器來調用。有很多符合WSGI規範的服務器，我們可以挑選一個來用。但是現在，我們只想儘快測試一下我們編寫的application()函數真的可以把HTML輸出到瀏覽器，所以，要趕緊找一個最簡單的WSGI服務器，把我們的Web應用程序跑起來。

好消息是Python內置了一個WSGI服務器，這個模塊叫wsgiref，它是用純Python編寫的WSGI服務器的參考實現。所謂“參考實現”是指該實現完全符合WSGI標準，但是不考慮任何運行效率，僅供開發和測試使用。

運行WSGI服務

我們先編寫hello.py，實現Web應用程序的WSGI處理函數：

# hello.py

def application(environ, start_response):
 start_response('200 OK', [('Content-Type', 'text/html')])
 return [b'
Hello, web!
']

然後，再編寫一個server.py，負責啟動WSGI服務器，加載application()函數：

# server.py
# 從wsgiref模塊導入:
from wsgiref.simple_server import make_server
# 導入我們自己編寫的application函數:
from hello import application

# 創建一個服務器，IP地址為空，端口是8000，處理函數是application:
httpd = make_server('', 8000, application)
print('Serving HTTP on port 8000...')
# 開始監聽HTTP請求:
httpd.serve_forever()

確保以上兩個文件在同一個目錄下，然後在命令行輸入python server.py來啟動WSGI服務器：

注意：如果8000端口已被其他程序佔用，啟動將失敗，請修改成其他端口。

啟動成功後，打開瀏覽器，輸入http://localhost:8000/，就可以看到結果了：

在命令行可以看到wsgiref打印的log信息：

按Ctrl+C終止服務器。

如果你覺得這個Web應用太簡單了，可以稍微改造一下，從environ裡讀取PATH_INFO，這樣可以顯示更加動態的內容：

# hello.py

def application(environ, start_response):
 start_response('200 OK', [('Content-Type', 'text/html')])
 body = '
Hello, %s!
' % (environ['PATH_INFO'][1:] or 'web') 

 return [body.encode('utf-8')]

你可以在地址欄輸入用戶名作為URL的一部分，將返回Hello, xxx!：

是不是有點Web App的感覺了？

小結

無論多麼複雜的Web應用程序，入口都是一個WSGI處理函數。HTTP請求的所有輸入信息都可以通過environ獲得，HTTP響應的輸出都可以通過start_response()加上函數返回值作為Body。

複雜的Web應用程序，光靠一個WSGI函數來處理還是太底層了，我們需要在WSGI之上再抽象出Web框架，進一步簡化Web開發。

模板

Web框架把我們從WSGI中拯救出來了。現在，我們只需要不斷地編寫函數，帶上URL，就可以繼續Web App的開發了。

但是，Web App不僅僅是處理邏輯，展示給用戶的頁面也非常重要。在函數中返回一個包含HTML的字符串，簡單的頁面還可以，但是，想想新浪首頁的6000多行的HTML，你確信能在Python的字符串中正確地寫出來麼？反正我是做不到。

俗話說得好，不懂前端的Python工程師不是好的產品經理。有Web開發經驗的同學都明白，Web App最複雜的部分就在HTML頁面。HTML不僅要正確，還要通過CSS美化，再加上覆雜的JavaScript腳本來實現各種交互和動畫效果。總之，生成HTML頁面的難度很大。

由於在Python代碼裡拼字符串是不現實的，所以，模板技術出現了。

使用模板，我們需要預先準備一個HTML文檔，這個HTML文檔不是普通的HTML，而是嵌入了一些變量和指令，然後，根據我們傳入的數據，替換後，得到最終的HTML，發送給用戶：

這就是傳說中的MVC：Model-View-Controller，中文名“模型-視圖-控制器”。

Python處理URL的函數就是C：Controller，Controller負責業務邏輯，比如檢查用戶名是否存在，取出用戶信息等等；

包含變量{{ name }}的模板就是V：View，View負責顯示邏輯，通過簡單地替換一些變量，View最終輸出的就是用戶看到的HTML。

MVC中的Model在哪？Model是用來傳給View的，這樣View在替換變量的時候，就可以從Model中取出相應的數據。

上面的例子中，Model就是一個dict：

{ 'name': 'Michael' }

只是因為Python支持關鍵字參數，很多Web框架允許傳入關鍵字參數，然後，在框架內部組裝出一個dict作為Model。

現在，我們把上次直接輸出字符串作為HTML的例子用高端大氣上檔次的MVC模式改寫一下：

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def home():
 return render_template('home.html')

@app.route('/signin', methods=['GET'])
def signin_form():
 return render_template('form.html')

@app.route('/signin', methods=['POST'])
def signin():
 username = request.form['username']
 password = request.form['password']
 if username=='admin' and password=='password':
 return render_template('signin-ok.html', username=username)
 return render_template('form.html', message='Bad username or password', username=username)

if __name__ == '__main__':
 app.run()

Flask通過render_template()函數來實現模板的渲染。和Web框架類似，Python的模板也有很多種。Flask默認支持的模板是jinja2，所以我們先直接安裝jinja2：

$ pip install jinja2 

然後，開始編寫jinja2模板：

home.html

用來顯示首頁的模板：

 <title>Home/<title>


 
Home

form.html

用來顯示登錄表單的模板：

 <title>Please Sign In/<title>


 {% if message %}
 
{{ message }}

 {% endif %}
 

signin-ok.html

登錄成功的模板：

 <title>Welcome, {{ username }}/<title>


 
Welcome, {{ username }}!

登錄失敗的模板呢？我們在form.html中加了一點條件判斷，把form.html重用為登錄失敗的模板。

最後，一定要把模板放到正確的templates目錄下，templates和app.py在同級目錄下：

啟動python app.py，看看使用模板的頁面效果：

通過MVC，我們在Python代碼中處理M：Model和C：Controller，而V：View是通過模板處理的，這樣，我們就成功地把Python代碼和HTML代碼最大限度地分離了。

使用模板的另一大好處是，模板改起來很方便，而且，改完保存後，刷新瀏覽器就能看到最新的效果，這對於調試HTML、CSS和JavaScript的前端工程師來說實在是太重要了。

在Jinja2模板中，我們用{{ name }}表示一個需要替換的變量。很多時候，還需要循環、條件判斷等指令語句，在Jinja2中，用{% ... %}表示指令。

比如循環輸出頁碼：

{% for i in page_list %}
 
{% endfor %}

如果page_list是一個list：[1, 2, 3, 4, 5]，上面的模板將輸出5個超鏈接。

除了Jinja2，常見的模板還有：

• Mako：用和${xxx}的一個模板；
• Cheetah：也是用和${xxx}的一個模板；
• Django：Django是一站式框架，內置一個用{% ... %}和{{ xxx }}的模板。

小結

有了MVC，我們就分離了Python代碼和HTML代碼。HTML代碼全部放到模板裡，寫起來更有效率。

閱讀更多 猿滾滾 的文章

關鍵字: 網頁 JavaScrip Chrome