一、请求“报头”(header)详解
header 的整体的格式也是 "键值对" 结构. 每个键值对占一行. 键和值之间使用 冒号+空格 分割。报头的种类有很多, 下面仅介绍几个常见的.
1. Host
例: Host: www.bilibili.com
描述了服务器主机的地址/端口号,其中地址可以是域名,也可以是IP,Host这里的内容是和首行中的URL中表示得服务器地址是基本是一样的
2.Content-Length
表示 body 中的数据长度,单位是字节。如果没有body(GET),此时也就可以没有Content-Length。
3.Content-Type
表示请求的 body 中的数据格式,form (application/x-www-form-urlencoded)表单提交的数据格式 . 此时 body 的格式形如: title=test&content=hello,这种格式和query string 是差不多的;
form(multipart/form-data) 表单提交的数据格式(在 form 标签中加上 enctyped="multipart/form - data"),一般用于提交图片或者文件,此时body的格式如下:
application/json: 数据为 json 格式. body 格式形如:
{"username":"123456789","password":"xxxx","code":"jw7l","uuid":"d110a05ccde64b16 a861fa2bddfdcd15"}
关于 Content-Type 的详细情况 :
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
4.User-Agent (简称 UA)
UA就描述了系统+浏览器的版本信息
关于UA,随着浏览器的逐渐升级,面对更加丰富的前后端交互,不同浏览器所支持的功能不一样,那么程序员就会根据对方的浏览器不同,来决定返回一个对应的页面。
但是随着时间的推移,目前的浏览器都已经差别不大了,那么此时UA又有一个新的作用,那就是区别PC端和移动端,因为pc端和移动端的网页排版是不一样的。但是通过UA来区分是手机还是电脑,来返回不同板式的页面,这虽然是一种实现方式,但是这似乎对程序员不太友好,因为需要同时维护两个版本的代码。现在更加主流的实现方式是“响应式布局”,大概就是基于CSS3中的“媒体查询功能”,大概就是能够获取到当前页面的宽度,然后根据宽度来决定样式,从而达到一份代码可以适用于不同宽度的屏幕。
5. Referer
表示这个页面是从哪个页面跳转过来的,形如:
注意:如果直接在浏览器中输入URL, 或者直接通过收藏夹访问页面时是没有 Referer 的.
Referer其实可以用到网站搜索广告的点击计费模式。
6.Cookie
Cookie 的值是一个字符串(程序员自己定义的),Cookie相当于浏览器这边进行本地存储的一种机制。
一般Cookie用来存储用户的登陆信息,比如用户名和密码。当你后续继续访问的时候,这个时候浏览器会自动的把保存的值给带上,往往可以通过这个字段实现 "身份标识" 的功能。
一下是大概就是登陆以及访问过程:
这里就会衍生一个问题,就是浏览器能不能把信息写到磁盘里面?答案是,绝对不能!!!
因为这样会有非常大的风险,如果有病毒,那么就直接入侵你的电脑了!因此Cookie就是解决这一问题的的一种机制,这也是浏览器提供的一种机制。
但是现在的浏览器,有更多的本地存储机制了,现在的网页也不完全依赖Cookie了。比如:
1. LocalStorage
HTML5开始引入的一个机制,浏览器支持 一种“键值对”方式来进行存储,通过JS提供了一组API来操作数据。
2. IndexDB
这是比较新的浏览器才支持的机制,浏览器内部集成了一个“数据库”,支持类似于sql的方式来进行操作数据。
二、请求 "正文" (body)详解
正文(body)中的内容格式和 header 中的 Content-Type 密切相关。具体的可以通过抓包来观察。
三、响应 "报头" (header)详解
响应报头的基本格式和请求报头的格式基本一致。
四、响应 "正文" (body)详解
与请求正文格式基本一致,正文的具体格式取决于 Content-Type。
响应中的 Content-Type 常见取值有以下几种 :
text/html:body 数据格式是 HTML
text/css:body 数据格式是 CSS
application/javascript:body 数据格式是 JavaScript
application/json:body 数据格式是 JSON