HTTP協議和會話詳解

HTTP協議

爲什麼要學習http？因爲前端和後臺進行交互的時候，使用的就是這個協議。

HTTP協議，叫超文本傳輸協議(Hypertext transfer protocol)。是一個規則，規定了瀏覽器和萬維網服務器之間通信的規則。

HTTP的請求只能是客戶端向服務器發起。

第一步：建立連接

客戶端和服務器進行通信的第一步，就是要有一個連接的狀態，也就是要建立一個連接。在建立連接的時候，客戶端和服務端分別需要知道一些信息：

客戶端：

知道客戶端能發消息

知道客戶端能收消息

知道服務器能收消息

知道服務器能發消息

服務端：

知道服務端能收消息

知道服務端能發消息

知道客戶端能發消息

收到客戶端能收消息

每次建立連接的時候，兩邊都需要知道這些信息，所以會有一個“三次握手”的過程。

第一次：客戶端向服務器發送一個消息，服務端收到一個消息。此時，互相知道的消息：

客戶端知道自己能發消息

服務端知道自己能收消息

服務端知道客戶端能發消息

第二次：服務端向客戶端回覆一個消息，客戶端接收到一個消息。此時互相知道的消息：

服務端知道自己能發消息

客戶端知道服務端能收消息

客戶端知道服務端能發消息

客戶端知道自己能收消息

第三次：客戶端給服務端再發一個消息，服務端又收到一個消息。此時，最後一個信息，也就確定了：

服務端知道客戶端能收消息

這時候，客戶端和服務端就能開始通信了

第二步：開始通信

通信主要分兩個過程，一個是客戶端向服務器發起請求（Request），一個是服務器向客戶端發起相應（Reponse）。

請求

請求的時候，主要是發送請求報文（請求的說明文檔）。這個文檔包含4部分內容。

請求行：

POST /user HTTP/1.1
# POST 請求方式
# /user 請求URL（不包含域名）
# HTTP/1.1 請求協議版本

請求頭：

user-agent: Mozilla/5.0 # 產生請求的瀏覽器信息
accept: application/json # 表示客戶端希望接受的數據類型
Content-Type: application/x-www-form-urlencoded # 客戶端發送的實體數據格式
Host: 127.0.0.1 # 請求的主機名（IP）

請求頭都是鍵值對。

請求空行：

請求頭和請求主體之間要有一個空行。好截取內容。

請求主體：

# GET 請求是沒有請求體數據的
# POST 請求才有請求體數據

請求主體就是請求的時候攜帶的數據。

get請求示例：

get請求

post請求示例：

post請求

常見的請求方式：

GET：查
POST：增
PUT：改
DELETE：刪

GET和POST的區別

get請求的數據會顯示在地址欄，post的數據不顯示
get請求的數據大小有限制：
- IE： 2083 個字符
- FireFox： 65536 個字符
- Safari： 80000 個字符
- Opera： 190000 個字符
- Chrome： 8182 個字符
post請求的數據沒有限制，除非服務器主動設置。
get請求的數據類型必須是ASCII，post沒有限制
get相對不安全，post相對安全

響應

每一個響應，都會有響應報文（響應的說明文檔），響應報文包含3部分內容：

響應行：

HTTP/1.1 200 OK
# HTTP/1.1 服務器使用的 HTTP 協議版本
# 200 響應狀態碼
# OK 對響應狀態碼的簡單解釋

響應頭：

Date: Jan, 14 Aug 2019 12:42:30 GMT # 服務器時間
Server: Apache/2.4.23 (Win32) OpenSSL/1.0.2j PHP/5.4.45 # 服務器類型
Content-Type: text/html # 服務端給客戶端的數據類型
Content-Length: 11 # 服務端給客戶端的數據長度

響應主體：

hello world
# 服務端給客戶端的響應數據

第三步：斷開連接

斷開連接的過程，我們稱之爲“四次揮手”。

客戶端發送一個我要斷開的消息給服務端
服務端接受到以後發送一個消息告訴客戶端我已經進入關閉等待狀態
服務端再次發送一個消息告訴客戶端，這個是我的最後一次消息給你，當我再接受到消息的時候就會關閉
客戶端接受到服務端的消息以後，告訴服務器，我已經關閉，這個是給你的最後一個消息

常見的HTTP響應狀態碼：

100 ~ 199：一般我們看不到，因爲表示請求繼續
200 ~ 299：請求成功
300 ~ 399：表示重定向
- 301：永久重定向
- 302：臨時重定向
400 ~ 499：客戶端錯誤
- 401：未授權（你要登錄的網站需要授權登錄）
- 403：服務器拒絕了你的請求
- 404：服務器找不到你請求的 URL
500 ~ 599：服務端錯誤
- 500：服務器內部錯誤
- 503：服務器當前不可用（過載或者維護）

會話

http的每一次請求之間是沒有聯繫的。也就是說，你對同一個網頁請求兩次，這兩次之間沒有聯繫，因爲每一次請求都會有三次握手四次揮手的過程，所以http協議是一種無狀態協議，意思是說不能保持訪問的狀態。

但在很多時候，保留訪問狀態是必須要有的一種操作，比如：在首頁登陸後，希望在別的頁面能保持這種登陸的狀態。所以，出現了一個技術，叫做會話技術。會話中首先有了cookie。

cookie簡介

cookie是瀏覽器提供的一個存儲數據的空間。

正常情況下，我們在頁面中動態給div添加一個內容，當時可以在div中看到這個內容，但是等刷新頁面的時候，這個div中的內容又成了空，也就是說，我們動態添加的數據是不持久的。而cookie這個瀏覽器提供的空間可以讓數據持久。也就是說存在這個空間中的數據等下次刷新頁面，數據還是存在的。

js設置cookie

document.cookie = 'name=張三;';

通過瀏覽器查看

瀏覽器查看cookie

刷新頁面也不會發生改變。

cookie是基於http協議的，所以操作cookie的時候，一定要在http協議中訪問。

從上圖中能看出來，cookie在存儲值的時候，使用的是鍵值對的形式。也就是說在設置cookie的時候也應該用鍵值對的形式來設置。

這個數據要是一直存在在瀏覽器中的話，瀏覽器的內存會崩潰，所以cookie也會有消失的時候。

剛剛設置的cookie在重新打開瀏覽器的時候就消失了。說明cookie也有生存週期。設置的時候也可以設置cookie的生命週期。

cookie操作

設置語法：

document.cookie = '鍵=值;expires=失效時間;path=能使用當前cookie的路徑';

例：

var date = new Date();
date.setTime(date.getTime()-1000*60*60*8+8000); // 當前時間的8秒之後
document.cookie = 'age=20;expires='+date+";path=/"; // 斜槓代表服務器的根目錄

cookie識別的時間是格林威治時間，而我們獲取到的時間是東8區的時間，所以需要減去8個小時，纔是當前時間。

此時，在等待8秒之後，cookie就失效了。如果不設置失效時間的話，cookie默認是在當前頁面關閉的時候失效，也稱爲“會話級別”。

cookie不能一次性設置多個鍵值對，要設置多個cookie就設置多次：

document.cookie = 'name=zhangsan';
document.cookie = 'age=30';

獲取cookie：

var cookie = document.cookie; 
console.log(cookie); // name=zhangsan; age=30

獲取到的多條cookie中間使用分號和空格隔開。

修改cookie，就是重新設置。

刪除cookie，就是將失效時間設置爲當前時間以前。

var date = new Date();
date.setTiem(date.getTime()-1000*60*60*8-1); // 當前時間的上一秒
document.cookie = 'name=zhangsan;expires='+date;

這時候查看cookie的話，可以看到cookie的失效時間是上一秒。

cookie特點

cookie的最大數據量限制爲4kb
cookie的最大數量限制在50條（不一定，現在瀏覽器都比較高端，現在的谷歌可以設置150條左右）
cookie有時效性，一般是會話級別（瀏覽器關閉就過期）
有域名限制，在當前域名下設置的cookie，只能在當前域名下讀取

封裝cookie操作

設置cookie封裝

function setCookie (key, value, expires) {
  const time = new Date()
  time.setTime(time.getTime() - 1000 * 60 * 60 * 24 * 8 + expires*1000) // 用於設置過期時間
  document.cookie = `${key}=${value};expires=${time};`
}

讀取cookie封裝：

function getCookie(key) {
  const cookieArr = document.cookie.split(';')

  let value = ''

  cookieArr.forEach(item => {
    if (item.split('=')[0] === key) {
      value = item.split('=')[1]
    }
  })

  return value
}

刪除cookie封裝：

function delCookie(name) {
  setCookie(name, 1, -1)
}

PHP操作cookie

設置cookie：

語法：

setcookie(鍵，值，失效時間);

例：

setcookie("name","zhangsan",time()+10);

讀取cookie：

語法：

$_COOKIE[鍵]

例：

print_r($_COOKIE["name"]);

php第一次設置時，訪問不到cookie，因爲第一次設置是給客戶端響應信息，並告訴瀏覽器要設置cookie，此時的瀏覽器中並沒有cookie，當第二次訪問的時候，在請求信息帶了cookie，php才能讀取出來。

cookie操作必須依賴http協議，不要直接使用瀏覽器打開html頁面來操作cookie

本地存儲

瀏覽器爲了前端攻城獅的數據使用方便，提供了一個存儲數據的空間，將數據永久性存儲在客戶端上，不主動刪除就一直在瀏覽器上。言外之意就是說，存的多了，會導致瀏覽器很卡。

本地存儲也是使用鍵值對的形式進行存儲的。

設置本地存儲數據：

localStorage.setItem(鍵，值);

獲取本地存儲數據：

localStorage.getItem(鍵);

獲取本地存儲的數據條數：

localStorage.length

刪除本地存儲：

localStorage.removeItem(鍵);

清空本地存儲：

localStorage.clear();

修改本地存儲的數據就是重新設置。

本地存儲的特點：

也是按照域名存儲的
存儲的值是字符串類型，如果是數字，會自動轉爲字符串存儲
鍵是唯一的（有就修改，沒有就增加）
很多情況下需要存儲對象，存儲對象要先轉爲字符串存儲（使用JSON.stringify()），取出來再轉爲json對象（使用JSON.parse()）

HTTP協議和會話詳解

HTTP協議

第一步：建立連接

第二步：開始通信

請求

響應

第三步：斷開連接

會話

cookie簡介

cookie操作

cookie特點

封裝cookie操作

PHP操作cookie

本地存儲

SQL優化-20231016

js的設計模式理解知識

前端三大框架Vue與Angular以及React的區別？

ajax、axios、fetch之間的區別你知道嗎？

js一定要知道的bind、call、apply 區別

vue中computed和watch有什麼區別

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結