获得网站所有关键字,用啥网站做首页,wordpress制作的网站,深圳 赢客创想网络技术股份有限公司 网站建设本篇博客给大家带来的是网络HTTP协议的知识点, 续上篇文章,接着介绍HTTP的报文格式. #x1f40e;文章专栏: JavaEE初阶 #x1f680;若有问题 评论区见 ❤ 欢迎大家点赞 评论 收藏 分享 如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 王子,公主请阅… 本篇博客给大家带来的是网络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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlehello/title
/head
bodyform actionhttp://www.sogou.com/abc.html methodgetinput typetext namekey1input typetext namekey2input typetext namekey3input typesubmit value提交/form
/body
/html页面展示效果: 在输入框中随便填写数据,并提交 构造的get 请求如下:
GET https://www.sogou.com/abc.html?key113key214key3520 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/xhtmlxml,application/xml;q0.9,image/avif,image/webp,image/apng,*/*;q0.8,application/signed-exchange;vb3;q0.7
sec-ch-ua: Microsoft Edge;v135, Not-A.Brand;v8, Chromium;v135
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;q0.9,en;q0.8,en-GB;q0.7,en-US;q0.6
Cookie: cuidAAG2VbIdUwAAAAuipyOMMwAANgg; SUV1745486111856508; SNUID4F22AF328583B539A426D88686764390; ABTEST0|1745830865|v17; SUID5B5768DF3EA7A20B00000000680F43D1; IPLOCCN4400; LSTMV345%2C204; LCLKINT1918; browerV3; osV1 Ⅱ form发送POST请求 将上述代码中method ‘‘get’’ 改成 method ‘post’即可.
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlehello/title
/head
bodyform actionhttp://www.sogou.com/abc.html methodpostinput typetext namekey1input typetext namekey2input typetext namekey3input typesubmit 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-age0
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/xhtmlxml,application/xml;q0.9,image/avif,image/webp,image/apng,*/*;q0.8,application/signed-exchange;vb3;q0.7
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q0.9,en;q0.8,en-GB;q0.7,en-US;q0.6key113key214key3520主要的区别: ① 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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleajax/title
/head
bodyscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/scriptscript//就是编写自己的 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;v135, Not-A.Brand;v8, Chromium;v135
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;q0.9,en;q0.8,en-GB;q0.7,en-US;q0.6 Ⅱ 利用 ajax 发送POST请求 对于 POST 请求, 需要设置 body 的内容 1. 先使用 setRequestHeader 设置 Content-Type 2. 再通过 send 的参数设置 body 内容. !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleajax/title/headbodyscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/scriptscript//就是编写自己的 js 代码.$.ajax({type: post,url: https://www.sogou.com/abc.html?,contentType: application/x-www-form-urlencoded,body: studentNamezhangsan,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;v135, Not-A.Brand;v8, Chromium;v135
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;q0.9,en;q0.8,en-GB;q0.7,en-US;q0.6
2.3 利用postman构造HTTP请求
能够构造 http 请求的第三方工具,非常多的,本文章主要使用的 postman , 也有很多其他的工具, 都大同小异. 这些工具一般都来测试.
可以先下载postman postman官方网站 下载完后再注册一个账号, 注册邮箱建议用163. 注册完了之后: ① 创建一个仓库 ② 构造HTTP请求 ③ 还可以自动生成代码
不会写前端代码也没事. 本篇博客到这里就结束啦, 下篇文章再来介绍HTTPS, 感谢观看 ❤❤❤ 期待与你的下一次相遇
