文章目錄

• 動因
• HTTPWATCH
• 用IE訪問伺服器端的一張png圖片
• 觀察資料
• 結論

本文說明了http協議傳輸圖片的互動資料的過程和測試方法。

動因

學習程式設計，其實不在於程式設計本身。千萬不要滿足於會呼叫現成的函式。很多人都知道，通過瀏覽器訪問一張圖片連結，伺服器就會返回圖片，於是瀏覽器就月顯示出來。真那麼簡單麼，細節是什麼？為了從零開始實現伺服器與瀏覽器的互動，我們必須去了解http協議，然後才是程式設計實現。

瞭解http協議的方法是：

（1）閱讀協議本身。

（2）通過實驗觀察別人已經實現的協議的工作過程。

一般，讀協議本身是必要的，但只靠”讀“並不能真正瞭解協議本身。有一句話說得好：衡量你是否真正理解一個原理，在於你是否使用程式實現了這個原理，你要懂，就要讓計算機先懂。通過實驗能看到通訊協議工作的活生生的過程，是理解通訊協議最好的辦法。記住，你永遠不可能在岸上學會游泳！

http協議是一種基於文字的應用層傳輸協議，我們可以通過一些協議分析工具來觀察資訊的傳輸過程。

HTTPWATCH

我在這裡選用了一款強大的網頁資料分析工具HttpWatch 。安裝了HttpWatch後， 將整合在Internet Explorer中，能夠收集並顯示瀏覽器與伺服器互動過程的底層資訊。能夠在顯示網頁同時顯示網頁請求和迴應的日誌資訊。甚至可以顯示瀏覽器快取和IE之間的交換資訊。整合在Internet Explorer工具欄。

圖為安裝後，開啟IE瀏覽器的應用介面。

我們就用HttpWatch來分析瀏覽器和web伺服器之間的互動訊息吧。

用IE訪問伺服器端的一張png圖片

講用http協議訪問文字的例子網上很多，如我在”VC++6.0下用60行程式寫成一個最簡單的WEB伺服器“一文中已描述的。 為了實現自己編寫的伺服器程式能返回圖片資料，就必須瞭解成熟的web伺服器（如IIS，Apache，Tomecat等）是如何處理圖片資料請求並作出響應的。

可以用任意網站上的圖片連結作為測試實驗物件。例如，我以

http://www.wtclab.net/newwtc/assets/images/teachers/shaoyubin.jpg
 

作為訪問物件。

安裝好HTTPWATCH後，開啟IE瀏覽器（Win10下，IE11），滑鼠右鍵可調出HTTPWATCH應用介面。如上圖示。

（1）如果上一次用過，可能有快取，可用HTTPWATCH的Tools選單清除之，以保證與我的實驗結果相同。

（2）連線上網際網路，調出HTTPWATCH應用介面並清除快取後，點選選單項上的Record 進行資料記錄。

（3）在瀏覽器位址列輸入連結地址並回車。

將發現瀏覽器中顯示出照片，同時HTTPWATCH應用介面中會給出互動資料來。如下：

（4）完成資料記錄後，點選stop 停止記錄。採用Export工具可將資料匯出為文字格式。例如，將瀏覽器請求資料匯出為shaoyubin.jpg.request.txt，而將伺服器響應資料匯出為shaoyubin.jpg.response.txt.

觀察資料

瀏覽器請求資料 shaoyubin.jpg.request.txt的內容是：

GET /newwtc/assets/images/teachers/shaoyubin.jpg HTTP/1.1
Accept: text/html, application/xhtml+xml, image/jxr, */*
X-HttpWatch-RID: 70513-10228
Accept-Language: zh-Hans-CN,zh-Hans;q=0.8,en-US;q=0.5,en;q=0.3
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko
Accept-Encoding: gzip, deflate
Host: www.wtclab.net
Connection: Keep-Alive

其中，第一行說明了要請求的資源位置和使用HTTP的版本。其他行含義參見HTTP協議描述，這裡不過多解釋。總之是告訴伺服器：我是誰（User-Agent），我能接收哪些格式的訊息（Accept，Accept-Language，Accept-Encoding），要請求伺服器做什麼（GET），完成後是否保持連線（Connection）等等。

伺服器收到如上訊息後，返回響應為shaoyubin.jpg.response.txt。可用notepad++ 編輯器開啟。如下圖示：

以16進位制顯示為：

可見返回訊息中，既有文字形式的http報文頭，又有純二進位制圖片資料。http報文頭以兩個空行（0d 0a 0d 0a）為結束標誌，之後的報文資料（對於圖片，就是圖片檔案的二進位制流）。

HTTP報文頭為：

HTTP/1.1 200 OK
Content-Type: image/jpeg
Last-Modified: Fri, 23 Jun 2017 02:47:38 GMT
Accept-Ranges: bytes
ETag: "7a849613cbebd21:0"
Server: Microsoft-IIS/7.0
X-Powered-By: ASP.NET
Date: Wed, 31 Oct 2018 13:54:28 GMT
Content-Length: 36993

第一行表示伺服器能正確響應。
第二行說明了返回訊息的型別為image/jpeg，以便瀏覽器能呼叫相應要方法解析並顯示出來。最末行（9行）說明了圖片檔案的大小位元組數。其他行分別說明了伺服器的身份（IIS 7），資源最後修改日期，當前時間等等，詳細解釋搜尋百度相應詞字即可。

在notepad++中，小心地將前10行刪掉，即只剩下純資料部分，將之另存為如sybrecvdat.jpg，這時將得到一個完整的jpg檔案，檢視大小，正好是Content-Length: 36993 位元組。

這就驗證了回傳資料的確是完整的二進位制流。

結論

所以， 要自己實現能回傳圖片的伺服器，只需依照如上協議回傳正確的http頭後，接著傳輸相應檔案的二進位制流即可。

本文說明了http協議傳輸圖片的互動資料的過程和測試方法。