[置顶] http协议初探------http request和response报文格式

    搞 web 的程序猿,应该都知道 http 协议。 http 协议有三个版本。 http 0.9 版本, http 1.0 版本,和现在一直在使用的 http 1.1 版本。 RFC 2616 http 1.1 版本的官方规范文档。另外《 http 权威指南》也对 http 协议进行了很好的阐述。

http 协议是属于应用层协议,以可靠连接TCP套接字的基础上设计的应用协议。http1.1默认是开启长连接的。

 

http request部分报文结构

http 协议规定,http request部分报文分三部分。第一部分是请求行,第二部分是请求头,第三部分是请求实体。

以下为通过wireshark抓包后,整理的http 一次request发送的数据信息



 

                  测试环境的http request



 

                  淘宝某个jshttp request

 

http request中规定第一行为请求行,请求行中第一个单词为请求的方法。比如GET(请求服务端数据)post(更新数据到服务端)DELETE(删除服务端数据)PUT(新增数据到服务端) OPTIONTRACE等等。

第二个单词为请求的相对路径

第三个单词为http版本。目前有HTTP/1.1 HTTP/1.0 HTTP/0.9。目前几乎所有的浏览器和httpClient客户端都是HTTT/1.1。除非你的浏览器或者HttClient很老了(建议赶紧升级吧)。

最后以两个字节\r\n1310也就是回车+换行结束)做为请求行的标示结束。

注意http规定请求行中,第一个,第二个,第三个单词间必须要有一个空格

 

大家都知道,通过网络传输,传输的都是bit位(由Byte字节转换),服务端接受到http request部分后,读出来的数据也是Byte流。服务端是怎样截取Byte流的,比如什么时候header结束,http body开始。

通过两个连续的字节1310(也就是\r\n)。表示http header结束,http body开始,可以查看上图

http header中通过两个字节13 10区分每个header。看上图每个http头部都是以\r\n结束。Header包含两部分,一个是headerName,一个是headerValueheaderNameheaderValue间用一个“:”冒号和” ”一个空格分开,比如   
 

 

http body的结束,是通过head中的Content-length指定的,以conten-length的大小,计算body的长度。(当然有些是以传输块指定的bodycontent-length无法指定,则会按相应的规则解析body中字节流,拿到每块的大小,然后再解析)

 

http response 部分报文结构

http response报文协议结构和http request报文协议结构几乎相同,第一部分为应答状态行,第二部分为应答头,第三部分为应答实体

以下为通过wireshare抓包后,一次http response返回结果,是上图,淘宝某js  http request对应的response 部分。



 

 

http response报文规定第一行为响应状态行,第一个单词为http协议值,比如http/0.9 http/1.0 htpp/1.1 第二个单词为响应的状态码。比如 200表示服务端处理该请求成功,4XX开头是客户端发的http resquest有问题,5XX为服务端内部处理出错。3XX为页面转发

http response 头部字段和http response 实体部分也是通过两个连续的回车(13)换行(10)符进行分割的。

http response header之间和header内容中的结构和分割和http request header规则一样。

http response结束,也是通过http response header中的Content-length字段的值确认的(有时,服务端生成动态内容,body的大小无法计算,有时以header中的Transfer-Encoding为准,http协议规定有Transfer-Encoding,以Transfer-Encoding为准,没有Transfer-EncodingContent-length为准)

 

  • 大小: 12.1 KB
  • 大小: 15.5 KB
  • 大小: 3.2 KB
  • 大小: 23.2 KB
vue-echarts是一个基于Vue.js的图表库,它提供了对ECharts图表库的封装和集成,使得在Vue.js项目中使用ECharts更加方便。折线置顶是指在折线图中,将某一条折线显示在其他折线的上方,以突出该折线的重要性或者优先级。 要实现折线置顶,可以通过设置ECharts的series配置项中的z值来控制折线的层级。z值越大,表示该折线在图表中的层级越高,即显示在其他折线的上方。 以下是实现折线置顶的步骤: 1. 在Vue.js项目中引入vue-echarts库,并初始化一个ECharts实例。 2. 在ECharts的option配置项中定义多条折线,并设置不同的z值。 3. 将option配置项传递给vue-echarts组件进行渲染。 下面是一个示例代码,演示了如何使用vue-echarts实现折线置顶: ```vue <template> <div> <vue-echarts :options="chartOptions"></vue-echarts> </div> </template> <script> import VueECharts from 'vue-echarts'; export default { components: { VueECharts, }, data() { return { chartOptions: { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }, yAxis: { type: 'value', }, series: [ { name: 'Line 1', type: 'line', data: [120, 200, 150, 80, 70, 110, 130], z: 2, // 设置z值为2,表示该折线置顶 }, { name: 'Line 2', type: 'line', data: [90, 150, 200, 120, 100, 80, 70], z: 1, // 设置z值为1,表示该折线在第二层级 }, // 其他折线... ], }, }; }, }; </script> ``` 通过设置series中的z值,可以控制折线的层级,从而实现折线置顶效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值