您现在的位置:首页 --> JavaScript --> Google+中URL的渐进增强
Google+中URL的渐进增强
浏览:2691次 出处信息
在高级浏览器下点击Google+的一些链接,并不是直接从服务器返回完整的页面,而是通过AJAX刷新页面的局部。
如在首页点击以下链接:
- https://plus.google.com/stream
- https://plus.google.com/photos
- https://plus.google.com/photos
- https://plus.google.com/circles
浏览器通过AJAX请求服务器返回数据,动态刷新页面上的一部分区域,这样做可以减少网络传输,快速响应,以达到更好的用户体验。同时我们注意 到,点击链接的时候,浏览器上的地址栏也做出了相应的调整,并且不会刷新整个页面。如点击“圈子”的时候,地址会变为 https://plus.google.com/circles。
这在早期浏览器版本下是做不到的,因为给window.location赋值会导致整个页面的刷新,除非是用改变URL的hash达到同样的目 的。Google+是用HTML5中history.pushState来实现替换当前的URL同时不刷新整个页面。
关于history.pushState的官方文档:https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
Google+针对不同的操作场景和浏览器,做了一些方案处理点击链接后的行为。
- 如果浏览器不支持history.pushState或直接在浏览器地址栏中输入地址回车,那么就会从服务器拿完整的页面呈现给用户。
- 如果浏览器支持history.pushState,就用AJAX取区块的数据,然后生成HTML刷新到相应的区域上,并调用 history.pushState更新地址栏,生成访问历史。
值得注意的是,Google+对AJAX返回的数据做了缓存处理,再次请求的话会从缓存中获取数据。
建议继续学习:
- 从输入 URL 到页面加载完成的过程中都发生了什么事情? (阅读:14740)
- 前端要给力之:URL应该有多长? (阅读:7210)
- 豆瓣的Url结构方式一览 (阅读:6875)
- URL正则表达式 (阅读:3588)
- IE的Get请求(URL)的最大长度限制 (阅读:3492)
- URL的井号 (阅读:3162)
- 关于URL编码 (阅读:3114)
- 在HTML中获取正确的URL属性值 (阅读:2989)
- URL 设计准则 (阅读:3055)
- 渐进式的脚本加载 (阅读:2556)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:解决jQuery动画在chrome下暴走的问题
后一篇:用In.js颗粒化管理、加载你的Javascript模块 >>
文章信息
- 作者:小寒 来源: 记事本
- 标签: URL 渐进
- 发布时间:2011-07-18 12:13:39
建议继续学习
近3天十大热文
-
[84] memory prefetch浅析
-
[55] 基本排序算法的PHP实现
-
[50] 深入浅出cassandra 4 数据一致性问
-
[45] 转载:cassandra读写性能原理分析
-
[41] javascript插入样式
-
[40] Inline Form Labels
-
[40] MySQL半同步存在的问题
-
[39] JS中如何判断字符串类型的数字
-
[37] 字符引用和空白字符
-
[37] 获取Dom元素的X/Y坐标