repo-关于URL编码

repost 4 http://www.ruanyifeng.com/blog/2010/02/url_encoding.html

 

一、问题的由来

URL就是网址,只要上网,就一定会用到。

bg2010021101.jpg

一般来说,URL只能使用英文字母、阿拉伯数字和某些标点符号,不能使用其他文字和符号。比如,世界上有英文字母的网址"http://www.abc.com",但是没有希腊字母的网址"http://www.aβγ.com"(读作阿尔法-贝塔-伽玛.com)。这是因为网络标准RFC 1738做了硬性规定:

"...Only alphanumerics [0-9a-zA-Z], the special characters "$-_.+!*'()," [not including the quotes - ed], and reserved characters used for their reserved purposes may be used unencoded within a URL."

"只有字母和数字[0-9a-zA-Z]、一些特殊符号"$-_.+!*'(),"[不包括双引号]、以及某些保留字,才可以不经过编码直接用于URL。"

这意味着,如果URL中有汉字,就必须编码后使用。但是麻烦的是,RFC 1738没有规定具体的编码方法,而是交给应用程序(浏览器)自己决定。这导致"URL编码"成为了一个混乱的领域。

下面就让我们看看,"URL编码"到底有多混乱。我会依次分析四种不同的情况,在每一种情况中,浏览器的URL编码方法都不一样。把它们的差异解释清楚之后,我再说如何用Javascript找到一个统一的编码方法。

二、情况1:网址路径中包含汉字

打开IE(我用的是8.0版),输入网址"http://zh.wikipedia.org/wiki/春节"。注意,"春节"这两个字此时是网址路径的一部分。

bg2010021102.jpg

查看HTTP请求的头信息,会发现IE实际查询的网址是"http://zh.wikipedia.org/wiki/%E6%98%A5%E8%8A%82"。也就是说,IE自动将"春节"编码成了"%E6%98%A5%E8%8A%82"。

bg2010021103.png

我们知道,"春"和"节"的utf-8编码分别是"E6 98 A5"和"E8 8A 82",因此,"%E6%98%A5%E8%8A%82"就是按照顺序,在每个字节前加上%而得到的。(具体的转码方法,请参考我写的《字符编码笔记》。)

在Firefox中测试,也得到了同样的结果。所以,结论1就是,网址路径的编码,用的是utf-8编码。

三、情况2:查询字符串包含汉字

在IE中输入网址"http://www.baidu.com/s?wd=春节"。注意,"春节"这两个字此时属于查询字符串,不属于网址路径,不要与情况1混淆。

bg2010021104.jpg

查看HTTP请求的头信息,会发现IE将"春节"转化成了一个乱码。

bg2010021105.png

切换到十六进制方式,才能清楚地看到,"春节"被转成了"B4 BA BD DA"。

bg2010021106.png

我们知道,"春"和"节"的GB2312编码(我的操作系统"Windows XP"中文版的默认编码)分别是"B4 BA"和"BD DA"。因此,IE实际上就是将查询字符串,以GB2312编码的格式发送出去。

Firefox的处理方法,略有不同。它发送的HTTP Head是"wd=%B4%BA%BD%DA"。也就是说,同样采用GB2312编码,但是在每个字节前加上了%。

bg2010021107.png

所以,结论2就是,查询字符串的编码,用的是操作系统的默认编码。

四、情况3:Get方法生成的URL包含汉字

前面说的是直接输入网址的情况,但是更常见的情况是,在已打开的网页上,直接用Get或Post方法发出HTTP请求。

根据台湾中兴大学吕瑞麟老师的试验,这时的编码方法由网页的编码决定,也就是由HTML源码中字符集的设定决定。

  <meta http-equiv="Content-Type" content="text/html;charset=xxxx">

如果上面这一行最后的charset是UTF-8,则URL就以UTF-8编码;如果是GB2312,URL就以GB2312编码。

举例来说,百度是GB2312编码,Google是UTF-8编码。因此,从它们的搜索框中搜索同一个词"春节",生成的查询字符串是不一样的。

百度生成的是%B4%BA%BD%DA,这是GB2312编码。

bg2010021109.jpg

Google生成的是%E6%98%A5%E8%8A%82,这是UTF-8编码。

bg2010021108.jpg

所以,结论3就是,GET和POST方法的编码,用的是网页的编码。

五、情况4:Ajax调用的URL包含汉字

前面三种情况都是由浏览器发出HTTP请求,最后一种情况则是由Javascript生成HTTP请求,也就是Ajax调用。还是根据吕瑞麟老师的文章,在这种情况下,IE和Firefox的处理方式完全不一样。

举例来说,有这样两行代码:

  url = url + "?q=" +document.myform.elements[0].value; // 假定用户在表单中提交的值是"春节"这两个字

  http_request.open('GET', url, true);

那么,无论网页使用什么字符集,IE传送给服务器的总是"q=%B4%BA%BD%DA",而Firefox传送给服务器的总是"q=%E6%98%A5%E8%8A%82"。也就是说,在Ajax调用中,IE总是采用GB2312编码(操作系统的默认编码),而Firefox总是采用utf-8编码。这就是我们的结论4。

六、Javascript函数:escape()

好了,到此为止,四种情况都说完了。

假定前面你都看懂了,那么此时你应该会感到很头痛。因为,实在太混乱了。不同的操作系统、不同的浏览器、不同的网页字符集,将导致完全不同的编码结果。如果程序员要把每一种结果都考虑进去,是不是太恐怖了?有没有办法,能够保证客户端只用一种编码方法向服务器发出请求?

回答是有的,就是使用Javascript先对URL编码,然后再向服务器提交,不要给浏览器插手的机会。因为Javascript的输出总是一致的,所以就保证了服务器得到的数据是格式统一的。

Javascript语言用于编码的函数,一共有三个,最古老的一个就是escape()。虽然这个函数现在已经不提倡使用了,但是由于历史原因,很多地方还在使用它,所以有必要先从它讲起。

实际上,escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值。比如"春节"的返回结果是%u6625%u8282,也就是说在Unicode字符集中,"春"是第6625个(十六进制)字符,"节"是第8282个(十六进制)字符。

bg2010021110.png

它的具体规则是,除了ASCII字母、数字、标点符号"@ * _ + - . /"以外,对其他所有字符进行编码。在\u0000到\u00ff之间的符号被转成%xx的形式,其余符号被转成%uxxxx的形式。对应的解码函数是unescape()。

所以,"Hello World"的escape()编码就是"Hello%20World"。因为空格的Unicode值是20(十六进制)。

bg2010021111.png

还有两个地方需要注意。

首先,无论网页的原始编码是什么,一旦被Javascript编码,就都变为unicode字符。也就是说,Javascipt函数的输入和输出,默认都是Unicode字符。这一点对下面两个函数也适用。

bg2010021112.png

其次,escape()不对"+"编码。但是我们知道,网页在提交表单的时候,如果有空格,则会被转化为+字符。服务器处理数据的时候,会把+号处理成空格。所以,使用的时候要小心。

七、Javascript函数:encodeURI()

encodeURI()是Javascript中真正用来对URL编码的函数。

它着眼于对整个URL进行编码,因此除了常见的符号以外,对其他一些在网址中有特殊含义的符号"; / ? : @ & = + $ , #",也不进行编码。编码后,它输出符号的utf-8形式,并且在每个字节前加上%。

bg2010021113.png

它对应的解码函数是decodeURI()。

bg2010021114.png

需要注意的是,它不对单引号'编码。

八、Javascript函数:encodeURIComponent()

最后一个Javascript编码函数是encodeURIComponent()。与encodeURI()的区别是,它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。

因此,"; / ? : @ & = + $ , #",这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码。至于具体的编码方法,两者是一样。

bg2010021115.png

它对应的解码函数是decodeURIComponent()。

(完)

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/330278.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring零配置之@Configuration注解详解

转载自 Spring零配置之Configuration注解详解 Configuration介绍 Spring3.0之前要使用Spring必须要有一个xml配置文件&#xff0c;这也是Spring的核心文件&#xff0c;而Spring3.0之后可以不要配置文件了&#xff0c;通过注解Configuration完全搞定。 Configuration即用来代替S…

session实现购物车

1、是什么&#xff1f; session 可以存储会话级变量&#xff0c;基于其实现购物车&#xff1b; 2、为什么&#xff1f; session是会话级变量&#xff0c;可以吧多次请求的数据串联起来&#xff0c;放到会话里&#xff1b; 3、怎么做&#xff1f; 【荔枝】转自 张孝祥 登录…

commons-logging,log4j,logback,slf4j之间的关系详解

转载自 commons-logging,log4j,logback,slf4j之间的关系详解commons-logging是apache最早提供的日志的门面接口。它的主要作用是提供一个日志门面&#xff0c;使用者可以使用不同的日志实现。用户可以自由选择第三方的日志组件作为具体实现&#xff0c;像log4j&#xff0c;或者…

Vue代理配置

在 package.json 的同级目录&#xff08;项目根目录&#xff09;下创建 vue.config.js在 vue.config.js 写入下列内容 module.exports {devServer: {proxy: http://localhost:8080}}这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到 http://localhost:40…

@Resource,@Autowired,@Inject3种注入方式详解

转载自 Resource,Autowired,Inject3种注入方式详解 概况 Resource,Autowired,Inject 这3种都是用来注入bean的&#xff0c;它们属于不同的程序中。 ANNOTATIONPACKAGESOURCEResourcejavax.annotationJava JSR-250Injectjavax.injectJava JSR-330Autowiredorg.springframework.b…

repost-微信小程序入门教程之一:初次上手

repost 4 http://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-one.html 微信是中国使用量最大的手机 App 之一&#xff0c;日活跃用户超过3亿&#xff0c;月活跃用户超过11亿&#xff08;2019年底统计&#xff09;&#xff0c;市场极大。 2017年&#x…

Spring MVC : 概念模型 HandlerMethod(转载)

Spring MVC 应用启动时会搜集并分析每个 Web 控制器方法&#xff0c;从中提取对应的"<请求匹配条件,控制器方法>“映射关系&#xff0c;形成一个映射关系表保存在一个 RequestMappingHandlerMapping bean 中。然后在客户请求到达时&#xff0c;再使用 RequestMappin…

repo-话说软件详细设计工具

repost 4 https://blog.csdn.net/tang_huan_11/article/details/8043481 在软件设计是需要写软件详细说明书,设计此文档的时候,肯定少不了工具.现在我们就来了解一下软件详细设计的 工具. 1)程序流程图 程序流程图又称为程序框图,它是最古老,应用最广泛且最有争议描述详细设计的…

你必须了解Spring的生态

转载自 你必须了解Spring的生态 Spring不止是提供了IOC、AOP的功能&#xff0c;还提供了大量的基于Spring的项目&#xff0c;拿来用就行了&#xff0c;用于一站式开发&#xff0c;大大降低了开发的难度。 下面列举下主要的一些Spring的生态项目&#xff1a; Spring Boot&#…

Vue 使用 token

vue 解析 token 引入jwt-decode 包 npm install jwt-decode --save在 vue 中引入jwt-decode import jwtDecode from jwt-decodejs 中使用 const decode jwtDecode(token); console.log(decode);//解析后的对象vue-resource 设置请求头&#xff0c;带上token 第一种方法&a…

vmware安装centos6-步骤小结

【README】安装了很多次&#xff0c;但没有记录过&#xff0c;经常忘记&#xff0c;所以就记录一下 【1】 vm15 install centos8 at 2020/12/12 完成。

Ehcache介绍及整合Spring实现高速缓存

转载自 Ehcache介绍及整合Spring实现高速缓存 Ehcache介绍 EhCache 是一个纯Java的进程内缓存框架&#xff0c;具有快速、精干等特点&#xff0c;是Hibernate中默认的CacheProvider。它使用的是JVM的堆内存&#xff0c;超过内存可以设置缓存到磁盘&#xff0c;企业版的可以使用…

转:使用 Tkprof 分析 ORACLE 跟踪文件

【README】 昨天在验证oracle 数据库性能的时候&#xff0c;查询日志中 打出了 exec time , fetch time 不懂什么意思&#xff0c;所以就记录了下&#xff1b; A 表 680w&#xff0c; count 耗时5秒&#xff1b; B表 2013w&#xff0c; count 耗时10秒&#xff1b; A inne…

浅谈大型网站之负载均衡架构

转载自 浅谈大型网站之负载均衡架构 概念 负载均衡&#xff0c;英文名称为Load Balance&#xff0c;其意思就是分摊到多个操作单元上进行执行&#xff0c;例如Web服务器、FTP服务器、企业关键应用服务器和其它关键任务服务器等&#xff0c;从而共同完成工作任务。 负载均衡建立…

单词拆分

作者&#xff1a;xiao_ben_zhu 链接&#xff1a;https://leetcode-cn.com/problems/word-break/solution/shou-hui-tu-jie-san-chong-fang-fa-dfs-bfs-dong-tai/ 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 著作权归作者所有。商业转载请联系作者获得授权&#xff…

centos Error: Cannot find a valid baseurl for repo: base 解决方法

参考 https://arstech.net/centos-6-error-yumrepo-error-all-mirror-urls-are-not-using-ftp-http/ 【1】报错现场&#xff1b; 原因&#xff0c; 软件镜像地址有误&#xff0c;需要手工录入&#xff1b; 2、编辑文件&#xff0c; /etc/yum.repos.d/CentOS-Base.repo. 找到…

精选30道Java多线程面试题

转载自 精选30道Java多线程面试题 1、线程和进程的区别 2、实现线程有哪几种方式&#xff1f; 3、线程有哪几种状态&#xff1f;它们之间如何流转的&#xff1f; 4、线程中的start()和run()方法有什么区别&#xff1f; 5、怎么终止一个线程&#xff1f;如何优雅地终止线程&…

Vue 媒体处理(摄像头,截图,播放本地视频)

Vue 媒体处理&#xff08;摄像头&#xff0c;截图&#xff0c;播放本地视频&#xff09; 一. 打开摄像头 javascriptthis.constraint {// video属性设置video: {width: 300,height: 300,},// audio属性设置audio: true,}navigator.mediaDevices.getUserMedia(this.constrain…

how to install nc on centos8及nc应用

转自&#xff1a; https://linuxconfig.org/install-netcat-on-redhat-8 【README】 nc 是什么&#xff1f; nc&#xff0c;全名叫netcat&#xff0c;它可以用来完成很多的网络功能&#xff0c;譬如端口扫描、建立TCP/UDP连接&#xff0c;数据传输、网络调试等等&#xff0c…

大型网站架构利器-CDN技术

转载自 大型网站架构利器&#xff0d;CDN技术概念CDN这个概念相信大家都比较耳熟&#xff0c;到底什么是CDN呢&#xff1f;CDN&#xff0c;全称为Content Delivery Network&#xff0c;即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环…