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 相关文章推荐
Javascript Request获取请求参数如何实现
Nov 28 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
原生js实现九宫格拖拽换位
Jan 26 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
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
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
围观tangram js库
2010/12/28 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
Python使用MONGODB入门实例
2015/05/11 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
小学生优秀评语大全
2014/04/22 职场文书
心理咨询承诺书
2014/05/20 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
Python基于百度AI实现抓取表情包
2021/06/27 Python