您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

前后端数据传输不得不面对的转码问题

时间:2019-09-09 11:32:50  来源:  作者:

数据传递转码

数据在传输的过程中,浏览器会对数据进行编码,假如我现在有一条数据 {"name": "测试"},如果我们通过 get 方法传递数据,这条数据会被拼接到 url 请求的后面,如:localhost:8080/src/text.html?name=测试。

uri本身是采用ASCII编码的,所以如果是非 ASCII 编码集的字符在传输时都会被编码,编码方法和 encodeURI 的编码规则相同,但是这里的编码规则是由浏览器控制的,不同的浏览器采用的编码方式 (UTF-8,GBK) 不一样,被编码的数据发送给服务器,服务器用 iso-8859-1 编码对数据解码,后端人员通过 request.getParameter("name") 获取参数数据,且获得的数据都是经过解码过的,而解码过程中程序里无法指定,对于 get 请求获得的数据 request.setCharacterEncoding("字符集") 指定解码规则无效。

如果是 post 方法传递数据,浏览器也会对数据进行编码,如果我们在 ajax 请求头里面设置了 setRequestHeader("ContentType","Application/x-www-form-urlencoded;charset=UTF-8"); 浏览器就会以charset值进行编码,如果没有设置则由网页 meta 标签的 charset 属性决定,被编码过的数据发送给服务器,服务器用 iso-8859-1 编码对数据解码,对于post请求发来的数据后端人员可以使用 request.setCharacterEncoding("字符集") 指定解码规则。

相信你已经找出了乱码的原因,由于 get 方法传的的数据,浏览器的转码规则和服务器的解码规则不一致出现了乱码,我们一般是怎么解决的呢?get 方式发送的数据如果有中文和特殊字符前端会先使用 encodeURI() 方法转码,这样 url 里面的就都是 ASCII 编码集的字符,省去了浏览器的转码,且 encodeURI() 的转码规则可控,受网页 meta 头的 charset 属性影响,

  1. 标签的 charset 属性为 utf-8 时:
var data = '百度&%$#@baidu';
console.log(encodeURI(data));
// %E7%99%BE%E5%BA%A6&%25$#@baidu
console.log(encodeURIComponent(data));
// %E7%99%BE%E5%BA%A6%26%25%24%23%40baidu
  1. 标签的 charset 属性为 GBK 时:
var data = '百度&%$#@baidu';
console.log(encodeURI(data));
// %E9%90%A7%E6%83%A7%E5%AE%B3&%25$#@baidu
console.log(encodeURIComponent(data));
// %E9%90%A7%E6%83%A7%E5%AE%B3%26%25%24%23%40baidu

后端人员获取到用iso-8859-1解码后的数据一般先还原回字节码,然后用前后端协定的方式解码数据,还可以在服务器的配置文件里面进行配置解码规则。而post请求发送的数据可以使用request.setCharacterEncoding("字符集")指定解码规则来达到前后端转码统一。

当我们需要传递的数据量大,结构复杂,业务场景,技术实现需要的时候我们就又会发现,乱码的问题依然存在,比如

  • json格式的数据由于特殊字符导致数据解析出现问题,
  • xml格式数据由于特殊字符破坏xml格式导致数据解析出现问题,
  • 前后端一些语言自带的转码方法对一些特殊字符转码结果不一致,以及并非所有特殊字符都会被转码...

如果我们使用 encodeURI 或者 encodeURIComponent 编码传输到后端,后端解码之后的数据总会因为一些特殊字符的转码不一致导致结果不一样,如果再加上 md5 校验之类的,前端传递的数据就会因为 md5 不同无法解析入库。

那么这个时候我们就该考虑有没有一种转码规则可以解决以上所有的问题呢?base64 转码你值得拥有。

base64转码

base64 编码是从二进制到字符的过程,编码受 html 页面头部 mate;标签的 charset 属性影响,charset 属性不同,编码转为二进制时,产生的二进制也是不一样的,所以最终产生的 base64 字符也不一样。

  1. mate 标签的 charset 属性为 utf-8 时:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>base64</title>
</head>
<body>
<script src="base64.min.js"></script>
<script>
var data = '百度&%$#@baidu';
console.log(base64encode(data));
// fqYmJSQjQGJhaWR1
</script>
</body>
  1. mate 标签的 charset 属性为 GBK 时:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GBK">
<title>base64</title>
</head>
<body>
<script src="base64.min.js"></script>
<script>
var data = '百度&%$#@baidu';
console.log(base64encode(data));
// J+ezJiUkI0BiYWlkdQ==
</script>
</body>

有关 base64 转码原理有兴趣可自行百科。

总结

所以工作中如果涉及到文本框输入等复杂的内容数据传递为了避免中文乱码以及各种特殊符号带来的困扰就使用 base64 转码传递。 如果只是URL里面的传递简单的参数可以使用 encodeURI 和 encodeURIComponent 等转码。

希望本文能帮助到您!

点赞+转发,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓-_-)

关注 {我},享受文章首发体验!

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”

原文链接:http://eux.baidu.com/blog/fe/%E5%89%8D%E5%90%8E%E7%AB%AF%E6%95%B0%E6%8D%AE%E4%BC%A0%E8%BE%93%E4%B8%8D%E5%BE%97%E4%B8%8D%E9%9D%A2%E5%AF%B9%E7%9A%84%E8%BD%AC%E7%A0%81%E9%97%AE%E9%A2%98

作者:v-guoyunan



Tags:数据传输   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
企业VPN应用场景 场景介绍:如图为一企业vpn应用场景,总部出口为一台AD交付设备,分支结构出口为一台AC(上网行为管理设备),现用一数据包分析分支PC2访问HTTP服务器,数据包的走向及...【详细内容】
2020-04-16   数据传输  点击:(20)  评论:(0)  加入收藏
一、基本结构先看架构图 框架.png二、设备端接入物联网终端是用的ESP32,是一款自带蓝牙和Wifi的单片机。利用它可以直接接入互联网,无需其他模块。当然你可以将现在流行的NB-I...【详细内容】
2020-03-23   数据传输  点击:(5)  评论:(0)  加入收藏
引言 在日常开发中我们对HTTP数据传输并不陌生,前端需要与后端进行数据交互往往需要调用后端某个API,然而在前端与后端的请求过程中数据真的安全吗?下面了解一件关于0.01购买...【详细内容】
2020-03-08   数据传输  点击:(7)  评论:(0)  加入收藏
以太网交换机拥有一条很高带宽的背部总线和内部交换矩阵,交换机的所有端口都挂接在这条背部总线上。在交换机的存储器中,存放着一个端口号和以太网地址对照表,当交换机控制电路...【详细内容】
2020-02-21   数据传输  点击:(19)  评论:(0)  加入收藏
以太网交换机拥有一条很高带宽的背部总线和内部交换矩阵,交换机的所有端口都挂接在这条背部总线上。在交换机的存储器中,存放着一个端口号和以太网地址对照表,当交换机控制电路...【详细内容】
2020-02-21   数据传输  点击:(30)  评论:(0)  加入收藏
完全理解 HTTPS 如何做到传输安全原 作 者:fi3ework原文链接:https://github.com/fi3ework/blog/issues/17概念HTTPS:是以安全为目标的 HTTP 通道,简单讲是 HTTP 的安全版,即 HTT...【详细内容】
2020-01-22   数据传输  点击:(24)  评论:(0)  加入收藏
一、FTP客户端发送数据到FTP服务器端,详述其工作过程。两台机器的连接情况如下图所示: 详细解答如下1.1、假设初始设置如下所示:客户端FTP端口号为:32768服务器端FTP端口号为:21...【详细内容】
2019-10-09   数据传输  点击:(22)  评论:(0)  加入收藏
数据传递转码数据在传输的过程中,浏览器会对数据进行编码,假如我现在有一条数据 {"name": "测试"},如果我们通过 get 方法传递数据,这条数据会被拼接到 url 请求的后面,如:localho...【详细内容】
2019-09-09   数据传输  点击:(57)  评论:(0)  加入收藏
首先我们来回顾一下路由的基本概念,什么是路由?所谓路由就是当一台路由器(或其他三层设备)收到一个IP数据包时,路由器查看IP数据包的IP头部,将IP头部中的目的IP地址拿到路由表中进...【详细内容】
2019-06-20   数据传输  点击:(284)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条