#JS續:8.1 HTTP學習

#JS續:8.1 HTTP學習

來自專欄 Miyas 技術學習小記4 人贊了文章

一、HTTP

http,全稱HyperText Transfer Protocol,超文本傳輸協議(協議,定義了一種規則)

是一個應用層的協議

用於分發協作

是萬維網的數據交流的基礎

二、URL/URI

1、定義

  • URI:Uniform Resource Identifier 統一資源標識符
  • URL:Uniform Resource Location 統一資源定位符

URL是使用瀏覽器等訪問web頁面的時候需要輸入的網頁地址

http://www.baidu.com

URI是更通用的資源標識符,URL是它的一個子集。URI由兩個主要的子集構成

  • URL:通過描述資源的位置來描述資源
  • URN:通過名字來識別資源,和位置無關

2、我們常見的URL主要由三部分組成

  • 方案,也就是我們常說的協議
  • 伺服器位置
  • 資源路徑

看個例子

http://samaritan89.github.io/f2e/js/ajax.html

通用的URL由9部分組成

<scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<query>#<hash>

9部分具體解釋:

  • <scheme>:對於web頁面來說最常用的協議就是http和https
  • <user>:<password>:user和password現在不常見了,不會在URL明文書寫用戶名和密碼了,都是通過登錄的方式
  • <host>:主機可以是IPO地址過著域名
  • <port>:埠號用來區分主機上的進程,方便找到web伺服器,http默認是80
  • <path>:path是資源的路徑,也就是存放位置,不一定和物理路徑完全對應,符合web伺服器路由約定即可
  • <params>:params,在一些協議中需要參數來訪問資源,例如ftp是二進位還是文本傳輸,參數是名值對,用;隔開
  • <query>:query:這個是get請求最常用的傳遞參數方式了 ?a=1&b=2&=3
  • <hash>:hash也成為片段,設計為標識文檔的一部分,很多MVVM框架用作了路由功能

三、HTTP報文

1、定義:

規定瀏覽器和伺服器之間傳輸的數據有固定的格式,即報文

英文資料參考:

Hypertext Transfer Protocol?

en.wikipedia.org圖標

2、報文的組成

HTTP報文是簡單的格式化數據塊,每個報文都包含一條來自客戶端的請求或者一條來自伺服器的響應,由3個部分組成

  • 對報文進行描述的起始行 —— start line
  • 包含屬性的首部塊 —— header
  • 可選的包含數據的主體部分 —— body

HTTP/1.0 200 OKcontent-type: text/plaincontent-length: 19Hi, Im a message

3、報文類型

  • 請求報文
  • 響應報文

(1)請求報文:

在瀏覽器上輸入url,瀏覽器將發送一條請求,之後做dns的查詢,找到對應伺服器。那麼,請求在網路傳輸中是一種什麼樣的格式?即為請求報文

//向web伺服器請求一個動作<method><request-URL><version> /* 包含http版本號和請求的url,以及對應的狀態碼 */<headers><entity-body>

(2)響應報文

把請求結果返回給客戶端

<version><status><reason-phrase><headers><entity-body>

首部和方法配合,共同決定了伺服器和客戶端能做什麼

4、報文首部速記

通用首部

請求首部

響應首部

四、狀態碼

戳文狀態碼了解一下:,

miya Wang:#hello,JS:13-01:Ajax 使用(含狀態碼)?

zhuanlan.zhihu.com圖標

301,客戶請求的文檔在其他地方,新的URL在Location頭中給出,瀏覽器應該自動地訪問新的URL。配置server時,在配置文件中添加301和url。用戶訪問這個url時,看到301這個重定向,請求到達伺服器,伺服器將301狀態碼寫入,瀏覽器收到該響應,寫入記憶內部,下次訪問的時候,瀏覽器看到301這個狀態碼時,就會進行url的重定向。

304,關於緩存機制。

400,請求有問題。

403,訪問有許可權。


推薦閱讀:

使用ESLint+Prettier來統一前端代碼風格
React v16.3 版本新生命周期函數淺析及升級方案
這兒有一個使你網頁性能提升10倍的工具
不寫博客就請吃飯系列(1)——vue2.0開發入門踩坑
Webpack 4 配置最佳實踐

TAG:HTTP | URL | 前端開發 |