感覺在當翻譯志工,完賽後也可以真的去當 MDN 翻譯志工
後續將使用 req 表示 request , res 表示 response
閱讀需求: 基礎了解 web server 是什麼
目標: 了解 client-server 動態互動 & server-side 需要的操作
Browsers 與 servers 溝通的橋樑即是 HTTP
進行表單行為、點擊連結或取得檔案的時候,browser 就會開始用 HTTP Req 去跟 server 溝通
Req 的行為:
PUT? POST? 延伸閱讀: [不是工程師] 休息(REST)式架構? 寧靜式(RESTful)的Web API是現在的潮流? -progressbar.tw Vincent Ke
將其他資訊隨著 req 送出:
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 ;
而我們在搜尋欄位輸入一些字時,會再輸入框下方自動跳出備選選項,
這些選項可能每個 user 都不同,取決於不同的 browser 設定會有不同的 HTTP message(定義在 web standard REC7230)。現在還不用懂這個 message 的細節,知道來自於哪裡即可
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 一樣放些重要的相關資訊
前兩行有前面提過的行為:
其餘也記載 browser, client-side 相關資訊。
req body 在這個例子是空的
下面 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 提供的其中幾個資訊:
res body 在這裡是 HMTL 文件
其餘資訊有提到 server 預期 browser 處理頁面的方式(X-Frame-Options: DENY 告訴 browser 禁止本頁面以 <iframe>
內嵌在其他網站)
下一篇我們繼續談談 POST 的 req res
我要好好學習後端!!(有罩門....
我記得你會php呀~
我已翻譯翻到懷疑人生, 不過好險有收穫XD
我會的只是皮毛中的皮毛....而且後端架構根本不懂