1. 用戶代理
瀏覽器可以代替用戶完成http請求，代替用戶解析響應(yīng)結(jié)果，所以我們稱之為用戶代理 user agent。
瀏覽器兩大核心能力：
- 自動發(fā)送請求的能力
- 自動解析響應(yīng)的能力
1.1 自動發(fā)送請求的能力
-
用戶在地址欄輸入了一個url地址，并按下了回車
瀏覽器會自動解析URL，并發(fā)出一個
GET請求，同時拋棄當前頁面。 -
當用戶點擊了頁面中的a元素
瀏覽器會拿到a元素的href地址，并發(fā)出一個
GET請求，同時拋棄當前頁面。 -
當用戶點擊了提交按鈕
<button type="submit">...</button>瀏覽器會獲取按鈕所在的
<form>元素，拿到它的action屬性地址，同時拿到它method屬性值，然后把表單中的數(shù)據(jù)組織到請求體（payload，負荷）中，發(fā)出指定方法的請求，同時拋棄當前頁面。其中，input 中的 name 屬性即為后端需要的 屬性名（鍵），value 即為后端需要的 屬性值（值）。
review 是將 response 以一種更加格式化的方式呈現(xiàn)。
使用 form 表單按下回車可以自動提交數(shù)據(jù)，點擊按鈕也可以自動提交數(shù)據(jù)等的自帶功能，進行表單提交。
-
當解析HTML時遇到了
<link> <img> <script> <video> <audio>等元素瀏覽器會拿到對應(yīng)的地址，發(fā)出
GET請求 -
當用戶點擊了刷新
瀏覽器會拿到當前頁面的地址，以及當前頁面的請求方法，重新發(fā)一次請求，同時拋棄當前頁面。
瀏覽器在發(fā)出請求時，會自動附帶一些請求頭
但是，瀏覽器都有一個約定：
當發(fā)送GET請求時，瀏覽器不會附帶請求體。
這個約定深刻的影響著后續(xù)的前后端各種應(yīng)用，現(xiàn)在，幾乎所有人都在潛意識中認同了這一點，無論是前端開發(fā)人員還是后端開發(fā)人員。
由于前后端程序的默認行為，逐步造成了GET和POST的各種差異：
- 瀏覽器在發(fā)送 GET 請求時，不會附帶請求體
- GET 請求的傳遞信息量有限，適合傳遞少量數(shù)據(jù)；POST 請求的傳遞信息量是沒有限制的，適合傳輸大量數(shù)據(jù)。
- GET 請求只能傳遞 ASCII 數(shù)據(jù)，遇到非 ASCII 數(shù)據(jù)需要進行編碼；POST 請求沒有限制
- 大部分 GET 請求傳遞的數(shù)據(jù)都附帶在 path 參數(shù)中，能夠通過分享地址完整的重現(xiàn)頁面，但同時也暴露了數(shù)據(jù)，若有敏感數(shù)據(jù)傳遞，不應(yīng)該使用 GET 請求，至少不應(yīng)該放到 path 中
- POST 不會被保存到瀏覽器的歷史記錄中
- 刷新頁面時，若當前的頁面是通過 POST 請求得到的，則瀏覽器會提示用戶是否重新提交。若是 GET 請求得到的頁面則沒有提示。
1.2 自動解析響應(yīng)的能力
瀏覽器不僅能發(fā)送請求，還能夠針對服務(wù)器的各種響應(yīng)結(jié)果做出不同的自動處理
常見的處理有：
-
識別響應(yīng)碼
瀏覽器能夠自動識別響應(yīng)碼，當出現(xiàn)一些特殊的響應(yīng)碼時瀏覽器會自動完成處理，比如
301、302 -
根據(jù)響應(yīng)結(jié)果做不同的處理
瀏覽器能夠自動分析響應(yīng)頭中的
Content-Type，根據(jù)不同的值進行不同處理，比如：-
text/plain: 普通的純文本，瀏覽器通常會將響應(yīng)體原封不動的顯示到頁面上 -
text/html：html文檔，瀏覽器通常會將響應(yīng)體作為頁面進行渲染 -
text/javascript或application/javascript：js代碼，瀏覽器通常會使用JS執(zhí)行引擎將它解析執(zhí)行 -
text/css：css代碼，瀏覽器會將它視為樣式 -
image/jpeg：瀏覽器會將它視為jpg圖片 -
application/octet-stream：二進制數(shù)據(jù)，會觸發(fā)瀏覽器下載功能 -
attachment：附件，會觸發(fā)下載功能該值和其他值不同，應(yīng)放到
Content-Disposition頭中。
-
2. AJAX
AJAX 就是指在web應(yīng)用程序中異步向服務(wù)器發(fā)送請求。
它的實現(xiàn)方式有兩種，XMLHttpRequest 簡稱XHR和Fetch
以下是兩者的對比
| 功能點 | XHR | Fetch |
|---|---|---|
| 基本的請求能力 | ? | ? |
| 基本的獲取響應(yīng)能力 | ? | ? |
| 監(jiān)控請求進度 | ? | ? |
| 監(jiān)控響應(yīng)進度 | ? | ? |
| Service Worker中是否可用 | ? | ? |
| 控制cookie的攜帶 | ? | ? |
| 控制重定向 | ? | ? |
| 請求取消 | ? | ? |
| 自定義referrer | ? | ? |
| 流 | ? | ? |
| API風格 | Event |
Promise |
| 活躍度 | 停止更新 | 不斷更新 |
庫 axios 只是 xhr 的封裝。文章來源：http://www.zghlxwxcb.cn/news/detail-735829.html
2.1 請求及響應(yīng)數(shù)據(jù)
async function loadData() {
const res = await fetch('https://www.xxx.com/api/user')
// console.log(res) // res 內(nèi)包含響應(yīng)頭，但還得不到響應(yīng)體的 數(shù)據(jù)
const body = await res.json()
// const body = await res.text() 等等同理，都是為了等待響應(yīng)體完成響應(yīng)后才能返回響應(yīng)體的數(shù)據(jù)，只是格式的區(qū)別
// console.log(body) // 此時 body 里面才是響應(yīng)體的數(shù)據(jù)
// Promise 的形式
// fetch('https://www.xxx.com/api/user')
// .then(res => res.json())
// .then(body => console.log(body))
}
2.2 上傳文件
// selectFile 是文件上傳的 input 框
selectFile.onchange = (e) => {
// 偽數(shù)組
// 給 input （加上 multiple 可以上傳多個文件）
const file = e.target.files[0]
}
文章來源地址http://www.zghlxwxcb.cn/news/detail-735829.html
到了這里，關(guān)于【計算機網(wǎng)絡(luò)】瀏覽器的通信能力的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
