本篇博客给大家带来的是网络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, 感谢观看 ❤❤❤
🐎期待与你的下一次相遇😊😊😊