柚子快報(bào)激活碼778899分享：前端網(wǎng)絡(luò)請(qǐng)求
柚子快報(bào)激活碼778899分享：前端網(wǎng)絡(luò)請(qǐng)求
HTTP概述
HTTP（超文本傳輸協(xié)議，HyperText Transfer Protocol）是一種用于分布式、協(xié)作式、超媒體信息系統(tǒng)的應(yīng)用層協(xié)議。HTTP 是萬(wàn)維網(wǎng)（WWW）的數(shù)據(jù)通信的基礎(chǔ)，設(shè)計(jì)目的是確保客戶端與服務(wù)器之間的通信，是互聯(lián)網(wǎng)上最常用的協(xié)議之一。HTTP 是一個(gè)基于 TCP/IP 通信協(xié)議來(lái)傳遞數(shù)據(jù)的（HTML 文件、圖片文件、查詢結(jié)果等）。設(shè)計(jì) HTTP 最初的目的是為了提供一種發(fā)布和接收 HTML 頁(yè)面的方法，通過(guò) HTTP 或者 HTTPS 協(xié)議請(qǐng)求的資源由統(tǒng)一資源標(biāo)識(shí)符（Uniform Resource Identifiers，URI）來(lái)標(biāo)識(shí)。
HTTP 的基本工作原理是客戶端（通常是 web 瀏覽器）向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器接收到請(qǐng)求后，返回相應(yīng)的資源。這些資源可以是網(wǎng)頁(yè)、圖像、音頻文件、視頻等。
HTTP 使用了客戶端-服務(wù)器模型(client-server)，其中客戶端發(fā)送請(qǐng)求，服務(wù)器返回響應(yīng)。
HTTP/HTTPS
HTTP 本身是不安全的，因?yàn)閭鬏數(shù)臄?shù)據(jù)未經(jīng)加密，可能會(huì)被竊聽(tīng)或篡改，為了解決這個(gè)問(wèn)題，引入了 HTTPS，即在 HTTP 上加入 SSL/TLS 協(xié)議，為數(shù)據(jù)傳輸提供了加密和身份驗(yàn)證。
資源和URI
HTTP 請(qǐng)求的內(nèi)容通稱為"資源"?！辟Y源“這一概念非常寬泛，它可以是一份文檔，一張圖片，或所有其他你能夠想到的格式。每個(gè)資源都由一個(gè) (URI) 來(lái)進(jìn)行標(biāo)識(shí)。
URI（統(tǒng)一資源標(biāo)識(shí)符）是一個(gè)指向資源的字符串。最通常用在 URL 上來(lái)指定 Web 上資源文件的具體位置。相比之下，URN 是在給定的命名空間用名字指向具體的資源。 一般情況下，資源的名稱和位置由同一個(gè) URL（統(tǒng)一資源定位符，它是 URI 的一種）來(lái)標(biāo)識(shí)。
URI 的最常見(jiàn)形式是統(tǒng)一資源定位符 (URL)，它也被稱為 Web 地址。
https://www.bing.com https://github.com https://www.nenu.edu.cn
在瀏覽器的地址欄中輸入上述任一地址，瀏覽器就會(huì)加載相應(yīng)的網(wǎng)頁(yè)（資源）。
URN 是另一種形式的 URI，它通過(guò)特定命名空間中的唯一名稱來(lái)標(biāo)識(shí)資源。
urn:isbn:9780141036144 urn:ietf:rfc:7230
URL語(yǔ)法
一個(gè)URL通常由協(xié)議+主機(jī)+端口+路徑+查詢+片段組成
例如：https://www.example.com:80/app/search?content=network
協(xié)議: https 主機(jī): www.example.com 端口: 80 路徑: app/search 查詢: ?content=network
對(duì)于查詢一般格式為?key1=value1&key2=value2，其中&是對(duì)鍵值對(duì)的分割如果訪問(wèn)的該 Web 服務(wù)器使用 HTTP 協(xié)議的標(biāo)準(zhǔn)端口（HTTP 為 80，HTTPS 為 443）授予對(duì)其資源的訪問(wèn)權(quán)限，則通常省略此部分。
Cookie
HTTP Cookie（也叫 Web Cookie 或?yàn)g覽器 Cookie）是服務(wù)器發(fā)送到用戶瀏覽器并保存在本地的一小塊數(shù)據(jù)。瀏覽器會(huì)存儲(chǔ) cookie 并在下次向同一服務(wù)器再發(fā)起請(qǐng)求時(shí)攜帶并發(fā)送到服務(wù)器上。通常，它用于告知服務(wù)端兩個(gè)請(qǐng)求是否來(lái)自同一瀏覽器——如保持用戶的登錄狀態(tài)。Cookie 使基于無(wú)狀態(tài)的 HTTP 協(xié)議記錄穩(wěn)定的狀態(tài)信息成為了可能。
Cookie主要用于以下三個(gè)方面： ? 會(huì)話狀態(tài)管理（如用戶登錄狀態(tài)、購(gòu)物車(chē)、游戲分?jǐn)?shù)或其它需要記錄的信息） ? 個(gè)性化設(shè)置（如用戶自定義設(shè)置、主題等） ? 瀏覽器行為跟蹤（如跟蹤分析用戶行為等）
更多http相關(guān)知識(shí)參考MDN
HTTP請(qǐng)求
瀏覽器中輸入url，按下回車(chē)，會(huì)發(fā)生什么？
DNS域名解析（DNS尋址），找到網(wǎng)頁(yè)的存放服務(wù)器。瀏覽器與服務(wù)器建立TCP連接；瀏覽器發(fā)送HTTP請(qǐng)求；服務(wù)器響應(yīng)HTTP請(qǐng)求，返回該頁(yè)面的HTML內(nèi)容瀏覽器解析HTML代碼，并請(qǐng)求HTML代碼中的資源（如javascript、css、圖片等）瀏覽器對(duì)頁(yè)面進(jìn)行渲染呈現(xiàn)給用戶
請(qǐng)求方法
根據(jù) HTTP 標(biāo)準(zhǔn)，HTTP 請(qǐng)求可以使用多種請(qǐng)求方法。 HTTP1.0 定義了三種請(qǐng)求方法： GET, POST 和 HEAD 方法。 HTTP1.1 新增了六種請(qǐng)求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。
方法描述GET用于請(qǐng)求服務(wù)器發(fā)送某個(gè)資源。GET 請(qǐng)求不應(yīng)該對(duì)服務(wù)器上的資源做出任何更改。POST向指定資源提交數(shù)據(jù)進(jìn)行處理請(qǐng)求（例如提交表單或者上傳文件）。數(shù)據(jù)被包含在POST請(qǐng)求體中。POST 請(qǐng)求可能會(huì)導(dǎo)致新的資源的建立或已有資源的修改。PUT從客戶端向服務(wù)器傳送的數(shù)據(jù)取代指定的文檔的內(nèi)容，即指定上傳資源存放路徑。本質(zhì)上來(lái)講， PUT和POST極為相似，都是向服務(wù)器發(fā)送數(shù)據(jù)，但它們之間有一個(gè)重要區(qū)別，PUT通常指定了資源的存放位置，而POST則沒(méi)有，POST的數(shù)據(jù)存放位置由服務(wù)器自己決定。DELETE請(qǐng)求服務(wù)器刪除指定的資源。HEAD類似于 GET 請(qǐng)求，但服務(wù)器不返回請(qǐng)求的資源主體，只返回響應(yīng)頭。HEAD 請(qǐng)求通常用于獲取資源的元信息，如資源的大小、類型等，而不需要獲取資源的實(shí)際內(nèi)容。OPTIONS客戶端詢問(wèn)服務(wù)器可以提交哪些請(qǐng)求方法。它用于獲取當(dāng)前URL所支持的方法。PATCH是對(duì) PUT 方法的補(bǔ)充，用來(lái)對(duì)已知資源進(jìn)行局部更新 。TRACE回顯服務(wù)器收到的請(qǐng)求，客戶端可以對(duì)請(qǐng)求消息的傳輸路徑進(jìn)行追蹤，TRACE方法是讓W(xué)eb服務(wù)器端將之前的請(qǐng)求通信還給客戶端的方法。主要用于測(cè)試或診斷。CONNECTHTTP/1.1 協(xié)議中預(yù)留給能夠?qū)⑦B接改為管道方式的代理服務(wù)器。CONNECT方法要求在與代理服務(wù)器通信時(shí)建立隧道，實(shí)現(xiàn)用隧道協(xié)議進(jìn)行TCP通信。主要使用SSL（安全套接層）和TLS（傳輸層安全）協(xié)議把通信內(nèi)容加密后經(jīng)網(wǎng)絡(luò)隧道傳輸。
最常用的兩種請(qǐng)求方法為GET、POST
HTTP報(bào)文
HTTP 報(bào)文是在應(yīng)用程序之間發(fā)送的數(shù)據(jù)塊,這些數(shù)據(jù)塊將通過(guò)以文本形式的元信息開(kāi)頭，用于 HTTP 協(xié)議交互。請(qǐng)求端(客戶端)的 HTTP 報(bào)文叫做請(qǐng)求報(bào)文，響應(yīng)端(服務(wù)器端)的叫做響應(yīng)報(bào)文。HTTP 報(bào)文本身是由多行數(shù)據(jù)構(gòu)成的字符串文本
請(qǐng)求報(bào)文
HTTP 請(qǐng)求報(bào)文由請(qǐng)求行、請(qǐng)求頭、空行和請(qǐng)求包體(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;
請(qǐng)求行 主要描述了客戶端想要如何操作服務(wù)端的資源；請(qǐng)求行由三部分構(gòu)成：
請(qǐng)求方法：表示對(duì)資源期望進(jìn)行何種操作，常用的如 GET、POST請(qǐng)求目標(biāo)：通常是一個(gè) URL ，表明了要操作的資源。版本號(hào)：表示報(bào)文使用的 HTTP 協(xié)議版本。 這三個(gè)部分通常使用空格(space)來(lái)分隔，最后要用 CRLF 換行表示結(jié)束。
GET / HTTP/1.1
請(qǐng)求頭 HTTP的報(bào)文頭，報(bào)文頭包含若干個(gè)屬性，格式為“屬性名:屬性值”，服務(wù)端據(jù)此獲取客戶端的信息。與緩存相關(guān)的規(guī)則信息，均包含在 header 中，請(qǐng)求頭可大致分為四種類型：通用首部字段、請(qǐng)求首部字段、響應(yīng)首部字段、實(shí)體首部字段。 請(qǐng)求體 請(qǐng)求體就是 HTTP 要傳輸?shù)膬?nèi)容，HTTP 可以承載很多類型的數(shù)字?jǐn)?shù)據(jù):圖片、音頻、視頻、HTML 文檔等。 注意：GET請(qǐng)求不能有請(qǐng)求體，請(qǐng)求的具體信息在url中已經(jīng)給出
響應(yīng)報(bào)文
HTTP 響應(yīng)報(bào)文由狀態(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é)議版本：指明了報(bào)文使用的 HTTP 協(xié)議版本。狀態(tài)描述：這個(gè)是作為狀態(tài)碼的補(bǔ)充，是一段更詳細(xì)的文字，幫助人們理解原因。狀態(tài)碼：狀態(tài)碼是一個(gè)三位數(shù)字，用來(lái)表示處理的結(jié)果，下面列出了狀態(tài)碼的類別： 響應(yīng)頭部 和請(qǐng)求報(bào)文的請(qǐng)求頭類似，響應(yīng)頭也由鍵值對(duì)組成，每行一對(duì)，鍵和值用英文冒號(hào) : 分隔。響應(yīng)頭允許服務(wù)器傳遞不能放在狀態(tài)行的附加信息，這些域主要描述服務(wù)器的信息和 Request-URI 進(jìn)一步的信息。 響應(yīng)包體 服務(wù)器返回給瀏覽器的響應(yīng)信息，響應(yīng)數(shù)據(jù)的格式是根據(jù)服務(wù)器來(lái)的，常見(jiàn)的響應(yīng)數(shù)據(jù)格式有：text/html、application/json 等。
HTTP 首部字段
在 HTTP 的請(qǐng)求頭和響應(yīng)頭中都是由首部字段來(lái)表示的，首部?jī)?nèi)容可以為客戶端和服務(wù)器分別處理請(qǐng)求和響應(yīng)提供所需要的信息。
首部字段可以分為通用首部字段、請(qǐng)求首部字段、響應(yīng)首部字段、實(shí)體首部字段。
通用首部字段 通用首部字段是指請(qǐng)求報(bào)文和響應(yīng)報(bào)文都會(huì)使用到的首部字段。 請(qǐng)求首部字段 請(qǐng)求首部字段是從客戶端往服務(wù)器端發(fā)送請(qǐng)求報(bào)文中所使用的字段，用于補(bǔ)充請(qǐng)求的附加信息、客戶端信息、對(duì)響應(yīng)內(nèi)容相關(guān)的優(yōu)先級(jí)等內(nèi)容。 響應(yīng)首部字段 響應(yīng)首部字段是由服務(wù)器端向客戶端返回響應(yīng)報(bào)文中所使用的字段，用于補(bǔ)充響應(yīng)的附加信息、服務(wù)器信息，以及對(duì)客戶端的附加要求等信息。 實(shí)體首部字段 實(shí)體首部字段是包含在請(qǐng)求報(bào)文和響應(yīng)報(bào)文中的實(shí)體部分所使用的首部，用于補(bǔ)充內(nèi)容的更新時(shí)間等與實(shí)體相關(guān)的信息。
AJAX
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML)。AJAX 不是新的編程語(yǔ)言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。AJAX 最大的優(yōu)點(diǎn)是在不重新加載整個(gè)頁(yè)面的情況下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)內(nèi)容。AJAX 不需要任何瀏覽器插件，但需要用戶允許 JavaScript 在瀏覽器上執(zhí)行。XMLHttpRequest 只是實(shí)現(xiàn) Ajax 的一種方式。
XMLHttpRequest
所有現(xiàn)代瀏覽器均支持 XMLHttpRequest 對(duì)象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
我們只需要借助XMLHttpRequest對(duì)象即可向服務(wù)器發(fā)送請(qǐng)求。
創(chuàng)建XMLHttpRequest對(duì)象
let xhr = new XMLHttpRequest();
發(fā)送請(qǐng)求 GET請(qǐng)求
let xhr = new XMLHttpRequest();
xhr.open("GET","http://127.0.0.1:8080/course/getall");
xhr.send();
POST請(qǐng)求
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) 如需獲得來(lái)自服務(wù)器的響應(yīng)，請(qǐng)使用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性。 onreadystatechange 當(dāng)請(qǐng)求被發(fā)送后，我們無(wú)法知道響應(yīng)什么時(shí)候到來(lái)，也不知道響應(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 是用于進(jìn)行網(wǎng)絡(luò)請(qǐng)求和響應(yīng)的現(xiàn)代 JavaScript API。它提供了一種更簡(jiǎn)潔和強(qiáng)大的方式來(lái)處理 HTTP 請(qǐng)求和響應(yīng)，我們推薦使用Fetch，而不用原生的XMLHttpRequest。 Fetch API的語(yǔ)法十分簡(jiǎn)潔，可以用下面的例子概括：
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 對(duì)象表示法)JSON 是輕量級(jí)的文本數(shù)據(jù)交換格式JSON 獨(dú)立于語(yǔ)言JSON 易于人閱讀和編寫(xiě)
語(yǔ)法
JSON 語(yǔ)法是 JavaScript 對(duì)象表示語(yǔ)法的子集。
數(shù)據(jù)在名稱/值對(duì)中數(shù)據(jù)由逗號(hào) , 分隔使用斜桿 \ 來(lái)轉(zhuǎn)義字符大括號(hào) {} 保存對(duì)象中括號(hào) [] 保存數(shù)組，數(shù)組可以包含多個(gè)對(duì)象
JSON 的兩種結(jié)構(gòu)：
對(duì)象：大括號(hào) {} 保存的對(duì)象是一個(gè)無(wú)序的名稱/值對(duì)集合。一個(gè)對(duì)象以左括號(hào) { 開(kāi)始， 右括號(hào) } 結(jié)束。每個(gè)"鍵"后跟一個(gè)冒號(hào) :，名稱/值對(duì)使用逗號(hào) , 分隔。
{"name" : "alice", "age" : "19"}
數(shù)組：中括號(hào) [] 保存的數(shù)組是值（value）的有序集合。一個(gè)數(shù)組以左中括號(hào) [ 開(kāi)始， 右中括號(hào) ] 結(jié)束，值之間使用逗號(hào) , 分隔。
["baidu", "google", "taobao"]
數(shù)據(jù)類型
數(shù)字（整數(shù)或浮點(diǎn)數(shù)）字符串（在雙引號(hào)中）邏輯值（true 或 false）數(shù)組（在中括號(hào)中）對(duì)象（在大括號(hào)中）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)換為對(duì)象和字符串形式。
我們可以像使用js中的對(duì)象一樣直接使用JSON對(duì)象。
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);
柚子快報(bào)激活碼778899分享：前端網(wǎng)絡(luò)請(qǐng)求
參考文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Tospinomall出海樂(lè)購(gòu)港
