[筆記] HTTP 協定


Posted by tzutzu858 on 2020-07-09

HTTP 是個什麼玩意兒?

超文本傳輸協定(英語:HyperText Transfer Protocol,縮寫:HTTP)是一種用於分佈式、協作式和超媒體訊息系統的應用層協定 [1]。
HTTP 是全球資訊網的資料通信的基礎。 維基百科

白話 : 了解使用網際網路的應用層協定


令人討厭的 HTTP request 的一生

瀏覽器傳 HTTP request 到 server
Server 回傳一個 reponse
reponse 是回傳 html 一整段文字,再經過瀏覽器 render 顯現出來
charles 工具,可以看你的 requestreponse
白話例子 :

雜魚 -> 寫紙條 ->傳給千千
千千 -> 處理   ->傳紙條給雜魚

瀏覽器 -> 製造 request -> 傳給 server
server -> 處理 ->傳 response 回來

DNS( Domain Name System ) 我只是個計程車司機

作用 : 把 Domain Name 翻譯成 IP

可以下nslookup github.com 查 IP 位置


Domain 域名
註冊的網域名稱採先註冊先發給為原則,網域名稱一經申請,他人即無法再註冊,所以不會有域名重複的狀況。


檢查是否正版

request -> adobe server ->response
request -> ??? -> xxx(不會有 response 回來)

就算沒有瀏覽器一樣可以拿到 response

  • npm install request
    到 node.js 叫 request 的 library 去看
    2020.2.11 後不建議使用,不過還是能用就是了

    把使用方法貼在 index.js
    打開來看

把想抓的網址放上去
可以先把console.log('body:', body);註解掉(因為他會跑太多字出來)

執行 node index.js
印出來 statusCode : 200
確定請求成功,就可以只留console.log('body:', body);
執行 node index.js > github.html (把印出來的內容存成github.html)
打開 github.html 發現一模一樣就 OK


Header 與 Body(不是網頁的那個)

request 和 response 都有分成 Header 與 Body
Header 放一些額外資訊 , Body 放一些主要內容
可以印出Header console.log(reponse.header)
Header 大概長這樣,時間、type等等


GET 與 POST

HTTP Method,在 HTTP 1.1 的版本中定義了八種 Method :

  • OPTIONS
  • GET
  • HEAD
  • POST
  • PUT
  • DELETE
  • TRACE
  • CONNECT

淺談 HTTP Method:表單中的 GET 與 POST 有什麼差別?

(MDN)HTTP 請求方法


HTTP狀態碼

網路上梗圖


實作一個超簡易 HTTP Server

建立一個檔案

var http = require('http')

var server = http.createServer(handleRequest)
function handleRequest(req, res) {
  console.log(req.url)
  res.write('hello')
  res.end()
}  
server.listen(5000) // port

打開瀏覽器 輸入 localhost:5000

回去看一下印出什麼

第一個/是因為我們把req.url要印出來
第二個favicon.ico 是分頁左邊小icon
為了拿到這個 icon ,瀏覽器都會發一個 request 去要這個 icon(瀏覽器預設會發的 request )

也可以做一些其他事

var http = require('http')

var server = http.createServer(handleRequest)
function handleRequest(req, res) {
  console.log(req.url)
  if (req.url === '/'){
    res.write('welcome')
    res.end()
    return
  }

  if (req.url === '/hello'){
    res.write('hello')
    res.end()
    return
  }

  if (req.url === '/redirect'){
    res.writeHead(302, {
      'location': 'https://google.com'
    })
    res.end()
    return
  }
  res.writeHead(404)
  res.end()

}  
server.listen(5000) // port

url 隨便亂打
就可以出現找不到 localhost 網頁

url 打 redirect
就可以臨時重新導向一個新網址










Related Posts

DEC 14 2023 PROCL-5: User does not have permission to perform a local registry operation on this key. Authentication error [User [root] [已解決]

DEC 14 2023 PROCL-5: User does not have permission to perform a local registry operation on this key. Authentication error [User [root] [已解決]

讓 Code 乾淨的小技巧

讓 Code 乾淨的小技巧

CSS保健室|border-image-slice

CSS保健室|border-image-slice


Comments