URL中“#” “?” &“”号的作用浅析


Posted in Javascript onFebruary 04, 2017

1. #

    10年9月,twitter改版。一个显著变化,就是URL加入了"#!"符号。比如,改版前的用户主页网址为http://twitter.com/username改版后,就变成了http://twitter.com/#!/username

这是主流网站第一次将"#"大规模用于重要URL中。这表明井号(Hash)的作用正在被重新认识。本文根据HttpWatch的文章,整理与井号有关的所有重要知识点。

一、#的涵义

#代表网页中的一个位置。其右面的字符,就是该位置的标识符。比如,http://www.example.com/index.html#print就代表网页index.html的print位置。浏览器读取这个URL后,会自动将print位置滚动至可视区域。

为网页位置指定标识符,有两个方法。一是使用锚点,比如<a name="print"></a>,二是使用id属性,比如<div id="print">。

二、HTTP请求不包括#

#是用来指导浏览器动作的,对服务器端完全无用。所以,HTTP请求中不包括#。

比如,访问下面的网址,http://www.example.com/index.html#print,浏览器实际发出的请求是这样的:

GET /index.html HTTP/1.1
Host: www.example.com 

三、#后的字符

在第一个#后面出现的任何字符,都会被浏览器解读为位置标识符。这意味着,这些字符都不会被发送到服务器端。
比如,下面URL的原意是指定一个颜色值: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#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

就会自动抓取另一个URL:http://twitter.com/?_escaped_fragment_=/username

通过这种机制,Google就可以索引动态的Ajax内容。

 注

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

2. ?

1)连接作用:比如

http://www.xxx.com/Show.asp?id=77&nameid=2905210001&page=1

2)清除缓存:比如

http://www.xxxxx.com/index.html
http://www.xxxxx.com/index.html?test123123

两个url打开的页面一样,但是后面这个有问号,说明不调用缓存的内容,而认为是一个新地址,重新读取。

3. &

不同参数的间隔符

以上所述是小编给大家介绍的URL中“#” “?” &“”号的作用浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 #Javascript
javascript实现复选框全选或反选
Feb 04 #Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 #Javascript
javascript表单正则应用
Feb 04 #Javascript
JS中的phototype详解
Feb 04 #Javascript
详解JavaScript RegExp对象
Feb 04 #Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 #Javascript
You might like
php 魔术函数使用说明
2010/02/21 PHP
PHPCMS的使用小结
2010/09/20 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
Python使用functools实现注解同步方法
2018/02/06 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
广告学专业应届生求职信
2013/10/01 职场文书
银行员工辞职信范文
2014/01/20 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
高一学生评语大全
2014/04/25 职场文书
销售个人求职信范文
2014/04/28 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
小学毕业教师寄语
2019/06/21 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL