URL中的特殊字符

朴灿烈づ我的快乐病毒、 2022-08-08 11:47 273阅读 0赞

在url中”+”,”/”,”?”,”%”,”\#”,”&”是有特殊意义的，被称为url的元字符。

# 1 url中的元字符 #

--------------------

url中元字符是不能直接传递的，如果要在url中传递这些元字符，必须使用百分号编码即%+字符的ASCII码。

<table> 
 <thead> 
  <tr> 
   <th>符号</th> 
   <th align="left">特殊含义</th> 
   <th>十六进制</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>+</td> 
   <td align="left">表示空格（在url中不能使用空格）</td> 
   <td>%20</td> 
  </tr> 
  <tr> 
   <td>/</td> 
   <td align="left">分割目录和子目录</td> 
   <td>%2F</td> 
  </tr> 
  <tr> 
   <td>？</td> 
   <td align="left">分割实际的URL和参数</td> 
   <td>%3F</td> 
  </tr> 
  <tr> 
   <td>%</td> 
   <td align="left">指定特殊字符</td> 
   <td>%25</td> 
  </tr> 
  <tr> 
   <td>#</td> 
   <td align="left">表示书签</td> 
   <td>%23</td> 
  </tr> 
  <tr> 
   <td>&amp;</td> 
   <td align="left">URL中指定的参数间的分隔符</td> 
   <td>%26</td> 
  </tr> 
 </tbody> 
</table>

# 2 url编码的基本规则 #

--------------------

*  变量之间用**“&”**分开；
 *  变量与其对应值用**“=”**连接；
 *  空格用**“+”**代替；
 *  保留的控制字符用**“%”**连接对应的**16**进制**ASCII**码代替；
 *  某些具有特殊意义的字符也用**“%”**连接对应的**16**进制**ASCII**码代替；
 *  空格是非法字符；
 *  任意不可打印的**ASCII**控制字符均为非法字符

例子：

// 三个参数：filename、e-mail、comments
    // 其中comments的值为：I'll be there for you
    
    http://xxx.com?filename=hello&e-mail=hello@htomail.com &comments=I%2ll+be+there+for+you

# 3 url中”\#” #

--------------------

10年9月，twitter改版。一个显著变化，就是URL加入了”\#!”符号。比如，改版前的用户主页网址为[http://twitter.com/username][http_twitter.com_username]改版后，就变成了[http://twitter.com/\#!/username][http_twitter.com_username 1]。这是主流网站第一次将”\#”大规模用于重要URL中。这表明井号（Hash）的作用正在被重新认识。本文根据HttpWatch的文章，整理与井号有关的所有重要知识点。

## \#的涵义 ##

\#代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，[http://www.example.com/index.html\#print][http_www.example.com_index.html_print]就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。  
　　  
为网页位置指定标识符，有两个方法。

*  一是使用锚点，比如

*  二是使用id属性，比如

## HTTP请求不包括`#` ##

\#是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包括\#。  
比如，访问下面的网址，[http://www.example.com/index.html\#print][http_www.example.com_index.html_print]，浏览器实际发出的请求是这样的：  
GET /index.html HTTP/1.1  
Host: www.example.com

## \#后的字符 ##

在第一个\#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。  
比如，下面URL的原意是指定一个颜色值：[http://www.example.com/?color=\#fff][http_www.example.com_color_fff]，但是，浏览器实际发出的请求是：  
GET /?color= HTTP/1.1  
Host: www.example.com

## 改变\#不触发网页重载 ##

单单改变\#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。比如，从[http://www.example.com/index.html\#location1][http_www.example.com_index.html_location1]改成[http://www.example.com/index.html\#location2][http_www.example.com_index.html_location2]，浏览器不会重新向服务器请求index.html。

## 改变\#会改变浏览器的访问历史 ##

每一次改变\#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置。这对于ajax应用程序特别有用，可以用不同的\#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。值得注意的是，上述规则对IE 6和IE 7不成立，它们不会因为\#的改变而增加历史记录。

## window.location.hash读取\#值 ##

window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。

## onhashchange事件 ##

这是一个HTML 5新增的事件，当\#值发生变化时，就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。

它的使用方法有三种：

window.onhashchange = func;
    <body onhashchange="func();">
    window.addEventListener("hashchange"， func, false);

对于不支持onhashchange的浏览器，可以用setInterval监控location.hash的变化。

## Google抓取\#的机制 ##

默认情况下，Google的网络蜘蛛忽视URL的\#部分。

但是，Google还规定，如果你希望Ajax生成的内容被浏览引擎读取，那么URL中可以使用”\#!”，Google会自动将其后面的内容转成查询字符串*escaped\_fragment*的值。

比如，Google发现新版twitter的URL：[http://twitter.com/\#!/username][http_twitter.com_username 1]就会自动抓取另一个URL：escaped\_fragment=/username”>http://twitter.com/?*escaped\_fragment*=/username  
　　  
通过这种机制，Google就可以索引动态的Ajax内容。

**注：**  
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。AJAX 是一种用于创建快速动态网页的技术。

**引用**：[http://www.cnblogs.com/kaituorensheng/p/3776527.html][http_www.cnblogs.com_kaituorensheng_p_3776527.html]

[http_twitter.com_username]: http://twitter.com/username
[http_twitter.com_username 1]: http://twitter.com/#!/username
[http_www.example.com_index.html_print]: http://www.example.com/index.html#print
[http_www.example.com_color_fff]: http://www.example.com/?color=#fff
[http_www.example.com_index.html_location1]: http://www.example.com/index.html#location1
[http_www.example.com_index.html_location2]: http://www.example.com/index.html#location2
[http_www.cnblogs.com_kaituorensheng_p_3776527.html]: http://www.cnblogs.com/kaituorensheng/p/3776527.html