【JavaScript】2.Http中Get与Post两种请求方式的差异

Get和Post在面试中一般都会问到,一般的区别:

(1)post更安全(不会作为url的一部分,不会被缓存、保存在服务器日志、以及浏览器浏览记录中)

(2)post发送的数据更大(get有url长度限制)

(3)post能发送更多的数据类型(get只能发送ASCII字符)

(4)post比get慢

(5)post用于修改和写入数据,get一般用于搜索排序和筛选之类的操作(淘宝,支付宝的搜索查询都是get提交),目的是资源的获取,读取数据

  虽然在开发中经常用get或者post请求,但是由于我们资历经验的欠缺,或许就重来没有深究过什么场合用get请求,什么场合用post请求,我相信不止我一个人当看到第4,5条的时候,就会明白为什么面试官对我们的回答不满意,也明白了自己对get或post用法理解的欠缺,那么get比post更快,究竟快多少呢?表现在那些方面?

一、为什么get比post更快

1.post请求包含更多的请求头

  因为post需要在请求的body部分包含数据,所以会多了几个数据描述部分的首部字段(如:content-type),这其实是微乎其微的。


2.最重要的一条,post在真正接收数据之前会先将请求头发送给服务器进行确认,然后才真正发送数据

  post请求的过程:

  (1)浏览器请求tcp连接(第一次握手)

  (2)服务器答应进行tcp连接(第二次握手)

  (3)浏览器确认,并发送post请求头(第三次握手,这个报文比较小,所以http会在此时进行第一次数据发送)

  (4)服务器返回100 Continue响应

  (5)浏览器发送数据

  (6)服务器返回200 OK响应

  get请求的过程:

  (1)浏览器请求tcp连接(第一次握手)

  (2)服务器答应进行tcp连接(第二次握手)

  (3)浏览器确认,并发送get请求头和数据(第三次握手,这个报文比较小,所以http会在此时进行第一次数据发送)

  (4)服务器返回200 OK响应

也就是说,目测get的总耗是post的2/3左右,这个口说无凭,网上已经有网友进行过测试。


3.get会将数据缓存起来,而post不会

  可以做个简短的测试,使用ajax采用get方式请求静态数据(比如html页面,图片)的时候,如果两次传输的数据相同,第二次以后消耗的时间将会在10ms以内(chrome测试),而post每次消耗的时间都差不多。经测试,chrome和firefox下如果检测到get请求的是静态资源,则会缓存,如果是数据,则不会缓存,但是IE什么都会缓存起来,当然,应该没有人用post去获取静态数据吧,反正我是没见过。


4.post不能进行管道化传输

  http权威指南中是这样说的:http的一次会话需要先建立tcp连接(大部分是tcp,但是其他安全协议也是可以的),然后才能通信,如果 每次连接都只进行一次http会话,那这个连接过程占的比例太大了!于是出现了持久连接:在http/1.0+中是connection首部中添加keep-alive值,在http/1.1中是在connection首部中添加persistent值,当然两者不仅仅是命名上的差别,http/1.1中,持久连接是默认的,除非显示在connection中添加close,否则持久连接不会关闭,而http/1.0+中则恰好相反,除非显示在connection首部中添加keep-alive,否则在接收数据包后连接就断开了。

  出现了持久连接还不够,在http/1.1中,还有一种称为管道通信的方式进行速度优化:把需要发送到服务器上的所有请求放到输出队列中,在第一个请求发送出去后,不等到收到服务器的应答,第二个请求紧接着就发送出去,但是这样的方式有一个问题:不安全,如果一个管道中有10个连接,在发送出9个后,突然服务器告诉你,连接关闭了,此时客户端即使收到了前9个请求的答复,也会将这9个请求的内容清空,也就是说,白忙活了……此时,客户端的这9个请求需要重新发送。这对于幂等请求还好(比如get,多发送几次都没关系,每次都是相同的结果),如果是post这样的非幂等请求(比如支付的时候,多发送几次就惨了),肯定是行不通的。

  所以,post请求不能通过管道的方式进行通信!很有可能,post请求需要重新建立连接,这个过程不跟完全没优化的时候一样了么?所以,在可以使用get请求通信的时候,不要使用post请求,这样用户体验会更好,当然,如果有安全性要求的话,post会更好。管道化传输在浏览器端的实现还需考证,貌似默认情况下大部分浏览器(除了opera)是不进行管道化传输的,除非手动开启!

二、get传参最大长度的理解误区

1.总结

(1)http协议并未规定get和post的长度限制

(2)get的最大长度限制是因为浏览器和web服务器限制了URL的长度

(3)不同的浏览器和web服务器,限制的最大长度不一样

(4)要支持IE,则最大长度为2083byte,若支持Chrome,则最大长度8182byte


2.误解

(1)首先即使get有长度限制,也是限制的整个URL的长度,而不仅仅是参数值数据长度,http协议从未规定get/post的请求长度限制是多少

(2)所谓的请求长度限制是由浏览器和web服务器决定和设置的,各种浏览器和web服务器的设定均不一样,这依赖于各个浏览器厂家的规定或者可以根据web服务器的处理能力来设定。IE 和 Safari 浏览器 限制 2k,Opera 限制4k,Firefox 限制 8k(非常老的版本 256byte),如果超出了最大长度,大部分的服务器直接截断,也有一些服务器会报414错误。


3.各个浏览器和web服务器的最大长度总结

浏览器

(1)IE:IE浏览器(Microsoft Internet Explorer) 对url长度限制是2083(2K+53),超过这个限制,则自动截断(若是form提交则提交按钮不起作用)。

(2)firefox:firefox(火狐浏览器)的url长度限制为 65536字符,但实际上有效的URL最大长度不少于100,000个字符。

(3)chrome:chrome(谷歌)的url长度限制超过8182个字符返回本文开头时列出的错误。

(4)Safari:Safari的url长度限制至少为 80 000 字符。

(5)Opera:Opera 浏览器的url长度限制为190 000 字符。Opera9 地址栏中输入190000字符时依然能正常编辑。

服务器

(1)Apache:Apache能接受url长度限制为8 192 字符

(2)IIS:Microsoft Internet Information Server(IIS)能接受url长度限制为16384个字符。这个是可以通过修改的(IIS7)

configuration/system.webServer/security/requestFiltering/requestLimits@maxQueryStringsetting.<requestLimitsmaxQueryString="length"/>

(3)Perl HTTP::Daemon

Perl HTTP::Daemon 至少可以接受url长度限制为8000字符。PerlHTTP::Daemon中限制HTTP request headers的总长度不超过16 384字节(不包括post,fileuploads等)。但当url超过8000字符时会返回413错误。这个限制可以被修改,在Daemon.pm查找16×1024并更改成更大的值。

(4)ngnix:可以通过修改配置来改变url请求串的url长度限制。

client_header_buffer_size 默认值:client_header_buffer_size1k

large_client_header_buffers默认值 :large_client_header_buffers 4 4k/8k

由于jsonp跨域请求只能通过get请求,url长度根据浏览器及服务器的不同而有不同限制。若要支持IE的话,url长度限制为2083字符,若是中文字符的话只有2083/9=231个字符。若是Chrome浏览器支持的最大中文字符只有8182/9=909个。



  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: axios是一种用于发送HTTP请求的JavaScript库。它提供了两种发送POST请求的方式:一种是通过请求体发送数据,另一种是通过URL参数发送数据。下面是对这两种方式以及前端axios发送请求与后端Spring Boot应用程序如何接收请求的解释。 1. 请求体方式: 通过axios的post方法发送POST请求时,可以将数据作为请求体的一部分发送给后端。在发送请求时,我们可以将数据以对象的形式传递给axios的post方法。 例如,在前端使用axios发送请求: ```javascript axios.post('/api/user', { username: 'John', password: '123456' }) ``` 在后端的Spring Boot应用程序,我们可以使用`@RequestBody`注解来接收请求体的数据。通过该注解,Spring Boot会自动将请求体的JSON数据映射到对应的Java对象上。 例如,在后端的控制器接收请求: ```java @PostMapping("/api/user") public ResponseEntity<?> createUser(@RequestBody User user) { // 处理接收到的用户数据 ... } ``` 2. URL参数方式: 通过axios的post方法发送POST请求时,也可以将数据作为URL参数的一部分发送给后端。在发送请求时,我们可以通过在URL添加查询参数的方式将数据传递给axios的post方法。 例如,在前端使用axios发送请求: ```javascript axios.post('/api/user?username=John&password=123456') ``` 在后端的Spring Boot应用程序,我们可以使用`@RequestParam`注解来接收URL参数的数据。 例如,在后端的控制器接收请求: ```java @PostMapping("/api/user") public ResponseEntity<?> createUser(@RequestParam String username, @RequestParam String password) { // 处理接收到的用户名和密码 ... } ``` 这样,我们就可以通过axios的post方法以两种不同的方式发送POST请求,并通过`@RequestBody`或`@RequestParam`在后端的Spring Boot应用程序接收请求数据。 ### 回答2: axios post请求方式两种,一种是普通post请求,另一种是使用FormData对象进行post请求。这两种方式可以分别用@RequestParam和@RequestBody接收请求参数。 普通post请求方式可以通过设置请求头`'Content-Type': 'application/json'`来发送json格式的数据,并使用axios的data参数传递请求参数。后端接口可以使用@RequestBody注解来接收请求参数。@RequestBody注解将请求体的数据绑定到一个对象上,可以直接使用该对象进行操作。 示例代码如下: 前端代码: ```javascript axios.post('/api/post', { key1: value1, key2: value2 }, { headers: { 'Content-Type': 'application/json' } }).then(response => { console.log(response.data); }).catch(error => { console.log(error); }); ``` 后端代码: ```java @RestController public class PostController { @PostMapping("/api/post") public ResponseEntity<?> handlePostRequest(@RequestBody PostData postData) { // 处理post请求参数 // ... return ResponseEntity.ok("Success"); } } public class PostData { private String key1; private String key2; // 省略getter和setter方法 } ``` 使用FormData对象进行post请求时,可以使用axios的data参数传递FormData对象。设置请求头`'Content-Type': 'multipart/form-data'`。后端接口可以使用@RequestParam注解来接收请求参数。@RequestParam注解用于获取请求参数的值。 示例代码如下: 前端代码: ```javascript const formData = new FormData(); formData.append('key1', value1); formData.append('key2', value2); axios.post('/api/post', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { console.log(response.data); }).catch(error => { console.log(error); }); ``` 后端代码: ```java @RestController public class PostController { @PostMapping("/api/post") public ResponseEntity<?> handlePostRequest(@RequestParam("key1") String key1, @RequestParam("key2") String key2) { // 处理post请求参数 // ... return ResponseEntity.ok("Success"); } } ``` 以上就是使用axios post发送两种请求方式,并使用@RequestParam和@RequestBody接收请求参数的方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值