[Web] URL 与 URL 中的编码方式

1. 概念
URL (Uniform Resource Locator) 地址用于描述一个网络上的资源
URI 是统一资源标识, 的 URL 只是 URI 的一种

1-1. 基本格式
schema://host[:port#]/path/.../[;url-params][?query-string][#anchor]
scheme: 低层使用的协议 (http, https, ftp 等)
host: http 服务器的 ip 地址或域名
port#: http 服务器的默认端口 80 (可以省略), 如果使用了别的端口, 必须指明
path: 访问资源的路径
url-params:
query-string:  发送给 http 服务器的数据
#anchor: 锚

1-2. 实例
http://www.sample.com/hello/test;id=1000?name=foo&x=bar#stuff
Schema: http
host: www.sample.com
path: /hello/test
URL params: id=1000
Query String: name=foo&x=bar
Anchor: stuff

2. URL 编码方式

2-1. 网址路径中包含汉字
http://www.baidu.com/春节 => %E6%98%A5%E8%8A%82
网址路径的编码, 用 utf-8 编码方式

2-2. 查询字符串包含汉字
http://www.baidu.com/s?wd=春节 => %B4%BA%BD%DA
查询字符串的编码, 用操作系统的默认编码

2-3. html form 的 action 方法生成的 URL 包含汉字
get 和 post 方法的编码, 由 HTML 源码中字符集 (网页编码) 决定
<meta http-equiv="Content-Type" content="text/html;charset=xxx">

2-4. Ajax 调用的 URL 包含汉字
由 Ajax 生成 http 请求, IE 总是采用操作系统的默认编码, 而 Firefox 总是采用 utf-8 编码

2-5. 客户端统一编码的解决方法
使用 Javascript 先对 URL 编码, 然后再向服务器提交, 不使用浏览器编码, 保证服务器得到的数据格式统一

Javascript 语言用于编码的函数
2-5-1. escape(), unescape()
不能直接用于 URL 编码, 返回一个字符的 Unicode 编码值

规则:
除 ASCII 字母, 数字, 标点符号 @ * _ + - . / 以外, 对其他所有字符进行编码
在 \u0000 到 \u00ff 之间的符号被转成 %xx 的形式, 其余符号被转成 %uxxxx 形式

escape("Hello World") -> Hello%20World
escape("春节") -> %u6625%u8282
escape("\u6625\u8282") -> %u6625%u8282
unescape("%u6625%u8282") -> 春节
unescape("\u6625\u8282") -> 春节

注意:
无论网页的原始编码是什么, 一旦被 Javascript 编码, 就都变为 unicode 字符, javascipt 函数的输入和输出默认都是 Unicode 字符
escape() 不对 + 编码, 但是网页在提交表单的时候, 如果有空格则会被转化为 + 字符, 服务器处理数据的时候, 会把 + 号处理成空格

2-5-2. encodeURI(), decodeURI()
Javascript 中用来对 URL 编码的函数
对整个 URL 进行编码, 除常见的符号以外, 对其他一些在网址中有特殊含义的符号 ; / ? : @ & = + $ , # 也不进行编码, 编码后, 输出符号的 utf-8 形式, 并在每个字节前加上%, 不对单引号 ' 编码

encodeURI("http://localhost/app.jsp?arg1=aaa&arg2=hello world")
-> http://localhost/app.jsp?arg1=aaa&arg2=hello%20world

2-5-3. encodeURIComponent()
对 URI 的组成部分进行个别编码, 而不用于对整个 URL 进行编码, ; / ? : @ & = + $ , # 在 encodeURI() 中不被编码的符号, 在 encodeURIComponent() 中会被编码, 编码方式与 encodeURI() 相同