最通俗易懂解释——编码解码

概念理解

编码解码

编码

编码：把使用者能看懂的数据转化成程序可以读懂的数据；

解码

解码：把程序可以读懂的数据转换成使用者能看懂的数据；

URI (Uniform Resource Identifier)

1. A URI (Uniform Resource Identifier) is a string that refers to a resource.
2. URI(统一资源标识符)是一个指向资源的字符串
3. URI可视为URL或者URN或者两者兼有。

1. URI构成

按照 URI 标准，http://www.cisco.com/en/US/partners/index.html —— 实际上是一个 URI，并且它由以下三部分组成：

1. 方案名 (http)
2. 域名 (www.cisco.com)
3. 路径 (/en/US/partners/index.html)

2. URI示例

ftp://ftp.is.co.za/rfc/rfc1808.txt
http://www.ietf.org/rfc/rfc2396.txt
ldap://[2001:db8::7]/c=GB?objectClass?one
mailto:[email protected]
news:comp.infosystems.www.servers.unix
tel:+1-816-555-1212
telnet://192.0.2.16:80/
urn:oasis:names:specification:docbook:dtd:xml:4.1.2

注意：www.yahoo.com/sports不是一个真正的URI，它只是对
http://www.yahoo.com/sports 的一种简写，是一种受流行的
web浏览器用户界面支持的格式；

3. 相对URI与绝对URI

绝对的URI指以scheme（后面跟着冒号）开头的URI。

可以把绝对的URI看作是以某种方式引用某种资源，而这种方式对标识符出现的环境没有依赖。如果使用文件系统作类比，绝对的URI类似于从根目录开始的某个文件的径。

http://域名
mailto:[email protected]
news:地址
xyz://whatever

相对的URI不是以scheme（后面跟着冒号）开始的URI。

可以把相对的URI看作是以某种方式引用某种资源，而这种方式依赖于标识符出现的环境。如果用文件系统作类比，相对的URI类似于从当前目录开始的文件路径。

articles/articles.html
../icons/logo.gif
../文件D

• URL (Uniform Resource Locator)

1. Uniform Resource Locator (URL) is a text string specifying where a resource can be found on the Internet.
2. URL 通常用来指定Web上资源文件的具体位置。
3. In the context of HTTP,URLs are called “Web address” or “link”
4. URLs can also be used for file transfer (FTP) , emails (SMTP), and other applications.

1. URL构成

URL格式由下列三部分组成：

1. 协议/服务方式
2. 主机IP地址（有时候也包括端口号）
3. 主机资源的具体地址，如目录、文件名等
   第一部分和第二部分之间用“ : // ”隔开，第二部分和第三部分之间用“/”隔开。第一部分和第二部分不可缺少，第三部分可以省略。

2. URL示例

ftp://ftp.is.co.za/rfc/rfc1808.txt

3. URL缺点

URL 表示的是实际的地址，而不是准确的名字。这就意味着 URL 会告诉你资源此时处于什么位置，它会为你提供特定端口上特定服务器的名字，告诉你在何处可以找到这个资源。这种方案的最大弊端在于，如果资源被移走了，URL 也就不再有效了。那时，它就无法对对象进行定位了。

• URN (Uniform Resource Name)

1. URN (Uniform Resource Name) is a URI in a standard format, referring to a resource without specifying its location or whether it exists.
2. URN(统一资源名)是标准格式的URI，指的是资源，而不指定其位置或是否存在。
3. URN是作为特定内容的唯一名称使用的，通过URN就可以用同一个名字通过多种网络访问协议来访问资源；
4. 作为标识唯一书目的ISBN系统就是典型的URN适用范本；
   

• URI URL URN联系区别

1. A URI can be further classified as a locator, a name, or both. The term “Uniform Resource Locator” (URL) refers to the subset of URIs that, in addition to identifying a resource, provide a means of locating the resource by describing its primary access mechanism(e.g., its network “location”). The term “Uniform Resource Name”(URN) has been used historically to refer to both URIs under the “urn” scheme [RFC2141], which are required to remain globally unique and persistent even when the resource ceases to exist or becomes unavailable, and to any other URI with the properties of a name.
   An individual scheme does not have to be classified as being just one of “name” or “locator”. Instances of URIs from any given scheme may have the characteristics of names or locators or both, often depending on the persistence and care in the assignment of identifiers by the naming authority, rather than on any quality of the scheme. Future specifications and related documentation should use the general term “URI” rather than the more restrictive terms “URL” and “URN” [RFC3305].
   URI 可以进一步分为定位器、名称，或者二者兼具。术语“Uniform Resource Locator” (URL) 涉及的是 URI 的子集，除识别资源外，它还通过描述其最初访问机制（比如它的网络“位置”）来提供定位资源的方法。 术语“Uniform Resource Name” (URN) 在历史上曾用于引用“urn”方案 [RFC2141] 下的 URI，这个 URI 需要是全球惟一的，并且在资源不存在或不再可用时依然保持不变，对于其他任何拥有名称的一些属性的 URI，都需要使用这样的 URI。
   对于单独的方案，没有必要将其分为仅仅是一个 “名称”或者是一个“定位器”。 来自任意特定方案的 URI 实例可能有名称或定位器的特征，或两者兼而有之， 这通常取决于标识符分配中的持久性和命名机构对其关注程度， 而不取决于其他方案的质量。未来的规范和相关的文档应当使用通用术语“URI”，而不是使用有更多限制的条目“URL”和“URN” [RFC3305]。

Web编码

参考从原理上搞定编码（二）-- Web编码所写

html页面编码

当浏览器请求一个静态html页面时，服务器会将html页面的字节流通过网络传输给浏览器，浏览器再将字节流解码成相应的html文本字符，然后将html渲染出来。

此流程中浏览器如何判断用什么编码格式去解码呢？

在html的head标签中会有一个meta标签，charset属性如果指定为“UTF-8”浏览器就会用UTF-8解码html页面。
问题是在浏览器解析< meta />标签获取页面编码前，浏览器是用什么解析< meta />标签的呢？
因为html开头都是字母，基本不会存在ASCII码之外的字符，所以识别起来还是有难度的。

测试代码，第5行和第6行，会根据不同的测试条件分别打开注释，具体打开哪个后边会有提示。

    
    
    
    
    



    
Get 请求
    

        
        
    
    
Post 请求
    

        
        
    

IDE是VS Code,浏览器是Chrome。项目结构如下，其中有两个html页面，"h5-编码UTF8.html"页面用utf-8编码存储，"h5-编码GBK.html"页面用GBK编码存储。两个页面的html代码都是上边给出的html代码。

实验一： 在utf-8编码的html页面中指定不同的编码格式

启动项目，用浏览器打开"h5-编码UTF8.html"的url，如下图所示，可以看出浏览器解析到标签中的utf-8编码，并用utf-8解码html页面，页面正确显示，如下图所示。

如果在标签中指定页面编码为GBK，那么浏览器就用GBK解码，肯定就不能正确显示页面了，如下图所示，页面中文出现乱码。

所以如果想避免乱码的话，必须保证编解码格式统一。

实验二： 不指定页面编码的情况下测试不同的编码页面

浏览器会根据文件的编码类型来选用对应的解码类型；

实验三： 在一个html页面中指定两个不同的编码

追加一点js代码

html中追加：


 
js文件内容：
document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('test').innerHTML="
我是中华小能手!
";
})

从图中可以看出：

1. 如果出现多个编码以第一个出现的为主。（两个< meta />标签）
2. script标签的charset属性，决定了浏览器去加载完js，解析字节流时用的编码,如果script未设定charset属性，跟着页面的编码走；

结论：编码的确认优先级

1. User browser setting
   如果用户指定了编码，则按用户指定的编码进行解码。

2. Byte order mark
   先对文件进行预解析，如果文件存在BOM（Byte Order Mark），则按BOM确定的编码解码。

3. HTTP header
   如果HTTP响应头中存在编码信息，则按响应头中的编码进行解码。

4. or depending on attribute order.

   先按浏览器的编码选择算法选择一个编码进行预解析，如果解析出标签中存在字符集设置，则按标签中的字符集进行解码。

5. Browser default for the locale.
   按浏览器的默认编码

常用API

• characterSet

语法：document.characterSet
用法：只读属性，返回当前文档的字符编码；

window.document.characterSet
// "UTF-8"

• encodedURI(URI)

语法：encodedURI(URI)
用法：

1. encodedURI(URI)中的参数URI要是一个完整的URI，返回值是一个新字符串，表示提供的字符串编码为URI。即此方法适用于对整个URI统一进行编码处理，且携带的参数里明确不带有不可编码且容易引起歧义的字符，如果存在，需要使用encodeURIComponent
2. encodeURI会替换所有的字符，但不包括以下字符：
   字母 数字 - _ . ! ~ * ’ ( ) ; , / ? : @ & = + $ #

encodeURI('http://tingshuo\//about{what}')
// "http://tingshuo%3Cwhat%3E//about%7Bwhat%7D"

encodeURI('http://tingshuo\//about{what}?comment=Thyme &time=again')
// "http://tingshuo%3Cwhat%3E//about%7Bwhat%7D?comment=Thyme%20&time=again"
// 参数param的值本来为“Thyme &time=again”，结果因为“&”和“="符号不可
以编码，产生了一个新的键值对，所以服务器得到两个键值对（一个键值对
是comment=Thyme，另一个则是time=again），而不是一个键值对。

• encodeURIComponent(str)

语法：encodeURIComponent(str)
用法：

1. 对URI的组成部分进行编码。
2. encodeURIComponent会替换所有的字符，但不包括以下字符：字母 数字 ( ) . ! ~ * ’ - _

'http://tingshuo\//about{what}?comment='+encodeURIComponent('Thyme &time=again')
// "http://tingshuo//about{what}?comment=Thyme%20%26time%3Dagain"

• decodeURI(encodedURI)

语法：decodeURI(encodedURI)
用法：
decodedURI(URI)中的参数URI要是一个完整的编码过的URI，返回值是将已编码URI中所有能识别的转义序列转换成原字符；

• decodeURIComponent(encodedStr)

语法：decodeURIComponent(encodedStr)
用法：
decodeURIComponent(encodedStr)中的参数encodedStr是编码后的部分URI，返回值是将已编码URI中所有能识别的转义序列转换成原字符；

• escape（已废弃）

请使用encodeURI和encodeURICompent代替

参考

从 URI 开始 #10
分清 URI、URL 和 URN