關於http的瑣碎筆記

胡志武98發表於2019-06-13
HTTP筆記

HTTP的格式

HTTP請求由四部分組成，分別是狀態行，請求頭，回車，請求正文

  • 狀態行：請求格式Method 資源路徑URL 協議/版本號
  • 請求頭：包含訪問的域名，Cookie，Content-Type，Content-Length等資訊
  • 回車
  • 請求正文：就是HTTP向服務端傳送的資料
1 動詞 路徑 協議/版本
2 key1:value1
2 key2:value2
2 key3:value3
2 Content-Type:application/x-www-form-urlencoded
2 Host:www.baidu.com
2 User-Agent:curl/7.54.0
3				回車用來區分請求頭和請求正文
4 要上傳的資料

複製程式碼

1560432903913

  1. 請求最多包含4部分，最少包含3部分(也就是請求正文部分可以為空)
  2. 第三部分永遠是一個回車，用來區分第三部分和第四部分
  3. 動詞有GET POST PUT PATCH DELETE HEAD OPTIONS等
  4. 這裡的路徑包括【查詢引數】，但不包括【描點】
  5. 如果沒有寫路徑，那麼路徑預設為/
  6. 第2部分中的Content-Type標註了第4部分的格式

HTTP響應格式與請求格式一樣

在http的響應中

Content-Length:響應正文的長度，單位為KB
Content-Type:text/html 響應正文的格式
複製程式碼

HTTP狀態碼

  • 1xx Http請求已經接受，繼續處理請求
  • 2xx 表示成功
  • 3xx 重定向
  • 4xx 客戶端錯誤
  • 5xx 服務端錯誤

常見狀態碼的含義：

  • 200---請求正常處理完成
  • 301---永久重定向
  • 302---臨時重定向
  • 304---請求正確，而服務端的資源沒有改變，則直接用本地快取的資源
  • 400---客戶端語法錯誤
  • 401---請求未經授權
  • 403---請求被拒，沒有訪問許可權
  • 404---請求的url不存在
  • 500---服務端永久錯誤
  • 503---服務端發生臨時錯誤

Cookie特點

  1. 服務端通過設定響應頭的Set-Cookie來設定Cookie
//這裡用node演示
res.setHeader('Set-Cookie','user=admin');
複製程式碼
  1. 瀏覽器得到Cookie之後，每次請求都會帶上Cookie
  2. 服務端讀取到http請求中的cookie就知道了登入使用者的資訊
if(req.headers.cookie.user=='admin'){
    res.end("歡迎管理員");
}
複製程式碼

cookie存在的問題：

  1. 不同瀏覽器不能公用同一個cookie，我在chrome拿到的cookie不能在Safrai上使用
  2. Cookie可以隨便改，不安全
  3. Cookie存在盤的一個資料夾裡
  4. 設定了cookie後，所有請求都會帶上cookie
  5. cookie有效期預設是20分鐘，後端可以強制改變時期
res.setHeader("Set-Cookie",'user=admin;max-age=300000；httpOnly');
//max-age可以改變cookie的有效期
//httpOnly禁止使用者操作cookie
複製程式碼

session和cookie的關係

為了不讓使用者去篡改cookie的值，我們可以把cookie的值存在服務端的一塊記憶體中，這塊記憶體叫做session，而拿到該cookie的值，需要一個隨機的key值

let sessionId = Math.random()*100000;
sessions[sessionId] = {user:admin};
res.setHeader('Set-Cookie',`sessionId=${sessionId}`);
//當瀏覽器再次傳送請求時，就會帶上sessionId
let sessionId = req.headers.cookie.sessionId;
let user = sessions[sessionId]
if(user=='admin'){
	res.end("歡迎管理員")；
}
複製程式碼
  1. 所以session是基於cookie的，
  2. session是佔用伺服器記憶體的
  3. 當這個隨機數越大，使用者越不可能拿到別的使用者的cookie值

Http快取

web效能優化裡有設定HTTP快取這一條，不過是後端操作的

res.setHeader('Cache-Control','max-age=300');
//在30秒內，相同路徑的http請求會指向本地的快取，
//不會真正的傳送請求，
//這一塊在不斷重新整理網頁時，我希望之前已經請求的資源不用再次請求時，可以設定
//首頁一般不會設定http快取，不然使用者不知道你網頁更新的訊息
複製程式碼

1560438195056

localStorage是啥

localStorage是H5新出的api，可以用來設定本地快取

  • localStorage.getItem('name') 獲取快取內容
  • localStorage.setItem('name','hzw') 設定快取
  • localStorage.clear()清除所有快取

注意：

localStorage只能存String

所有存進去的內容，都會自動呼叫toString()的方法

localStorage.setItem('name',{name:'hzw'});
//({}).toString() [object Object]
複製程式碼

1560438707677

如果真的需要存進物件，那麼就用json格式的

localStroage.setItem('name',JSON.stringify({name:'hzw'}));
//
複製程式碼

1560438834283

應用場景：

localStorage一般用來持久化儲存資訊

var a = 1;
//在瀏覽器的視窗把a改為2；
//但再次重新整理網頁時，a又變為了1
//這就不能持久化的儲存資訊
複製程式碼
let a = localStorage.getItem('a');
if(!a){
   a=1;
}else{
    a=(Number)a+1;
}
localStorage.setItem('a',a);
//每次重新整理網頁，a就會加1，這就是持久化儲存資訊
複製程式碼

提示頁面只提示一次

let already = localStorage.getItem('已經提示')；
if(!already){
	localStorage.setItem('已經提示了'，true);
    alter("該網頁已經改版");
}
複製程式碼

localStorage的特點：

  1. 跟HTTP無關
  2. HTTP不會帶上localStorage
  3. 只有相同的域名的頁面才能互相讀取localStorage
  4. 每個域名localStorage最大儲存量5MB左右
  5. 永久有效，除非手動清除快取

sessionStorage也是H5的api

呼叫跟localStorage一樣，特點只有第5條不同，sessionStorage在使用者關閉頁面時，就失效

結語

這是一篇筆記，寫得不是很好，如果有錯誤的地方，還請看官們指正！感激不盡！

相關文章