柚子快報激活碼778899分享：前端網(wǎng)絡(luò)請求

http://yzkb.51969.com/

HTTP概述

HTTP（超文本傳輸協(xié)議，HyperText Transfer Protocol）是一種用于分布式、協(xié)作式、超媒體信息系統(tǒng)的應(yīng)用層協(xié)議。HTTP 是萬維網(wǎng)（WWW）的數(shù)據(jù)通信的基礎(chǔ)，設(shè)計目的是確?？蛻舳伺c服務(wù)器之間的通信，是互聯(lián)網(wǎng)上最常用的協(xié)議之一。HTTP 是一個基于 TCP/IP 通信協(xié)議來傳遞數(shù)據(jù)的（HTML 文件、圖片文件、查詢結(jié)果等）。設(shè)計 HTTP 最初的目的是為了提供一種發(fā)布和接收 HTML 頁面的方法，通過 HTTP 或者 HTTPS 協(xié)議請求的資源由統(tǒng)一資源標(biāo)識符（Uniform Resource Identifiers，URI）來標(biāo)識。

HTTP 的基本工作原理是客戶端（通常是 web 瀏覽器）向服務(wù)器發(fā)送請求，服務(wù)器接收到請求后，返回相應(yīng)的資源。這些資源可以是網(wǎng)頁、圖像、音頻文件、視頻等。

HTTP 使用了客戶端-服務(wù)器模型(client-server)，其中客戶端發(fā)送請求，服務(wù)器返回響應(yīng)。

HTTP/HTTPS

HTTP 本身是不安全的，因為傳輸?shù)臄?shù)據(jù)未經(jīng)加密，可能會被竊聽或篡改，為了解決這個問題，引入了 HTTPS，即在 HTTP 上加入 SSL/TLS 協(xié)議，為數(shù)據(jù)傳輸提供了加密和身份驗證。

資源和URI

HTTP 請求的內(nèi)容通稱為"資源"。”資源“這一概念非常寬泛，它可以是一份文檔，一張圖片，或所有其他你能夠想到的格式。每個資源都由一個 (URI) 來進行標(biāo)識。

URI（統(tǒng)一資源標(biāo)識符）是一個指向資源的字符串。最通常用在 URL 上來指定 Web 上資源文件的具體位置。相比之下，URN 是在給定的命名空間用名字指向具體的資源。 一般情況下，資源的名稱和位置由同一個 URL（統(tǒng)一資源定位符，它是 URI 的一種）來標(biāo)識。

URI 的最常見形式是統(tǒng)一資源定位符 (URL)，它也被稱為 Web 地址。

https://www.bing.com https://github.com https://www.nenu.edu.cn

在瀏覽器的地址欄中輸入上述任一地址，瀏覽器就會加載相應(yīng)的網(wǎng)頁（資源）。

URN 是另一種形式的 URI，它通過特定命名空間中的唯一名稱來標(biāo)識資源。

urn:isbn:9780141036144 urn:ietf:rfc:7230

URL語法

一個URL通常由協(xié)議+主機+端口+路徑+查詢+片段組成

例如：https://www.example.com:80/app/search?content=network

協(xié)議: https 主機: www.example.com 端口: 80 路徑: app/search 查詢: ?content=network

對于查詢一般格式為?key1=value1&key2=value2，其中&是對鍵值對的分割如果訪問的該 Web 服務(wù)器使用 HTTP 協(xié)議的標(biāo)準(zhǔn)端口（HTTP 為 80，HTTPS 為 443）授予對其資源的訪問權(quán)限，則通常省略此部分。

Cookie

HTTP Cookie（也叫 Web Cookie 或瀏覽器 Cookie）是服務(wù)器發(fā)送到用戶瀏覽器并保存在本地的一小塊數(shù)據(jù)。瀏覽器會存儲 cookie 并在下次向同一服務(wù)器再發(fā)起請求時攜帶并發(fā)送到服務(wù)器上。通常，它用于告知服務(wù)端兩個請求是否來自同一瀏覽器——如保持用戶的登錄狀態(tài)。Cookie 使基于無狀態(tài)的 HTTP 協(xié)議記錄穩(wěn)定的狀態(tài)信息成為了可能。

Cookie主要用于以下三個方面： ? 會話狀態(tài)管理（如用戶登錄狀態(tài)、購物車、游戲分?jǐn)?shù)或其它需要記錄的信息） ? 個性化設(shè)置（如用戶自定義設(shè)置、主題等） ? 瀏覽器行為跟蹤（如跟蹤分析用戶行為等）

更多http相關(guān)知識參考MDN

HTTP請求

瀏覽器中輸入url，按下回車，會發(fā)生什么？

DNS域名解析（DNS尋址），找到網(wǎng)頁的存放服務(wù)器。瀏覽器與服務(wù)器建立TCP連接；瀏覽器發(fā)送HTTP請求；服務(wù)器響應(yīng)HTTP請求，返回該頁面的HTML內(nèi)容瀏覽器解析HTML代碼，并請求HTML代碼中的資源（如javascript、css、圖片等）瀏覽器對頁面進行渲染呈現(xiàn)給用戶

請求方法

根據(jù) HTTP 標(biāo)準(zhǔn)，HTTP 請求可以使用多種請求方法。 HTTP1.0 定義了三種請求方法： GET, POST 和 HEAD 方法。 HTTP1.1 新增了六種請求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。

方法描述GET用于請求服務(wù)器發(fā)送某個資源。GET 請求不應(yīng)該對服務(wù)器上的資源做出任何更改。POST向指定資源提交數(shù)據(jù)進行處理請求（例如提交表單或者上傳文件）。數(shù)據(jù)被包含在POST請求體中。POST 請求可能會導(dǎo)致新的資源的建立或已有資源的修改。PUT從客戶端向服務(wù)器傳送的數(shù)據(jù)取代指定的文檔的內(nèi)容，即指定上傳資源存放路徑。本質(zhì)上來講， PUT和POST極為相似，都是向服務(wù)器發(fā)送數(shù)據(jù)，但它們之間有一個重要區(qū)別，PUT通常指定了資源的存放位置，而POST則沒有，POST的數(shù)據(jù)存放位置由服務(wù)器自己決定。DELETE請求服務(wù)器刪除指定的資源。HEAD類似于 GET 請求，但服務(wù)器不返回請求的資源主體，只返回響應(yīng)頭。HEAD 請求通常用于獲取資源的元信息，如資源的大小、類型等，而不需要獲取資源的實際內(nèi)容。OPTIONS客戶端詢問服務(wù)器可以提交哪些請求方法。它用于獲取當(dāng)前URL所支持的方法。PATCH是對 PUT 方法的補充，用來對已知資源進行局部更新 。TRACE回顯服務(wù)器收到的請求，客戶端可以對請求消息的傳輸路徑進行追蹤，TRACE方法是讓W(xué)eb服務(wù)器端將之前的請求通信還給客戶端的方法。主要用于測試或診斷。CONNECTHTTP/1.1 協(xié)議中預(yù)留給能夠?qū)⑦B接改為管道方式的代理服務(wù)器。CONNECT方法要求在與代理服務(wù)器通信時建立隧道，實現(xiàn)用隧道協(xié)議進行TCP通信。主要使用SSL（安全套接層）和TLS（傳輸層安全）協(xié)議把通信內(nèi)容加密后經(jīng)網(wǎng)絡(luò)隧道傳輸。

最常用的兩種請求方法為GET、POST

HTTP報文

HTTP 報文是在應(yīng)用程序之間發(fā)送的數(shù)據(jù)塊,這些數(shù)據(jù)塊將通過以文本形式的元信息開頭，用于 HTTP 協(xié)議交互。請求端(客戶端)的 HTTP 報文叫做請求報文，響應(yīng)端(服務(wù)器端)的叫做響應(yīng)報文。HTTP 報文本身是由多行數(shù)據(jù)構(gòu)成的字符串文本

請求報文

HTTP 請求報文由請求行、請求頭、空行和請求包體(body)組成。如下圖所示： 示例：

GET / HTTP/1.1

Host: www.baidu.com

Connection: keep-alive

Cache-Control: max-age=0

sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"

sec-ch-ua-mobile: ?0

sec-ch-ua-platform: "macOS"

Upgrade-Insecure-Requests: 1

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

Sec-Fetch-Site: none

Sec-Fetch-Mode: navigate

Sec-Fetch-User: ?1

Sec-Fetch-Dest: document

Accept-Encoding: gzip, deflate, br

Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

Cookie: BIDUPSID=8B0207CE0B6364E5934651E84F17999B; PSTM=1619707475;

請求行 主要描述了客戶端想要如何操作服務(wù)端的資源；請求行由三部分構(gòu)成：

請求方法：表示對資源期望進行何種操作，常用的如 GET、POST請求目標(biāo)：通常是一個 URL ，表明了要操作的資源。版本號：表示報文使用的 HTTP 協(xié)議版本。 這三個部分通常使用空格(space)來分隔，最后要用 CRLF 換行表示結(jié)束。

GET / HTTP/1.1

請求頭 HTTP的報文頭，報文頭包含若干個屬性，格式為“屬性名:屬性值”，服務(wù)端據(jù)此獲取客戶端的信息。與緩存相關(guān)的規(guī)則信息，均包含在 header 中，請求頭可大致分為四種類型：通用首部字段、請求首部字段、響應(yīng)首部字段、實體首部字段。 請求體 請求體就是 HTTP 要傳輸?shù)膬?nèi)容，HTTP 可以承載很多類型的數(shù)字?jǐn)?shù)據(jù):圖片、音頻、視頻、HTML 文檔等。 注意：GET請求不能有請求體，請求的具體信息在url中已經(jīng)給出

響應(yīng)報文

HTTP 響應(yīng)報文由狀態(tài)行、響應(yīng)頭部、空行和響應(yīng)包體(body)組成。如下圖所示：

示例:

HTTP/1.1 200 OK

Bdpagetype: 1

Bdqid: 0xfb0d743100040ad2

Cache-Control: private

Connection: keep-alive

Content-Encoding: gzip

Content-Type: text/html;charset=utf-8

Date: Fri, 24 Dec 2021 08:20:44 GMT

Expires: Fri, 24 Dec 2021 08:20:44 GMT

Server: BWS/1.1

Set-Cookie: BDSVRTM=17; path=/

Set-Cookie: BD_HOME=1; path=/

Set-Cookie: H_PS_PSSID=35635_34439_35104_35628_35488_35436_35456_34584_35491_35584_35586_34873_35317_26350_35610_35562; path=/; domain=.baidu.com

Strict-Transport-Security: max-age=172800

Traceid: 1640334044050133761018090243032019634898

X-Frame-Options: sameorigin

X-Ua-Compatible: IE=Edge,chrome=1

Transfer-Encoding: chunked

狀態(tài)行 狀態(tài)行包含了 協(xié)議版本、狀態(tài)碼以及狀態(tài)描述。

協(xié)議版本：指明了報文使用的 HTTP 協(xié)議版本。狀態(tài)描述：這個是作為狀態(tài)碼的補充，是一段更詳細的文字，幫助人們理解原因。狀態(tài)碼：狀態(tài)碼是一個三位數(shù)字，用來表示處理的結(jié)果，下面列出了狀態(tài)碼的類別： 響應(yīng)頭部 和請求報文的請求頭類似，響應(yīng)頭也由鍵值對組成，每行一對，鍵和值用英文冒號 : 分隔。響應(yīng)頭允許服務(wù)器傳遞不能放在狀態(tài)行的附加信息，這些域主要描述服務(wù)器的信息和 Request-URI 進一步的信息。 響應(yīng)包體 服務(wù)器返回給瀏覽器的響應(yīng)信息，響應(yīng)數(shù)據(jù)的格式是根據(jù)服務(wù)器來的，常見的響應(yīng)數(shù)據(jù)格式有：text/html、application/json 等。

HTTP 首部字段

在 HTTP 的請求頭和響應(yīng)頭中都是由首部字段來表示的，首部內(nèi)容可以為客戶端和服務(wù)器分別處理請求和響應(yīng)提供所需要的信息。

首部字段可以分為通用首部字段、請求首部字段、響應(yīng)首部字段、實體首部字段。

通用首部字段 通用首部字段是指請求報文和響應(yīng)報文都會使用到的首部字段。 請求首部字段 請求首部字段是從客戶端往服務(wù)器端發(fā)送請求報文中所使用的字段，用于補充請求的附加信息、客戶端信息、對響應(yīng)內(nèi)容相關(guān)的優(yōu)先級等內(nèi)容。 響應(yīng)首部字段 響應(yīng)首部字段是由服務(wù)器端向客戶端返回響應(yīng)報文中所使用的字段，用于補充響應(yīng)的附加信息、服務(wù)器信息，以及對客戶端的附加要求等信息。 實體首部字段 實體首部字段是包含在請求報文和響應(yīng)報文中的實體部分所使用的首部，用于補充內(nèi)容的更新時間等與實體相關(guān)的信息。

AJAX

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML)。AJAX 不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。AJAX 最大的優(yōu)點是在不重新加載整個頁面的情況下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容。AJAX 不需要任何瀏覽器插件，但需要用戶允許 JavaScript 在瀏覽器上執(zhí)行。XMLHttpRequest 只是實現(xiàn) Ajax 的一種方式。

XMLHttpRequest

所有現(xiàn)代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后臺與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。

我們只需要借助XMLHttpRequest對象即可向服務(wù)器發(fā)送請求。

創(chuàng)建XMLHttpRequest對象

let xhr = new XMLHttpRequest();

發(fā)送請求 GET請求

let xhr = new XMLHttpRequest();

xhr.open("GET","http://127.0.0.1:8080/course/getall");

xhr.send();

POST請求

let xhr = new XMLHttpRequest();

let user = '{"username": "user", "password": "123456"}';

xhr.open("POST","http://127.0.0.1:8080/user/login");

xhr.send(user);

響應(yīng) 如需獲得來自服務(wù)器的響應(yīng)，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。 onreadystatechange 當(dāng)請求被發(fā)送后，我們無法知道響應(yīng)什么時候到來，也不知道響應(yīng)的狀態(tài)如何，所以我們就需要用onreadystatechange事件監(jiān)控響應(yīng)的狀態(tài)。

let xhr = new XMLHttpRequest();

xhr.open("GET", "http://127.0.0.1:8080/course/getall");

xhr.send();

xhr.onreadystatechange = ()=>{

if(xhr.readyState == 4 && xhr.status == 200){

document.getElementById('show').innerHTML = xhr.responseText;

}

}

Fetch

Fetch API 是用于進行網(wǎng)絡(luò)請求和響應(yīng)的現(xiàn)代 JavaScript API。它提供了一種更簡潔和強大的方式來處理 HTTP 請求和響應(yīng)，我們推薦使用Fetch，而不用原生的XMLHttpRequest。 Fetch API的語法十分簡潔，可以用下面的例子概括：

fetch(url)

.then(response => response.json())

.then(data => console.log(data))

.catch(error => error)

fetch(url,{

method: 'post',

headers: {'Content-Type' : 'application/json'},

body: JSON.stringify(obj)

})

.then(response => response.json())

.then(data => console.log(data))

.catch(error => error)

then.(…)是一種promise的用法，感興趣的可以參考promise

JSON

JavaScript Object Notation(JavaScript 對象表示法)JSON 是輕量級的文本數(shù)據(jù)交換格式JSON 獨立于語言JSON 易于人閱讀和編寫

語法

JSON 語法是 JavaScript 對象表示語法的子集。

數(shù)據(jù)在名稱/值對中數(shù)據(jù)由逗號 , 分隔使用斜桿 \ 來轉(zhuǎn)義字符大括號 {} 保存對象中括號 [] 保存數(shù)組，數(shù)組可以包含多個對象

JSON 的兩種結(jié)構(gòu)：

對象：大括號 {} 保存的對象是一個無序的名稱/值對集合。一個對象以左括號 { 開始， 右括號 } 結(jié)束。每個"鍵"后跟一個冒號 :，名稱/值對使用逗號 , 分隔。

{"name" : "alice", "age" : "19"}

數(shù)組：中括號 [] 保存的數(shù)組是值（value）的有序集合。一個數(shù)組以左中括號 [ 開始， 右中括號 ] 結(jié)束，值之間使用逗號 , 分隔。

["baidu", "google", "taobao"]

數(shù)據(jù)類型

數(shù)字（整數(shù)或浮點數(shù)）字符串（在雙引號中）邏輯值（true 或 false）數(shù)組（在中括號中）對象（在大括號中）null

{"age" : 19}

{"location" : null}

{"flag" : true}

{

data:[

{"name" : "alice"},

{"name" : "bob"}

]

}

JSON使用

JSON數(shù)據(jù)本質(zhì)上是字符串，但是JavaScript已經(jīng)提供了JSON.parse()和JSON.stringify()函數(shù)可以方便的將JSON數(shù)據(jù)轉(zhuǎn)換為對象和字符串形式。

我們可以像使用js中的對象一樣直接使用JSON對象。

let stu = {

name : "alice",

age : 19

}

let stu_string = JSON.stringify(stu);

console.log(stu_string);

let stu_obj = JSON.parse(stu_string);

console.log(stu_obj);

console.log(stu_obj.name);

console.log(stu_obj.age);

柚子快報激活碼778899分享：前端網(wǎng)絡(luò)請求

http://yzkb.51969.com/

參考文章