xml地图|网站地图|网站标签 [设为首页] [加入收藏]
了解一些额外知识,的人都理解错了HTTP中GET与
分类:web前端

了解一些额外知识,让前端开发锦上添花

2018/06/27 · 基础技术 · 前端

原文出处: 守候   

劝了别人无数次,让别人喝了鸡汤,帮别人填坑,自己却掉了坑

99%的人都理解错了HTTP中GET与POST的区别

2016/09/23 · 基础技术 · 澳门新葡亰手机版,11 评论 · GET, HTTP, POST

原文出处: WebTechGarden   

GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二。

最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数。

你可能自己写过无数个GET和POST请求,或者已经看过很多权威网站总结出的他们的区别,你非常清楚知道什么时候该用什么。

当你在面试中被问到这个问题,你的内心充满了自信和喜悦。

澳门新葡亰手机版 1

你轻轻松松的给出了一个“标准答案”:

  • GET在浏览器回退时是无害的,而POST会再次提交请求。
  • GET产生的URL地址可以被Bookmark,而POST不可以。
  • GET请求会被浏览器主动cache,而POST不会,除非手动设置。
  • GET请求只能进行url编码,而POST支持多种编码方式。
  • GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。
  • GET请求在URL中传送的参数是有长度限制的,而POST么有。
  • 对参数的数据类型,GET只接受ASCII字符,而POST没有限制。
  • GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。
  • GET参数通过URL传递,POST放在Request body中。

(本标准答案参考自w3schools)

“很遗憾,这不是我们要的回答!”

澳门新葡亰手机版 2

请告诉我真相。。。

如果我告诉你GET和POST本质上没有区别你信吗?
让我们扒下GET和POST的外衣,坦诚相见吧!

澳门新葡亰手机版 3

GET和POST是什么?HTTP协议中的两种发送请求的方法。

HTTP是什么?HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议。

HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP,也就是说,GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body,给POST带上url参数,技术上是完全行的通的。

那么,“标准答案”里的那些区别是怎么回事?

澳门新葡亰手机版 4

在我大万维网世界中,TCP就像汽车,我们用TCP来运输数据,它很可靠,从来不会发生丢件少件的现象。但是如果路上跑的全是看起来一模一样的汽车,那这个世界看起来是一团混乱,送急件的汽车可能被前面满载货物的汽车拦堵在路上,整个交通系统一定会瘫痪。为了避免这种情况发生,交通规则HTTP诞生了。HTTP给汽车运输设定了好几个服务类别,有GET, POST, PUT, DELETE等等,HTTP规定,当执行GET请求的时候,要给汽车贴上GET的标签(设置method为GET),而且要求把传送的数据放在车顶上(url中)以方便记录。如果是POST请求,就要在车上贴上POST的标签,并把货物放在车厢里。当然,你也可以在GET的时候往车厢内偷偷藏点货物,但是这是很不光彩;也可以在POST的时候在车顶上也放一些数据,让人觉得傻乎乎的。HTTP只是个行为准则,而TCP才是GET和POST怎么实现的基本。

但是,我们只看到HTTP对GET和POST参数的传送渠道(url还是requrest body)提出了要求。“标准答案”里关于参数大小的限制又是从哪来的呢?

澳门新葡亰手机版 5

在我大万维网世界中,还有另一个重要的角色:运输公司。不同的浏览器(发起http请求)和服务器(接受http请求)就是不同的运输公司。 虽然理论上,你可以在车顶上无限的堆货物(url中无限加参数)。但是运输公司可不傻,装货和卸货也是有很大成本的,他们会限制单次运输量来控制风险,数据量太大对浏览器和服务器都是很大负担。业界不成文的规定是,(大多数)浏览器通常都会限制url长度在2K个字节,而(大多数)服务器最多处理64K大小的url。超过的部分,恕不处理。如果你用GET服务,在request body偷偷藏了数据,不同服务器的处理方式也是不同的,有些服务器会帮你卸货,读出数据,有些服务器直接忽略,所以,虽然GET可以带request body,也不能保证一定能被接收到哦。

好了,现在你知道,GET和POST本质上就是TCP链接,并无差别。但是由于HTTP的规定和浏览器/服务器的限制,导致他们在应用过程中体现出一些不同。

你以为本文就这么结束了?

澳门新葡亰手机版 6

我们的大BOSS还等着出场呢。。。

这位BOSS有多神秘?当你试图在网上找“GET和POST的区别”的时候,那些你会看到的搜索结果里,从没有提到他。他究竟是什么呢。。。

GET和POST还有一个重大区别,简单的说:

GET产生一个TCP数据包;POST产生两个TCP数据包。

长的说:

对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);

而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。

也就是说,GET只需要汽车跑一趟就把货送到了,而POST得跑两趟,第一趟,先去和服务器打个招呼“嗨,我等下要送一批货来,你们打开门迎接我”,然后再回头把货送过去。

因为POST需要两步,时间上消耗的要多一点,看起来GET比POST更有效。因此Yahoo团队有推荐用GET替换POST来优化网站性能。但这是一个坑!跳入需谨慎。为什么?

  1. GET与POST都有自己的语义,不能随便混用。

2. 据研究,在网络环境好的情况下,发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下,两次包的TCP在验证数据包完整性上,有非常大的优点。

  1. 并不是所有浏览器都会在POST中发送两次包,Firefox就只发送一次。

现在,当面试官再问你“GET与POST的区别”的时候,你的内心是不是这样的?

澳门新葡亰手机版 7

4 赞 33 收藏 11 评论

澳门新葡亰手机版 8

详解CSS盒模型

2015/11/04 · CSS · 1 评论 · 盒模型

原文出处: 小灰狼的脑瓜(@狼狼的蓝胖子)   

本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节。

1.前言

在前端学习里面,很多人都是注重学习代码(html,css,js)。或者是一些框架,库(jquery,vue,react),或者是各种工具(webpack,gulp)。在以往的文章里面,或者自己和别人交谈,都有建议过别人多练,不要闷头就写代码,多深入了解当中的原理,学习其中的思想。但是除了代码方面的知识之外,还有哪一些是作为一个前端,应该扩展学习的呢?下面简单罗列和整理了一下最近学习的资源。如果大家还有其它的推荐,欢迎在评论区留言。

下面的知识,可能不需要太过于深入,详细的掌握,但是必须要有所了解,这样在开发上遇到问题,解决问题的时候即使不是如虎添翼,也是锦上添花。

一些基本概念

HTML的大多数元素都是块级(block)元素或行内(inline)元素

2.http,https

前端而言,不可避免的要和接口打交道。除了和后台对接口,请求数据,渲染页面,之外。对http的请求,也是要有一个了解,比如http协议,请求方式,请求过程,结果状态码等。了解这些,对开发的时候可能遇到的问题,就可以大概知道问题是怎么产生的,更快的知道怎么解决,避免。

块级元素

默认情况下,块级元素会另起一行,并尽可能的充满整个容器。
块级元素可以包含行内元素和其他块级元素,相比于行内元素可以创建更复杂和大型的结构

2-1.请求

首先一个请求,包含有请求头,请求行,请求正文。具体是怎样境,看下面的代码

axios({ method: 'post', url: '/user/12345', headers:{ 'Content-Type':'application/x-www-form-urlencoded' }, data: { firstName: 'Fred', lastName: 'Flintstone' } });

1
2
3
4
5
6
7
8
9
10
11
axios({
  method: 'post',
  url: '/user/12345',
  headers:{
    'Content-Type':'application/x-www-form-urlencoded'  
  },
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

如上所述

methodurl就是这个请求的请求行(这里是请求行部分信息,其实请求行还包括http协议的版本等信息)。headers中的属性就是请求头,里面的属性,全部包含在请求的header里面,是服务端获取客户端版本,缓存等信息的一个途径。data对应的就是请求正文,也就是平常所说的参数。

块级元素列表:

html5新增的元素:
figcation:图文信息组标题 ,article:文章,figure:图文信息组
output:表单输出,aside:侧栏内容,footer:区段尾或页尾,audio:音频播放
video:视频播放,section:页面区段,canvas:画布、绘制图形,header:区段头或页头
hgroup:标题组,

address:联系方式信息,ol:有序列表,p:行,form:表单,pre:预格式化文本,blockqute:块引用
h1-h6:标题,table:表格,dd:列表中条目描述,dl:定义列表,div,hr:水平分割线

2-2.响应

在请求发出去,并且响应已经回来的时候,就时候信息可分为响应行,响应头,响应正文。

响应行

引用看云的一个请求作为实例,如下代码就是这个请求的响应行,返回请求的http协议及版本,状态码,请求状态等描述信息。

Request URL: Request Method:GET Status Code:200 OK Remote Address:117.23.61.221:443

1
2
3
4
Request URL:https://www.kancloud.cn/yunye/axios/comment?article_id=234845&page=1
Request Method:GET
Status Code:200 OK
Remote Address:117.23.61.221:443

响应头

响应头和请求头格式一致,返回版本,缓存等信息。

响应正文

平常接触最多的就是响应正文,也就是日常开发需要用到的数据。开发者拿到这些数据之后,再进行相应的处理。

行内元素

行内元素不会另起一行只占据它对应的标签的边框所包含内容的空间,
只能包含数据和其他行内元素

2-3.关于https

关于 https 。下面可以先了解下 http 的缺点,https就是http基础上做的加密处理。

1.通信使用明文不加密,内容可能被窃听
2.不验证通信方身份,可能遭到伪装
3.无法验证报文完整性,可能被篡改

行内元素列表

b,big,i,small,tt,
abbr,acronym,cite,code,dfn,em,kbd,strong,samp,var,
a,bdo,br,img,map,object,q,script,span,sub,sup,
button,input,label,select,textarea

2-4.相关资料

关于http与https就简单说到这里,详细的推荐看下下面的资料。

HTTP教程

HTTP协议【详解】——经典面试题

一个故事讲完https

块级元素和行内元素的区别

块级元素:
1.会另起一行,
2.可以设置width,height,margin,padding,border属性
3.默认宽度是容器的100%

行内元素:
1.和其他元素在同一行内
2.高度和宽度就是内容的高度和宽度
3.可以设置margin-left和margin-right属性,无法设置margin-top和margin-bottom属性
4.border和padding可以设置,但是border-top和padding-top到页面顶部后就不再增加

3.响应状态码

上面提到响应状态码,在这里也简单写下。在前端方面,请求接口可能会接触到各种情况,常见的有下面几个,应该怎么解决,就是具体问题,具体分析。

状态码 意义
200 请求成功
400 参数错误
403 拒绝或者禁止访问(无权限访问)
404 地址不存在
405 客户端请求中的方法被禁止(一般是请求方式错误)
500 服务器报错
502 请求超时,无效网关
503 服务器超载或者维护,无法响应

正常流

正常流指:从左到右,从上到下显示。要让一个元素不在正常流中,唯一的办法是让元素浮动或定位

3-1.参考资料

详细的状态码请参考下面内容。

HTTP状态码

非替换元素

如果元素的内容包含在文档中,则称之为非替换元素。比如一个段落的文本都在该元素本身之内,这个段落就是一个非替换元素。

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:了解一些额外知识,的人都理解错了HTTP中GET与

上一篇:配置最佳实践 下一篇:没有了
猜你喜欢
热门排行
精彩图文