iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
2

來源

筆者的前言

感覺在當翻譯志工,完賽後也可以真的去當 MDN 翻譯志工
後續將使用 req 表示 request , res 表示 response

Client-Server 概覽

閱讀需求: 基礎了解 web server 是什麼
目標: 了解 client-server 動態互動 & server-side 需要的操作

Web servers & HTTP( HyperTextTransferProtocol ) 入門

Browsers 與 servers 溝通的橋樑即是 HTTP
進行表單行為、點擊連結或取得檔案的時候,browser 就會開始用 HTTP Req 去跟 server 溝通

Req 的行為:

  • GET 取得指定的資料
  • POST 建立新的資料
  • HEAD 取得 metadata , 這個資料會描述文件編碼(例如中、日、英文 ...或 unicode編碼)、作者和描述(轉貼到社群網站、通訊工具時顯示的文字,就是給搜尋引擎看的) 及其它的資料
  • PUT 如果資料已建立,就進行更新;如果未建立,進行建立
  • DELETE
  • TRACE, OPTION, CONNECT, PATCH 本篇不做介紹,因為用在較進階或少見的情況

PUT? POST? 延伸閱讀: [不是工程師] 休息(REST)式架構? 寧靜式(RESTful)的Web API是現在的潮流? -progressbar.tw Vincent Ke

將其他資訊隨著 req 送出:

  • URL parameters 注意看,搜尋後頁面的網址列後方常會有 ? = + & 的符號,這些就是剛剛送出的 request , 再由 GET 取得
  • POST 用 req body 把資料帶入
  • Client-side cookies 裡面有關於 user 的 session , 像是登入的鑰匙(密碼、或是否已記憶自動登入)

Servers 隨時待命接收 client req ,
接到後會立刻處理跟回覆 HTTP Res 給 browser , 裡面會有前幾篇提過的 HTTP status code (200, 404 ...)
給 GET 的 res body 會包含先前 req 的資料

當 browser 要 render(投放、渲染到畫面上) 回傳的 HTML , browser 會分開下載 CSS, JS 或其他檔案

無論是靜態還是動態網站,進行這些 req res 溝通都是用一樣的 protocol

GET req/res 範例

我們可以透過點擊連結或搜尋,來做一個簡單的 GET req ;
而我們在搜尋欄位輸入一些字時,會再輸入框下方自動跳出備選選項,
這些選項可能每個 user 都不同,取決於不同的 browser 設定會有不同的 HTTP message(定義在 web standard REC7230)。現在還不用懂這個 message 的細節,知道來自於哪裡即可

req

GET https://developer.mozilla.org/en-US/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1
Host: developer.mozilla.org
...(省略)
Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true

這個部分稱作 header , 跟 HTML head 一樣放些重要的相關資訊
前兩行有前面提過的行為:

  • req 類型 (GET)
  • 目標 URL (/en-US/search)
  • URL 參數 (q=client+ ...)
  • host website (developer.mozilla.org)
  • protocal 版本號, 寫在第一行最後面 (HTTP/1.1)
  • client-siide cookies , 寫在最後一行 (sessionid=...)

其餘也記載 browser, client-side 相關資訊。
req body 在這個例子是空的

res

下面 res 回應上面的 req

HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer1.webapp.scl3.mozilla.com
Vary: Accept,Cookie, Accept-Encoding
Content-Type: text/html; charset=utf-8
Date: Wed, 07 Sep 2016 00:11:31 GMT
Keep-Alive: timeout=5, max=999
Connection: Keep-Alive
X-Frame-Options: DENY
Allow: GET
X-Cache-Info: caching
Content-Length: 41823

<!DOCTYPE html>
...(省略)

res head 提供的其中幾個資訊:

  • 第一行表明 req 有成功接收
  • res 的格式是 text/html (Content-Type)
  • 是 UTF-8 字元 (Content-Type)
  • 檔案大小 (Content-Length)

res body 在這裡是 HMTL 文件

其餘資訊有提到 server 預期 browser 處理頁面的方式(X-Frame-Options: DENY 告訴 browser 禁止本頁面以 <iframe> 內嵌在其他網站)

下一篇我們繼續談談 POST 的 req res


上一篇
四日:Server-side 能做哪些事
下一篇
六日: Client-Server 概覽( POST req/res 範例 , 解析動態 req )
系列文
還在想要買哪一堂線上課程嗎?培養看文件的習慣吧!用 MDN 文件學後端:NodeJS & MongooseDB30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
King Tzeng
iT邦新手 3 級 ‧ 2019-09-20 00:25:17

我要好好學習後端!!(有罩門..../images/emoticon/emoticon02.gif

PeterLiao iT邦新手 4 級 ‧ 2019-09-20 00:48:16 檢舉

我記得你會php呀~
我已翻譯翻到懷疑人生/images/emoticon/emoticon20.gif, 不過好險有收穫XD

我會的只是皮毛中的皮毛....而且後端架構根本不懂/images/emoticon/emoticon02.gif

我要留言

立即登入留言