前端系統(tǒng)班 - 06. HTTP 入門

課程 01：

WWW 的歷史

  • 1989 年，萬維網(wǎng)（World Wide Web）誕生。
  • 1990 年，蒂姆·伯納斯-李（Tim Berners-Lee）發(fā)明了用網(wǎng)址訪問網(wǎng)頁的辦法，他發(fā)明了第一個(gè)網(wǎng)頁、第一個(gè)瀏覽器和第一個(gè)服務(wù)器。
  • 想了解更多可以去維基百科……

WWW 的發(fā)明

主要包含 3 個(gè)概念：

  1. URI（Uniform Resource Identifier，統(tǒng)一資源標(biāo)識(shí)符）；
  2. HTTP（HyperText Transfer Protocol，超級(jí)文本傳輸協(xié)議）；
  3. HTML（HyperText Markup Language，超文本標(biāo)記語言）。

URI 是什么

URI 分為：

  • URL（Uniform Resource Locator，統(tǒng)一資源定位符），我們一般使用 URL 作為網(wǎng)址；
  • URN（Uniform Resource Name，統(tǒng)一資源名稱），例如書籍的 ISBN 號(hào)碼。

通過 URL 可以確定一個(gè)“唯一的”地址（網(wǎng)址），例如：
https://www.baidu.com/s?wd=hello&rsv_spt=1#5
這就是一個(gè) URL 地址，其中：https:// 表示協(xié)議；www.baidu.com 表示域名；/s 表示路徑；wd=hello&rsv_spt=1 是查詢參數(shù)；最后 #5 是錨點(diǎn)。

DNS 是什么

DNS（Domain Name System，域名系統(tǒng)），它的作用簡(jiǎn)單來講就是：輸入域名，輸出 IP（Internet Protocol，互聯(lián)網(wǎng)協(xié)議）。

在命令行中，使用 nslookup 命令可以查看域名對(duì)應(yīng)的 IP 地址；使用 ping 命令可以知道域名對(duì)應(yīng)的 IP 地址以及與該域名服務(wù)器的連接情況。

請(qǐng)求與響應(yīng)

  • 瀏覽器負(fù)責(zé)發(fā)起請(qǐng)求；
  • 服務(wù)器在 80 端口接收請(qǐng)求；
  • 服務(wù)器負(fù)責(zé)返回內(nèi)容（響應(yīng)）；
  • 瀏覽器負(fù)責(zé)下載響應(yīng)內(nèi)容。

在這過程中，HTTP 指導(dǎo)瀏覽器和服務(wù)器如何進(jìn)行溝通。

請(qǐng)求示例

在命令行中，使用 curl 命令可以訪問一個(gè)域名。例如：
curl -s -v -H "xxx" -- "https://www.baidu.com"
響應(yīng)數(shù)據(jù)如下：

<!DOCTYPE html>
<!--STATUS OK--><html> <head><meta http-equiv=content-type content=text/html;charset=utf-8><meta http-equiv=X-UA-Compatible content=IE=Edge><meta content=always name=referrer><link rel=stylesheet type=text/css href=http://s1.bdstatic.com/r/www/cache/bdorz/baidu.min.css><title>百度一下，你就知道</title></head> <body link=#0000cc> <div id=wrapper> <div id=head> <div class=head_wrapper> <div class=s_form> <div class=s_form_wrapper> <div id=lg> <img hidefocus=true src=//www.baidu.com/img/bd_logo1.png width=270 height=129> </div> <form id=form name=f action=//www.baidu.com/s class=fm> <input type=hidden name=bdorz_come value=1> <input type=hidden name=ie value=utf-8> <input type=hidden name=f value=8> <input type=hidden name=rsv_bp value=1> <input type=hidden name=rsv_idx value=1> <input type=hidden name=tn value=baidu><span class="bg s_ipt_wr"><input id=kw name=wd class=s_ipt value maxlength=255 autocomplete=off autofocus></span><span class="bg s_btn_wr"><input type=submit id=su value=百度一下 class="bg s_btn"></span> </form> </div> </div> <div id=u1> <a href=http://news.baidu.com name=tj_trnews class=mnav>新聞</a> <a href=http://www.hao123.com name=tj_trhao123 class=mnav>hao123</a> <a href=http://map.baidu.com name=tj_trmap class=mnav>地圖</a> <a href=http://v.baidu.com name=tj_trvideo class=mnav>視頻</a> <a href=http://tieba.baidu.com name=tj_trtieba class=mnav>貼吧</a> <noscript> <a href=http://www.baidu.com/bdorz/login.gif?login&amp;tpl=mn&amp;u=http%3A%2F%2Fwww.baidu.com%2f%3fbdorz_come%3d1 name=tj_login class=lb>登錄</a> </noscript> <script>document.write('<a + encodeURIComponent(window.location.href+ (window.location.search === "" ? "?" : "&")+ "bdorz_come=1")+ '" name="tj_login" class="lb">登錄</a>');</script> <a href=//www.baidu.com/more/ name=tj_briicon class=bri style="display: block;">更多產(chǎn)品</a> </div> </div> </div> <div id=ftCon> <div id=ftConw> <p id=lh> <a href=http://home.baidu.com>關(guān)于百度</a> <a href=http://ir.baidu.com>About Baidu</a> </p> <p id=cp>&copy;2017&nbsp;Baidu&nbsp;<a href=http://www.baidu.com/duty/>使用百度前必讀</a>&nbsp; <a href=http://jianyi.baidu.com/ class=cp-feedback>意見反饋</a>&nbsp;京ICP證030173號(hào)&nbsp; <img src=//www.baidu.com/img/gs.gif> </p> </div> </div> </div> </body> </html>
* STATE: INIT => CONNECT handle 0x48ef160; line 1404 (connection #-5000)
* Rebuilt URL to: http://www.baidu.com/
* Added connection 0. The cache now contains 1 members
* STATE: CONNECT => WAITRESOLVE handle 0x48ef160; line 1440 (connection #0)
*   Trying 61.135.169.125...
* TCP_NODELAY set
* STATE: WAITRESOLVE => WAITCONNECT handle 0x48ef160; line 1521 (connection #0)
* Connected to www.baidu.com (61.135.169.125) port 80 (#0)
* STATE: WAITCONNECT => SENDPROTOCONNECT handle 0x48ef160; line 1573 (connection #0)
* Marked for [keep alive]: HTTP default
* STATE: SENDPROTOCONNECT => DO handle 0x48ef160; line 1591 (connection #0)
> GET / HTTP/1.1
> Host: www.baidu.com
> User-Agent: curl/7.59.0
> Accept: */*
>
* STATE: DO => DO_DONE handle 0x48ef160; line 1670 (connection #0)
* STATE: DO_DONE => WAITPERFORM handle 0x48ef160; line 1795 (connection #0)
* STATE: WAITPERFORM => PERFORM handle 0x48ef160; line 1811 (connection #0)
* HTTP 1.1 or later with persistent connection, pipelining supported
< HTTP/1.1 200 OK
* Server bfe/1.0.8.18 is not blacklisted
< Server: bfe/1.0.8.18
< Date: Mon, 07 May 2018 08:02:59 GMT
< Content-Type: text/html
< Content-Length: 2381
< Last-Modified: Mon, 23 Jan 2017 13:27:32 GMT
< Connection: Keep-Alive
< ETag: "588604c4-94d"
< Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
< Pragma: no-cache
< Set-Cookie: BDORZ=27315; max-age=86400; domain=.baidu.com; path=/
< Accept-Ranges: bytes
<
{ [2381 bytes data]
* STATE: PERFORM => DONE handle 0x48ef160; line 1980 (connection #0)
* multi_done
* Connection #0 to host www.baidu.com left intact
* Expire cleared

其中紅色大于號(hào)開頭的行，便是請(qǐng)求的內(nèi)容；而后面的小于號(hào)開頭的行則是返回內(nèi)容。

GET 與 POST

改用 POST 請(qǐng)求，curl -X POST -s -v -H "xxx" -- "https://www.baidu.com"，返回“頁面不存在”頁面……

兩者的區(qū)別可以從字面意思理解，GET 就是獲取數(shù)據(jù)，POST 就是提交數(shù)據(jù)。

請(qǐng)求的格式

1 動(dòng)詞 路徑 協(xié)議/版本
2 key1: value1 // 例如：Content-Type: application/x-www-form-urlencoded
  key2: value2 // 例如：Host: www.baidu.com 
  key3: value3 // 例如：User-Agent: curl/7.54.0
  ...
3
4 要上傳的數(shù)據(jù)
  1. 請(qǐng)求最多包含四部分，最少包含三部分（第四部分可以為空）。
  2. 第三部分永遠(yuǎn)都是一個(gè)回車 \n，主要是用來區(qū)分第二部分和第四部分內(nèi)容的。
  3. 動(dòng)詞有 GET（獲?。?、POST（新增或上傳）、PUT（整體更新）、PATCH（局部更新）、DELETE（刪除）、HEAD、OPTIONS等。
  4. 請(qǐng)求中的路徑包括“查詢參數(shù)”，但不包括“錨點(diǎn)”；因?yàn)椤板^點(diǎn)”不是由服務(wù)器識(shí)別，而是由瀏覽器識(shí)別的。
  5. 如果沒有寫路徑，那么路徑默認(rèn)為 /，代表根目錄。
  6. 第二部分中的 Content-Type 標(biāo)注了第四部分的格式。

響應(yīng)

  • GET 請(qǐng)求和 POST 請(qǐng)求對(duì)應(yīng)的響應(yīng)內(nèi)容可能一樣，也可能不一樣。
  • 響應(yīng)的第四部分可以很長。

響應(yīng)的格式

1 協(xié)議/版本 狀態(tài)碼 狀態(tài)解釋
2 key1: value1 // 例如：Content-Length: 17931
  key2: value2 // 例如：Content-Type: text/html
  ...
3
4 要下載的內(nèi)容
  • 狀態(tài)碼要背，是服務(wù)器對(duì)瀏覽器說的話：
    • 1xx，不常用；
    • 2xx，表示成功；
    • 3xx，表示滾吧；
    • 4xx，表示你丫錯(cuò)了；
    • 5xx，表示好吧，我錯(cuò)了。
  • 狀態(tài)解釋沒什么卵用。
  • 第二部分的 Content-Type 標(biāo)注了第四部分的格式，它遵循 MIME 規(guī)范。

如果要在 Chrome 里看請(qǐng)求或相應(yīng)的代碼時(shí)，記得點(diǎn)擊 view source 選項(xiàng)……這老師念了 N 遍……

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容