本篇博客給大家帶來的是網絡HTTP協議的知識點, 續上篇文章,接著介紹HTTP的報文格式.
🐎文章專欄: JavaEE初階
🚀若有問題 評論區見
? 歡迎大家點贊 評論 收藏 分享
如果你不知道分享給誰,那就分享給薯條.
你們的支持是我不斷創作的動力 .
王子,公主請閱🚀
- 要開心
- 要快樂
- 順便進步
- 1. HTTP響應
- 1.1 認識"狀態碼"
- 1.2 認識響應"報頭"
- 1.3 認識響應"正文"(body)
- 2. 構造HTTP請求
- 2.1 通過form表單構造HTTP請求.
- 2.2 利用ajax構造HTTP請求
- 2.3 利用postman構造HTTP請求
要開心
要快樂
順便進步
1. HTTP響應
響應的構成主要涉及到前端的知識:
html css js 構成網頁的主體.
html 表示頁面的骨架.
css 表示頁面的樣式.
js 表示頁面的行為.
1.1 認識"狀態碼"
狀態碼表示訪問一個頁面的結果. (是訪問成功, 還是失敗, 還是其他的一些情況)
以下是比較常見的狀態碼.
① 200 OK
表示訪問成功.
這是一個最常見的狀態碼, 表示訪問成功. 抓包抓到的大部分結果都是 200
② 404 Not Found
表示沒有找到資源.
瀏覽器輸入一個 URL, 目的就是為了訪問對方服務器上的一個資源. 如果這個 URL 標識的資源不存在,那么就會出現 404.例如, 在瀏覽器中輸入 https://www.sogou.com/index.html
此時就在嘗試訪問 sogou 上的
/index.html 這個資源.如果輸入正確, 則可以正確訪問到. 但是如果輸入錯誤, 比如 www.sogou.com/inde.html , 就會看到 404 這樣的響應.
③ 403 Forbidden
表示用戶沒有權限訪問.
查看碼云的私有倉庫, 如果不登陸, 就會出現 403. 訪問受限403
④ 418 l am a teapot
這個狀態碼并沒有實際的意義,只是"開個玩笑"，稱為"彩蛋".
實際開發商業產品或者開源項目的時候, 還是不建議搞彩蛋,防止出現一些宗教信仰問題,導致開發成果"毀于一蛋".
⑤ 302 Move temporarily
臨時重定向
重定向就相當于手機號碼中的 “呼叫轉移” 功能. 比如我本來的手機號是 1314, 后來換了個新號碼 520, 那么不需要讓我的朋友知道新號碼,只要我去辦理一個呼叫轉移業務, 其他人撥打 1314 , 就會自動轉移到 520 上.
在登陸頁面中經常會見到 302. 用于實現登陸成功后自動跳轉到主頁.
碼云的登陸頁面: 碼云頁面登陸
抓包看到的響應結果:
⑥ 301 Moved Permanently
永久重定向
當瀏覽器收到這種響應時, 后續的請求都會被自動改成新的地址. 301 也是通過 Location 字段來表示要重定向到的新地址.
狀態碼小結
1.2 認識響應"報頭"
響應報頭的基本格式和請求報頭的格式基本一致. 詳細可見上一篇文章: 【網絡原理】從零開始深入理解HTTP的報文格式(一)
類似于 Content-Type , Content-Length 等屬性的含義也和請求中的含義一致.
Content-Type
響應中的 Content-Type 常見取值有以下幾種:
? text/html : body 數據格式是 HTML
? text/css : body 數據格式是 CSS
? application/javascript : body 數據格式是 JavaScript
? application/json : body 數據格式是 JSON
關于 Content-Type 的詳細情況: MIME types
1.3 認識響應"正文"(body)
正文的具體格式取決于 Content-Type. 觀察上面幾個抓包結果中的響應部分.
① text/html
② text/css
③ application/javascript
④ application/json
2. 構造HTTP請求
2.1 通過form表單構造HTTP請求.
form (表單) 是 HTML 中的一個常用標簽. 可以用于給服務器發送 GET 或者 POST 請求. form 只支持 GET 或者 POST 請求
Ⅰ form發送GET請求
form 的重要參數:
? action: 構造的 HTTP 請求的 URL 是什么.
? method: 構造的 HTTP 請求的 方法 是 GET 還是 POST (form 只支持 GET 和 POST).
input 的重要參數:
? type: 表示輸入框的類型. text 表示文本, password 表示密碼, submit 表示提交按鈕.
? name: 表示構造出的 HTTP 請求的 query string 的 key. query string 的 value 就是輸?框的用戶輸入的內容.
? value: input 標簽的值. 對于 type 為 submit 類型來說, value 就對應了按鈕上顯示的文本.
使用VSCode編譯器,創建一個文件命名為form.html. 右側輸入 ! 再按TAB鍵代碼基本框架就出來了.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello</title>
</head>
<body><form action="http://www.sogou.com/abc.html" method="get"><input type="text" name="key1"><input type="text" name="key2"><input type="text" name="key3"><input type="submit" value="提交"></form>
</body>
</html>
頁面展示效果:
在輸入框中隨便填寫數據,并提交
構造的get 請求如下:
GET https://www.sogou.com/abc.html?key1=13&key2=14&key3=520 HTTP/1.1
Host: www.sogou.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0
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.7
sec-ch-ua: "Microsoft Edge";v="135", "Not-A.Brand";v="8", "Chromium";v="135"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
Cookie: cuid=AAG2VbIdUwAAAAuipyOMMwAANgg=; SUV=1745486111856508; SNUID=4F22AF328583B539A426D88686764390; ABTEST=0|1745830865|v17; SUID=5B5768DF3EA7A20B00000000680F43D1; IPLOC=CN4400; LSTMV=345%2C204; LCLKINT=1918; browerV=3; osV=1Ⅱ form發送POST請求
將上述代碼中method = ‘‘get’’ 改成 method = '‘post’'即可.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello</title>
</head>
<body><form action="http://www.sogou.com/abc.html" method="post"><input type="text" name="key1"><input type="text" name="key2"><input type="text" name="key3"><input type="submit" value="提交"></form>
</body>
</html>
構造的post請求如下:
POST http://www.sogou.com/abc.html HTTP/1.1
Host: www.sogou.com
Connection: keep-alive
Content-Length: 24
Cache-Control: max-age=0
Origin: null
Content-Type: application/x-www-form-urlencoded
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0
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.7
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6key1=13&key2=14&key3=520
主要的區別:
① method 從 GET 變成了 POST.
② 數據從 query string 移動到了 body 中.
2.2 利用ajax構造HTTP請求
從前端角度, 除了瀏覽器地址欄能構造 GET 請求, form 表單能構造 GET 和 POST 之外, 還可以通過ajax 的方式來構造 HTTP 請求. 并且功能更強大.
現在的網站,主體都是通過 ajax 的方式來進行交互的.
特點是可以不需要 刷新頁面/頁面跳轉 就能進行數據傳輸.
Ⅰ 利用 ajax 發送 GET 請求
瀏覽器原生提供了 ajax 的 api 特別難用, 但好在有一些第三方庫封裝了 ajax. 本文使用的是 jquery 這個庫.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ajax</title>
</head>
<body><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script>//就是編寫自己的 js 代碼.$.ajax({type: 'get',url: 'https://www.sogou.com/abc.html?',success: function(body) {console.log(body);}});</script>
</body>
</html>
構造get的請求如下:
GET https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js HTTP/1.1
Host: cdn.bootcdn.net
Connection: keep-alive
sec-ch-ua-platform: "Windows"
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0
sec-ch-ua: "Microsoft Edge";v="135", "Not-A.Brand";v="8", "Chromium";v="135"
sec-ch-ua-mobile: ?0
Accept: */*
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: no-cors
Sec-Fetch-Dest: script
Sec-Fetch-Storage-Access: active
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6Ⅱ 利用 ajax 發送POST請求
對于 POST 請求, 需要設置 body 的內容
1. 先使用 setRequestHeader 設置 Content-Type
2. 再通過 send 的參數設置 body 內容.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ajax</title></head><body><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script>//就是編寫自己的 js 代碼.$.ajax({type: 'post',url: 'https://www.sogou.com/abc.html?',contentType: 'application/x-www-form-urlencoded',body: 'studentName=zhangsan',success: function(body) {console.log(body);}});</script></body></html>
構造的post請求如下:
POST https://www.sogou.com/abc.html? HTTP/1.1
Host: www.sogou.com
Connection: keep-alive
Content-Length: 0
Pragma: no-cache
Cache-Control: no-cache
sec-ch-ua-platform: "Windows"
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0
Accept: */*
sec-ch-ua: "Microsoft Edge";v="135", "Not-A.Brand";v="8", "Chromium";v="135"
Content-Type: application/x-www-form-urlencoded
sec-ch-ua-mobile: ?0
Origin: null
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.62.3 利用postman構造HTTP請求
能夠構造 http 請求的第三方工具,非常多的,本文章主要使用的 postman , 也有很多其他的工具, 都大同小異. 這些工具一般都來測試.
可以先下載postman
postman官方網站
下載完后再注冊一個賬號, 注冊郵箱建議用@163.
注冊完了之后:
① 創建一個倉庫
② 構造HTTP請求
③ 還可以自動生成代碼
不會寫前端代碼也沒事.
本篇博客到這里就結束啦, 下篇文章再來介紹HTTPS, 感謝觀看 ???
🐎期待與你的下一次相遇😊😊😊
)
