张三吃饭——竟吃出了HTTP中GET和POST的区别？

Posted 2023-04-06 是羽十八ya

阅读提示：核心内容为红字，如想提取关键信息请阅读红字，若想看完整故事，请顺序阅读 。

背景：这是一个普通的夜晚，这亦是一个不平凡的夜晚。深夜，米饭大王——''POST.张三''和面条皇帝——''GET.李四''(下文简称：张三po、李四ge)，这俩师兄弟在经历面向对象编程大哥的一顿毒打之后，被迫流落到了计算机网络中的珠穆朗玛峰——应用层山脉上的五星级客栈——HTTP客栈——吃饭！！！

        刚进饭店，饭店门口一栏显著的标语映入眼帘： 

---

• http1.0和http1.1都是基于TCP/IP的应用层协议，GET方法和POST方法在在传输层都是通过发送tcp报文进行传输，本质上并无区别，但实际应用的时候，会有区别。

---

        这时张三po同学不解的问到：既然本质上没有区别，为什么还要分GET和POST方法？

        李四ge：你真笨啊！那你平时吃饭就吃饭，为什么还要分用筷子吃饭和用勺子吃饭呢......

        张三po：不，我家里筷子去年跟人跑了，我最近几年吃饭只用勺子吃。

        李四ge：滚！！！

• 传输tcp报文 = 张三po和李四ge吃饭的过程                      
• 使用POST方法和使用GET方法 = 使用勺子吃饭和使用筷子吃饭
• 设定POST、GET的目的：对完成tcp传输报文设置多种处理方法

        李四ge表示活久见，于是问道：你不知道世界上有一种叫面条的东西吗？别告诉我，你从来不用筷子吃面？

        张三po：不，我从来不吃面条，我只吃米饭，所以大家都叫我米饭大王——张三po。

• 勺子 = POST          筷子 = GET
• 使用POST提交数据 = 使用勺子吃米饭
• 使用GET获取网页信息 = 使用筷子吃面条
• 为处理不同事情，定义不同方法，针对性处理

        张三po见李四ge不太聪明的样子，于是乎直接找掌柜的点了一碗鱼骨面条，找了个远离李四ge的角落坐下休息，李四ge见状，有模有样地学张三po的样子，点了一份，超级精华版大大大的鲮鱼饭团——然后坐在了李四ge旁边。

        客栈效率很快，香喷喷的饭团和热乎乎的面条10秒钟后就送上餐桌，两人心照不宣地狼吞虎咽起来。

        李四ge一口气嗦了3条2米长的面条，但无奈嘴巴不够大，只能夹断，分成两次嗦。

        张三po：李四ge，你知道我一勺子吃了多少粒米饭吗？

        李四ge：你那饭团一坨一坨的，直接装成一个大Body，我咋知道有几粒啊？？？

        张三po：但是我看得到你一筷子夹着嗦了3条面条哎！！！

        李四ge：我为什么要让你看见我吃几条面条，以至于让你来问我这个问题啊！！！！！

• 一勺子吃的米粒数量——POST数据参数不可见，信息装填在Body部分传输
• 一筷子吃的面条数量——GET数据参数在地址栏可见，数据参数拼接在URL后（不安全性）
• 没有规定一口只能嗦多长的面条，但是嘴巴大小有限，限制嗦面条的长度——
• HTTP标准没有明确制定URL的长度，但是一般浏览器支持的URL长度为，因此使用GET传输数据就会受到URL长度的限制。

        李四ge：这个夜晚我永生难忘

        张三po：为什么呀？是因为和我在一起太开心了所以永生难忘吗？那可太不好意思了哎！

• POST请求不会被浏览器缓存（推协议）
• GET请求会被浏览器缓存（拉协议），永生难忘~

       （hint： 他们师门的祖传传统仪式，吃完一顿饭必须大喊：我吃完了！以表示对劳动人民辛勤汗水的尊敬)  (hint：面条吃下去，代表真的没有鱼刺，饭团吃下去，可能卡在喉咙，得确认两次)   

        十分钟过去了，李四ge：我吃完了！(表示没有鱼刺)

        张三po把大碗往桌子上一扔，大喊：我吃完了！

        张三po：没......没......咳咳......ge，李四ge我被鱼刺卡住了！！！

• GET请求把请求头部和data一并发送出去，一气呵成~
• POST请求先发送请求头部，等待服务器响应，在发送data
• 在网络环境好时，两次数据包发送时间差可忽略不计，在Firefox中POST只发一次包。

（这家店的食物是天下独绝，没有练过胃部力量的人无法消化，张三po没练过，但李四ge练过） 

        很快在李四ge的帮助下，张三po成功将鱼刺取出，但这时，张三po的胃由于消化不了这家客栈的鲮鱼饭团，于是乎肚子疼了起来，而李四ge却没有事情。

• 胃 = 服务器       
• 服务器需要以特定方式获取请求的数据 
• 服务器处理GET需要通过Request.QueryString来获取数据
• 服务器处理POST需要通过Request.Form来获取数据

        在一阵挣扎之后，张三po成功将刚吃下去的鱼刺吐了出来，顺便在李四ge身上也吐了几坨刚刚下肚的饭团。李四ge感到了一丝丝痛苦，他挣扎着，彷徨着，呐喊着，但他还是没有吐出来，他的胃部功能变得逐渐强大——再强大——越来越强大——不到一刻钟的时间，李四ge获得了一种超能力——永久免疫张三po的呕吐袭击！！！而张三po在历经地狱般痛苦的折磨之后，胃部自此百毒不侵！！！

• 张三po改变了胃部的功能变得更加强大
• 李四ge留下了永久免疫
• POST 可以修改变服务器上的资源
• GET请求的资源会被浏览器主动缓存的，再次请求相同内容，就会返回缓存的内容

        这时，客栈老板看俩师兄弟意志如此坚定，道德如此高尚，便拿出镇店之宝——月光宝盒，给予师兄弟两人一次回到过去的机会！重回进店之时，愉快地度过这个美好的夜晚。

        李四ge急了：你还想让我再让我经历一次？？？还不如让我去被面向对象编程再毒打一顿。

        张三po：如果上天再给我一次机会回到过去，我会说：我愿意！！！

• POST请求后退——重新提交请求
• GET请求回退——无影响(缓存)

---

小结 

http1.0和http1.1都是基于TCP/IP的应用层协议，GET方法和POST方法在在传输层都是通过发送tcp报文进行传输，本质上并无区别，但实际应用的时候，会有区别。

• 设定POST、GET的目的：对完成tcp传输报文设置多种处理方法，为处理不同事情，定义不同方法，针对性处理

• POST数据参数不可见，信息装填在Body部分传输
• GET数据参数在地址栏可见，数据参数拼接在URL后（不安全性）
• HTTP标准没有明确制定URL的长度，但是一般浏览器支持的URL长度为，因此使用GET传输数据就会受到URL长度的限制。

• POST请求不会被浏览器缓存（推协议）
• GET请求会被浏览器缓存（拉协议）

• GET请求把请求头部和data一并发送出去
• POST请求先发送请求头部，等待服务器响应，在发送data

• 服务器需要以特定方式获取请求的数据 
• 服务器处理GET需要通过Request.QueryString来获取数据
• 服务器处理POST需要通过Request.Form来获取数据

• POST 可以修改变服务器上的资源
• GET请求的资源会被浏览器主动缓存的，再次请求相同内容，就会返回缓存的内容

• POST请求后退——重新提交请求
• GET请求回退——无影响(缓存)

---

⭐博主首次尝试故事风格解说介绍知识，如有不足之处，欢迎评论私信批评指正，如果觉得文章不错的话，点个赞支持一下呗~~~ 

vue基本知识回顾 | this.$http.get 和 this.$http.post传参 / created与mounted区别 / 富文本解析

vue使用this.$http.get 和 this.$http.post传参

get传参方式

this.$http.get('http://localhost:8080/testApi', 
  params: 
    name: "张三",
    phone: "13888888888"
   
).then((res) => 
  console.log('请求完成')
);

post传参方式

this.$http.get('http://localhost:8080/testApi', 
    name: "张三",
    phone: "13888888888"
).then((res) => 
  console.log('请求完成')
);

---

vue中created与mounted区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。一般数据请求后赋值操作在次执行。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

---

vue富文本解析

data() 
    return 
      content: [], //保存后端请求的富文本
    ;
,

created() 
	// 富文本请求并赋值
    this.$http.post('http://localhost:8080/contentApi', ).then((res) => 
      if (res.data.code == 100) 
        this.content = res.data.content;
      
    );
,

// 富文本解析展示
<p v-html="content"></p>