HTTP 與 HTML

Tony's Pensieve
Nov 6 · 6 min read

HTTP 跟 HTML 明顯的是不一樣的東西,但因為網路逐步發展,所以兩者的分界其實很容易被混淆,怎麼說?

網路

兩(多)台可以上網的設備(不限於電腦)連在一起就是網路(network),當然也可以反過來說網路就是多台以上的設備連在一起-網、路;網際網路(internet)就是多個大大小小不同的網路連在一起。網路的目的本質就是取得別台電腦(server)的資源(檔案、資訊等),而在早期能做到的就是網頁-很單純的文件,HTTP 的確是為了傳送 HTML 制定的(最早的HTTP/0.9只支援了GET),但它現已不僅於此,是網路傳輸(伺服器與用戶端)的協定。

瀏覽器

不能不提到為了顯示 HTML 而生的應用程式-瀏覽器,今天你用一個文字編輯器打開 HTM L檔,看的到會是

HTML在文字編輯器

而用瀏覽器打開則會是

HTML在瀏覽器上

這過程中完全無關乎網路,就算你開的是本機檔案也一樣;瀏覽器才知道要把<h1></h1> 中的文字放大顯示,而文字編輯器不知道,因為瀏覽器包含了 HTML parser 的能力。也就是說當你在瀏覽器輸入網址後,瀏覽器會查詢網址對應的伺服器實際位址,並對該位置發起 HTPP 請求,在收到 HTML 回應後,將其解析在畫面上。

HTTP Messages

網路傳輸中過了很多環節,每個環節對上一層來說,都可以當作黑盒子來處理,就像你寫程式的時候不會去 trace 每一行程式碼被轉換後的電流長什麼樣,但你應該要清楚盒子到哪、長什麼樣。HTTP Requset 應該要發到哪裡的服務,這不屬於 HTTP 規定的範圍(屬於網路下層的溝通)。 HTPP 規定的是 messages ,範例如下。

在 HTTP1.X 中, HTTP messages 是文本(ASCII)的形式, start line 定義了方法(methods),接著是多個可選的 headers,最後是可選的 body(GET Request可無 body;如果 Response 回應 HTML 就會在這邊)。

記住,這是個協定,也就是說如果你寫了一個程式宣稱你可以發送 HTTP 請求,但你的程式不會對 Response 裡的內容作任何處理,沒有人會同意你的程式支援 HTTP 協定。

類似的, HTTP 標準協定裏面定義了許多 header,如果你有需要你也可以自訂,但只有知道你自訂了什麼 header 的程式,才會去針對你自訂的 header 的做處理。

HTTP methods

GET 方法請求展示指定資源。使用 GET 的請求只應用於取得資料。
POST 方法用於提交指定資源的實體,通常會改變伺服器的狀態或副作用(side effect)。

發現了嗎? HTTP 建議你要取的資料時候,宣稱(method)這個請求是一個GET;要修改資料的時候,宣稱這個請求是一個POST。沒有定義其他的

回過頭來,HTML的form定義了什麼?

<form action=”/action_page.php” method=”get”>
</form>

form可以有 action、method、 enctype 等屬性,而在 submit 後,瀏覽器會對 action 的 url 發起一個 HTTP Request,並把 form 裡面的其他 input 資料涵蓋。(這是因為瀏覽器實作了 HTML 解析,做出了符合 HTML 定義下的 form行為)

HTML 的 form 表單定義了 GET 的資料會被放在 URL 上,POST 則否。但這是 HTML 的不是 HTTP 的。method 和 data(URL, Body, Header)是正交的兩個概念,使用哪個 method 與應用層的數據如何傳輸是沒有相互關係的。如果你的 client 是瀏覽器,它在發起 Request 的時候,瀏覽器不會切掉在 url 的 QueryString,但 GET 放在 body 裡的資料則會被有些瀏覽器忽略(沒有送出)。

對於放在 body 裡的資料這件事來說,伺服器還會從 heade r裡的 Content-Type 來區分處理方式。注意,發起 Request 並不一定是瀏覽器,以下為了方便,部分會以 postman 來顯示。

Content-Type

一個 application/x-www-form-urlencoded 的請求會把參數以 key=value 的方式串起。 JQuery的ajax、HTML的form預設都是這種。

chrome開發者工具

瀏覽器會顯示為form data

實際Messages

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

(空行是 header 跟 body 的分隔)

application/x-www-form-urlencoded 方式在發送前編碼所有參數。multipart/form-data 則不會,但若需上傳文件時必須使用這方法。

據說這種方式 php 要取值的時候會相對麻煩些。

chrome開發者工具:

雖然瀏覽器寫 requset payload 但跟顯示為 form data 一樣,其實都是 HTTP body 的內容。(不是 HTML 的 body)

實際Messages:

postman 的 raw 其實就是讓你直接把原生地 HTTP Messages body 填入。

參考

https://kknews.cc/code/mnpkvlz.html

TonyLife

Story、Game and Friendship is magic.

Tony's Pensieve

Written by

一位開發者、學習者、分享者。 喜歡與人交流互動也喜歡學習,在成為一個更好的人的路上。 我願意學,也願意教

TonyLife

TonyLife

Story、Game and Friendship is magic.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade