JS 中 URL 编码的问题.

news/2024/6/24 16:04:15

URL 编码

为什么要对 URL 编码

1. 避免解析错误

我们的 queryString 的形式是使用 ?开始, key=value 传递参数, key-value pairs 之间使用 & 连接.
比如:

?postid=5038412&t=1450591802326

服务器会

根据 & 解析 key-value pairs
根据 = 解析 key,value

那么如果 key或者 value 中存在 =,&, 那么就会解析挂掉,
比如 宝洁公司叫做 P&G


?name=P&G&t=123456

服务器解析的时候就会解析错误:


name=P
G     //到这里就挂掉了

2. 避免非法字符

URL 只能使用 ASCII 字符集, 所有的非 ASCII 码都算是非法字符.
在这个定义中, 所有的中文都算是非法字符.

URL 的编码规则

一般使用的是 百分号编码(percent-encoding)

规则:

是否是 ASCII 字符是取对应的字节编号, 比如 'a' 对应的是 '0x61', 那么编码之后就是 %61否使用 utf-8 对其进行编码比如"中文"使用UTF-8字符集得到的字节为 0xE4 0xB8 0xAD 0xE6 0x96 0x87,经过Url编码之后得到"%E4%B8%AD%E6%96%87".

实际情景

浏览器会默认给 URL 编码, 但是不同浏览器的编码实现方式不一致, 所以最好的方式就是:
我们自己通过 JS 对 URL 进行编码

JS 用来编码的函数有 3 个:

// escape()  // 不推荐使用, 原因不明.
encodeURI()
encodeURIComponent()

encodeURI 会对整个 URL 中的非法字符编码 (它是为了解决非法字符)
encodeURIComponent 会对所有的保留字都编码 (解决解析错误的问题)

所以最终的编码方式是:

  1. 对每一个 key-value 进行 encodeURIComponent 编码

  2. 对整个 URL 进行 encodeURI 编码

备注:
URL 中的字符可以分成三类:
保留字符 (reserved characters):
这类字符是URI中的保留关键字符,它们用于分割URI中的各个部分。
这些字符是: ;, /, ?, :, @, &, =, +, $, ,
Mark字符 (mark characters)
这类字符在RFC-2396中特别定义,但是没有特别说明用途,可能是和别的RFC标准相关。
这些字符是:-, _, ., !, ~, *, ', (, )
普通字符

URL 编码解码的问题
既然浏览器会默认给 URL 进行编码, 那么服务器就会默认给URL 解码。
如果我们仅仅是对 URL 进行 encodeURI, 那么服务器在解码的时候可以正常, 但是解析的时候依旧不能
区分 & 到底是分割符还是 value 中的一个普通字符, 所以我们需要对 key-value pairs 进行编码的.

最终结论
使用 encodeURIComponent 避免参数解析错误
使用 encodeURI 避免非法字符


http://lihuaxi.xjx100.cn/news/240436.html

相关文章

初创企业股权架构_初创企业如何以每月不到200美元的价格利用生产级基础架构...

初创企业股权架构Before you can launch a new service, you need infrastructure. You want reliability, scalability, and many other -ilities. But you don’t want to break the bank.在启动新服务之前,您需要基础架构。 您需要可靠性,可伸缩性和许…

Web APi之消息处理管道(五)

前言 MVC有一套请求处理的机制,当然Web API也有自己的一套消息处理管道,该消息处理管道贯穿始终都是通过HttpMessageHandler来完成。我们知道请求信息存在 RequestMessage 中,而响应信息则存在 ResponseMessage 中,当请求信息进入…

国家智慧城市战略实施 保温材料等建材万亿市场待挖掘

近年来,国家多部委联合发布《国家新型城镇化规划(2014—2020)》《关于促进智慧城市健康发展的指导意见》,提出到2020年建成一批特色鲜明的智慧城市。国家智慧城市建设与发展上升为国家战略。2014年中国智慧城市的市场规模达到800多亿元,其中不…

static interface method calls are not supported at language level 1.6

报错解决(导入项目时) 点击那个红色的小灯泡 下面的那行: set language to … 等待 即可

上传代码到git上的分支(协同开发)

任意位置右键单击 git bash,输入命令如下: git config --global user.name "用户名" (用户名就是gitlab上的用户名,我的是名字拼音)git config --global user.email "邮箱" (注册gitlab时的邮箱&…

欧盟剑指科技巨头,意欲上调税款

科技公司和税收之间的博弈, 在欧盟早已是一场台面上的战争。 雷锋网了解到,最近法国、德国、意大利和西班牙四国的的财政部长联名致信欧盟轮值主席和欧盟委员会,要求对科技巨头的收入征税,而不仅仅只是利润部分征税。 此外&#x…

轻有力读后感ppt_如果您希望招聘人员认真对待您,请建立强有力的个人叙述。...

轻有力读后感pptby Garreth Dottin通过Garreth Dottin 如果您希望招聘人员认真对待您,请建立强有力的个人叙述。 (If you want recruiters to take you seriously, build a strong personal narrative.) We’ve all been there. Hunched over a desk. Scrolling th…

全球SDN测试认证中心发布OpenDaylight测试报告

随着软件定义网络(Software Defined Network, SDN)商业部署速度地加快,关乎整个SDN 网络性能表现的控制平面核心组件——SDN 控制器也越来越成为网络用户关心的焦点。日前,天地互连-全球SDN测试认证中心(SDNCTC,www.sdnctc.com)正…