JavaScript中GET和POST对比

猿究院-张荣晁

于 2024-04-12 00:49:13 发布

阅读量786

点赞数 29

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_53193630/article/details/137657711

版权

在前后端交互的过程中，使用频率最高的莫过于 GET 和 POST 这两个方法，并且这也是面试中被问到频率很高的知识点。

GET和POST方法只是 HTTP 协议为了不同分工而规定的两种请求方式。

一、什么是HTTP？

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

HTTP 的工作方式是客户端与服务器之间的请求-应答协议。

二、GET和POST的对比

在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。

GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据。

GET 提交参数一般显示在 URL 上，POST 通过表单提交不会显示在 URL 上，POST 更具隐蔽性

1、相同点

HTTP 的底层是 TCP/IP。所以 GET 和 POST 的底层也是 TCP/IP，也就是说，GET 和 POST 都是 TCP 链接。所以说，它们的本质是相同的。

GET 和 POST 之所以产生，要通过HTTP的规则和浏览器/服务器的限制进行区分，使它们在应用过程中体现出不同。

请求过程是：

客户端 IP 发出请求。
发出的请求数据包会通过 TCP ，经网络传输给远程服务端 IP。
服务端 IP 收到请求包之后，解析并处理请求包最后服务端会通过 TCP 将处理结果返回给客户端。
用户便可以查看到想要的响应数据。

2、区别

（1）安全性不同

GET的所有参数全部包装在URL中，明文显示，且服务器的访问日志会记录，非常不安全
POST的URL中只有资源路径，不包含参数，参数封装在二进制的数据体中，服务器也不会记录参数，相对安全。所有涉及用户隐私的数据都要用POST传输

（2）参数长度限制不同

GET 和 POST 传递参数的长度不同：

GET传送的数据量较小，不能大于2KB。
POST传送的数据量较大，一般被默认为不受限制。

HTTP 协议没有 Body 和 URL 的长度限制，对 URL 限制的大多是浏览器和服务器的原因。

服务器是因为处理长 URL 要消耗比较多的资源，为了性能和安全（防止恶意构造长 URL 来攻击）考虑，会给 URL 长度加限制。

（3）参数数据类型不同

GET 只接受 ASCII 字符，而 POST 没有限制。

（4）编码方式不同

GET 请求只能进行 URL 编码（application/x-www-form-urlencoded）

POST 支持多种编码方式（application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。）

（5）GET和POST的请求过程

POST 请求的过程：

浏览器请求 TCP 连接（第一次握手）
服务器答应进行 TCP 连接（第二次握手）
浏览器确认，并发送 POST 请求头（第三次握手，这个报文比较小，所以 HTTP 会在此时进行第一次数据发送）
服务器返回100 Continue响应
浏览器发送数据
服务器返回 200 OK响应

GET 请求的过程：

浏览器请求 TCP 连接（第一次握手）
服务器答应进行 TCP 连接（第二次握手）
浏览器确认，并发送 GET 请求头和数据（第三次握手，这个报文比较小，所以 HTTP 会在此时进行第一次数据发送）
服务器返回 200 OK响应

三、XMLHttpRequest的基本使用(发起GET和POST请求）

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。

XMLHttpRequest(XHR)是一个API对象，其中的方法可以用来在浏览器和服务器端传输数据。这个对象是浏览器的js环境提供的。从XHR获取数据的目的是为了持续修改一个加载过的页面，XHR是Ajax设计的底层概念。XHR使用的协议不同于HTTP，不仅可以使用XML格式的数据，也支持JSON，HTML或者纯文本。

1、XMLHttpRequest的方法

（1）open方法

XMLHttpRequest对象的HTTP和HTTPS请求必须通过opent方法初始化。这个方法必须在实际发送请求之前调用，以用来验证请求方法，URL以及用户信息。这个方法不能确保URL存在或者用户信息必须正确。初始化请求可以接受5个参数。

第一个参数是一个字符串值标识HTTP的请求方法。

第二个参数也是一个字符串值，标示请求的URL。

第三个参数是一个布尔值类型，标示请求是否是异步的，在W3C草案中并不是一个必须参数。如果没有提供，符合W3C规范的用户代理应该默认为true。

第四个和第五个参数分别是用户名和密码。这些参数是服务端为了验证请求使用的。

（2）sendRequestHeader方法

在成功初始化请求之后，XMLHttpRequest对象的setRequestHeader方法可以用来设置请求头。

第一个参数是header的字符串名称，第二个参数是字符串值。如果请求需要多个header，这个方法就要被调用多次。这个方法附加的请求头，在下次open方法调用时会被清空。

（3）send方法

XMLHttpRequest对象的send方法用来发送请求，这个方法接收一个参数，这个参数就是要发送的内容。

如果不需要发送内容，这个参数可以省略。

如果参数是DOM对象，用户代理应该确保文档已经被转成XML格式，通过文档对象的inputEncoding属性编码。如果请求头的Content-Type还没有通过setRequestHeader方法设置，用户代理应该自动的增加一个值"application/xml;charset=charset"，其中的charset应该是用来编码文档的编码格式。

（4）onreadystatechange事件监听器

如果XMLHttpRequest对象的send方法第三个参数是true,也就是发送了异步请求，onreadystatechange事件监听器将自动在XMLHttpRequest对象的readyState属性改变时被触发。

状态改变过程如下：

当open方法被成功调用，readyState属性被置为1(OPEND)
当send方法被调用，成功接收到HTTP响应头，readyState属性被置为2(HEADERS_RECEIVED)
一旦HTTP响应内容开始加载，readyState属性被置为3(LOADING)
一旦HTTP响应内容结束加载，readyState属性被置为4(DONE)

当监听器被定义之后，每次状态改变时都会触发。为了检测状态1和状态2，监听器必须在open方法调用前调用。open方法必须在send方法调用前调用。

2、使用xhr发起get请求

// 创建异步请求对象
let xhr = new XMLHttpRequest();
// 绑定监听onreadystatechange事件  当请求状态发生改变时 执行
xhr.onreadystatechange = function(){
/**
  * xhr.readyState 请求状态
  * 0 请求未初始化
  * 1 服务器连接已建立
  * 2 请求已接收
  * 3 请求处理中
  * 4 请求已完成，且响应已就绪
  * xhr.status 响应状态码
  * 200 请求成功
  * 404 请求失败
  * xhr.responseText 响应体
*/
// 监听xhr对象的请求状态 与服务器的响应状态         
if(xhr.readyState === 4 && xhr.status === 200){
        console.log(JSON.parse(xhr.responseText))
   }
}
// 配置  请求方式 请求url地址  是否异步
xhr.open('get', 'http://localhost:8080/dish/list?categoryId=1397844263642378242',true);
// 发送请求  如果是post 传参
xhr.send();

执行结果：

3、使用xhr发送post请求

//  POST 后台 表单格式的参数
// 创建异步请求对象
let xhr = new XMLHttpRequest();
// 绑定事件 当请求状态发生改变时 执行
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
          console.log(xhr.responseText)
   }
}
// 配置  请求方式 请求url地址  是否异步
xhr.open('POST', 'http://localhost:8080/dish/page',true);
// 表单格式参数
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求  如果是post 传参
xhr.send('page=1&pageSize=10');

执行结果：

4、post方式发送json

// 创建异步请求对象
let xhr = new XMLHttpRequest();
//绑定事件 当请求状态发生改变时 执行
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText)
    }
}
//配置    请求方式   请求的URL  是否异步 true
xhr.open('POST', 'http://localhost:8080/employee/login',true);
// 后台接受JSON 格式的参数
xhr.setRequestHeader("Content-type","application/json")
//发送请求  如果是post  传参
xhr.send(JSON.stringify({"username":"root","password":123456}));

执行结果：