金子fa

http介紹

http:hyper Text transport protocol - 超文本傳輸協議

協議：約定雙方的利益和責任

為什么要有協議？規定雙方應該這么做，做什么

傳輸行為- 超文本

 

協議約束哪雙方？前端 后端（客服端 服務器）

協議分為3個部分，客服端和服務器之間傳輸超文本分為三個過程：

1、建立連接-三次握手

2、進行通信

3、斷開連接-4次揮手

總結：

 

三次握手

 

 

 

 

四處揮手

 

Request -請求

 

Accept-接受

response - 響應

 

 

 

 

 

服務器會給客戶端被動響應消息 - 消息的格式必須是響應報文

 

 

斷開連接

 

 

在瀏覽器中存儲數據-cookie-會話技術的一種-客戶端的

 

 如何操作cookie

注意：cookie是解決http無狀態的問題 - cookie必須是在http上

如果要操作cookie，就必須將當前頁面使用服務器打開

 

 為了讓時間更標準，我們應該在設置有效期的時候

 

 

 

 

 

 改路徑

 

 總結

 

 

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請求

常見的請求方式：

1. GET： 查

2. POST： 增

3. PUT： 改

4. DELETE： 刪

GET和POST的區別

1. get請求的數據會顯示在地址欄，post的數據不顯示

2. get請求的數據大小有限制：

   • IE： 2083 個字符

   • FireFox： 65536 個字符

   • Safari： 80000 個字符

   • Opera： 190000 個字符

   • Chrome： 8182 個字符

   post請求的數據沒有限制，除非服務器主動設置。

3. get請求的數據類型必須是ASCII，post沒有限制

4. 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
# 服務端給客戶端的響應數據

第三步：斷開連接

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

1. 客戶端發送一個我要斷開的消息給服務端

2. 服務端接受到以后發送一個消息告訴客戶端我已經進入關閉等待狀態

3. 服務端再次發送一個消息告訴客戶端，這個是我的最后一次消息給你，當我再接受到消息的時候就會關閉

4. 客戶端接受到服務端的消息以后，告訴服務器，我已經關閉，這個是給你的最后一個消息

常見的HTTP響應狀態碼：

1. 100 ~ 199：一般我們看不到，因為表示請求繼續

2. 200 ~ 299：請求成功

3. 300 ~ 399：表示重定向

   • 301： 永久重定向

   • 302： 臨時重定向

4. 400 ~ 499：客戶端錯誤

   • 401： 未授權（你要登錄的網站需要授權登錄）

   • 403： 服務器拒絕了你的請求

   • 404： 服務器找不到你請求的 URL

5. 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特點

1. cookie的最大數據量限制為4kb

2. cookie的最大數量限制在50條（不一定，現在瀏覽器都比較高端，現在的谷歌可以設置150條左右）

3. cookie有時效性，一般是會話級別（瀏覽器關閉就過期）

4. 有域名限制，在當前域名下設置的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)
}

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

本地存儲

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

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

設置本地存儲數據：

localStorage.setItem(鍵，值);

獲取本地存儲數據：

localStorage.getItem(鍵);

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

localStorage.length

刪除本地存儲：

localStorage.removeItem(鍵);

清空本地存儲：

localStorage.clear();

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

本地存儲的特點：

1. 也是按照域名存儲的

2. 存儲的值是字符串類型，如果是數字，會自動轉為字符串存儲

3. 鍵是唯一的（有就修改，沒有就增加）

4. 很多情況下需要存儲對象，存儲對象要先轉為字符串存儲（使用JSON.stringify()），取出來再轉為json對象（使用JSON.parse()）