網站認知與交互

前提認識:

HTTP協議

• HTTP（HyperText Transfer Protocol，超文本傳輸協議）最先就是計算機與計算機之間溝通的一種標準協議，這種協議規範了通信內容的格式以及各項內容的含義。說白了，在web領域，HTTP協議就規範了客戶端如何向服務器發送請求，以及服務器如何響應數據到客戶端。
• 隨着時代的發展，技術的變遷，這種協議如今普遍的應用在各類領域，也不只僅侷限於計算機與計算機之間，手機、電視等各類智能設備不少時候都在使用這種協議通信，因此通常如今稱 HTTP 爲端與端之間的通信協議。
• Web 屬於 B/S 架構的應用軟件，在 B/S 架構中，瀏覽器與服務器溝通的協議就是 HTTP 協議，做爲一個合格的 Web 開發者，瞭解 HTTP 協議中約定的內容是一門必修課。

約定形式

1. 客戶端經過隨機端口與服務端某個固定端口（通常爲80）創建鏈接 三次握手
   • 客戶端向服務器發送一個鏈接請求
   • 服務器向客戶端返回一個確認信息
   • 客戶端將鏈接請求及這個確認信息發送服務器
2. 客戶端經過這個「發送請求」鏈接到服務端（這裏的請求是名詞）
3. 服務端監聽端口獲得的客戶端發送過來的請求
4. 服務端經過鏈接響應給客戶端狀態和內容

約定內容

• 請求 / 響應報文格式
• 請求方式 —— GET / POST / PUT / DELETE / OPTION...
• 響應狀態 —— 200 / 404 / 302 / 304 ...
• 預設的請求 / 響應頭

1.請求報文

• 請求行
  GET http://127.0.0.1:3000/getData HTTP/1.1
  請求方式 + 空格 + 請求路徑 + 空格 + HTTP 協議版本

• 請求頭
  客戶端想要告訴服務端的一些額外信息，如下爲常見的請求頭(不用刻意去記憶)：
  

• 請求體
  此次請求客戶端想要發送給服務端的數據正文，通常在 GET 請求時不多用到，由於 GET 請求主觀上都是去「拿東西」。

2.響應報文

• 狀態行
  HTTP/1.1 200 OK
  HTTP 協議版本 + 空格 + 狀態碼 + 空格 + 狀態描述

• 響應頭
  服務端想要告訴客戶端的一些額外信息，常見的有如下：
  

• 響應體
  此次請求服務端想要返回給客戶端的數據正文，通常返回的都是 HTML，也能夠返回數據， JavaScript 或者 CSS（須要修改響應頭中的響應類型）。

• 補充：狀態碼
  狀態代碼由三位數字組成，第一個數字定義了響應的類別，且有五種可能取值。
  - 1xx：指示信息 —— 表示請求已接收，繼續處理。
  - 2xx：成功 —— 表示請求已被成功接收、理解、接受。
  - 3xx：重定向 —— 要完成請求必須進行更進一步的操做。
  - 4xx：客戶端錯誤 —— 請求有語法錯誤或請求沒法實現。
  - 5xx：服務器端錯誤 —— 服務器未能實現合法的請求。

網絡基礎概念

• IP 地址
  設備在某一個網絡中的地址，目前最多見的格式：[0-255].[0-255].[0-255].[0-255] 即爲四個 0-255 的數字組成。本質是四組八位的二進制數。
  做用就是標識一個網絡設備（計算機、手機、電視）在某一個具體的網絡當中的地址。
  127.0.0.1 是本地迴環地址 localhost：用來測試本機服務器是否連通。

• 域名
  因爲 IP 地址都是沒有規律的一些數字組成的，很難被人記住，不利於普遍傳播，因此就有人想出來要給 IP 起名字（別名）。

• 特殊的域名
  localhost 含義爲本地主機，對應127.0.0.1 。這是一個保留域名，主要用於本地測試。

-DNS domain name system
經過寬帶運營商提供的服務器解析一個域名背後對應的 IP，這個過程叫作 DNS 尋址，幫你完成 DNS 尋址過程的服務器叫作 DNS 服務器。
hosts 文件
操做系統在發起對 DNS 服務器的查詢請求以前，會優先檢查本機的 hosts 文件。若是這個文件中包含了對當前須要解析的域名的配置，則再也不發起對 DNS 服務器的請求，直接使用 hosts 文件中的配置。

• 端口
  計算機自己是一個封閉的環境，就像是一個大樓，若是須要有數據通訊往來，必須有門，這個門在術語中就叫端口，每個端口都有一個編號，每臺計算機只有 65536 個端口（0-65535）。
  能夠經過在命令行中運行： netstat -an 命令監視本機端口使用狀況：

• URL
  URL（Uniform Resource Locator），統一資源定位符，通俗點來講就是表示網絡當中某一個網頁的完整訪問地址，它具備必定的格式：
  -- 協議名稱://域名:端口/文件目錄(文件名稱)?key=value&key2=value2
  例如：https://itcast.cn:80/schools/students?id=18&name=zce

**總結請求響應流程 **

1. 用戶打開瀏覽器
2. 地址欄輸入咱們須要訪問的網站網址（URL）
3. 瀏覽器經過 DNS 服務器 獲取即將訪問的網站 IP 地址
4. 瀏覽器發起一個對這個 IP地址的 （請求）
5. 服務端監聽指定的 端口 的服務器軟件接收到這個請求，進行相應的處理（處理）
6. 服務端將處理完的結果返回給客戶端瀏覽器（響應）
7. 瀏覽器接收服務端返回的結果並相應相應的處理(渲染)

GET與POST
請求在網站的訪問過程當中很常見，而且請求分爲多種方式：GET、POST、PUT、DELETE、OPTIONS等。其中GET和POST最經常使用。

GET請求

常見的發起GET請求的方式

• 地址欄訪問
• src/href
• 表單：method='get'
• ajax:type設置爲get

網頁中有許多效果使用的就是GET請求：

• 各類搜索框
• 各類詳情頁面
• 大部分超連接

GET方式提交數據的格式

1. 格式:index.php?userName=jack&password=123
2. 參數名與參數值之間沒有空格
3. 參數值不須要使用單雙引號包括

GET方式提交數據的特色：

1. get方式在url後面拼接參數，只能以文本的形式傳遞數據
2. 傳遞的數據量小，4KB左右（不一樣瀏覽器會有差別）
3. 安全性低，會將數據顯示在地址欄
4. 速度快，一般用於對安全性要求不高的請求

POST請求
字面上理解，post就是指發送，提交,它能夠向指定的資源提交要被處理的數據。
GET方式提交數據經過URL傳遞到請求的頁面，提交的數據量通常較小，用於請求頁面數據。此外，GET方式傳遞的數據安全性低, 對於密碼等隱私信息、文件上傳必須使用POST方式提交。

特色 1-post 方式 安全性比較高 2-傳遞數據量大，請求對數據長度沒有要求 3-請求不會被緩存，也不會保留在瀏覽器歷史記錄中 用於：密碼等安全性要求比較高的場合，提交的數據量比較大：發佈文章，上傳文件。