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 Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
vue prop传值类型检验方式
Jul 30 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
python实现挑选出来100以内的质数
2015/03/24 Python
Python实现句子翻译功能
2017/11/14 Python
Django 视图层(view)的使用
2018/11/09 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
酒店值班经理的工作职责范本
2014/02/18 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
创意广告词
2014/03/17 职场文书
预备党员承诺书
2014/03/25 职场文书
医院标语大全
2014/06/23 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
2014年党小组工作总结
2014/12/20 职场文书
成绩单评语
2015/01/04 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
2016情人节宣传语
2015/07/14 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
Redis 哨兵集群的实现
2021/06/18 Redis
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
Fluentd搭建日志收集服务
2022/09/23 Servers