您现在的位置:首页 --> JavaScript --> Google+中URL的渐进增强
Google+中URL的渐进增强
浏览:2634次 出处信息
在高级浏览器下点击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 到页面加载完成的过程中都发生了什么事情? (阅读:14502)
- 前端要给力之:URL应该有多长? (阅读:7043)
- 豆瓣的Url结构方式一览 (阅读:6661)
- URL正则表达式 (阅读:3479)
- IE的Get请求(URL)的最大长度限制 (阅读:3332)
- URL的井号 (阅读:3072)
- 关于URL编码 (阅读:3043)
- 在HTML中获取正确的URL属性值 (阅读:2923)
- URL 设计准则 (阅读:2901)
- 渐进式的脚本加载 (阅读:2417)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:解决jQuery动画在chrome下暴走的问题
后一篇:用In.js颗粒化管理、加载你的Javascript模块 >>
文章信息
- 作者:小寒 来源: 记事本
- 标签: URL 渐进
- 发布时间:2011-07-18 12:13:39
建议继续学习
近3天十大热文
- [53] IOS安全–浅谈关于IOS加固的几种方法
- [52] 如何拿下简短的域名
- [51] 图书馆的世界纪录
- [50] Oracle MTS模式下 进程地址与会话信
- [50] android 开发入门
- [49] Go Reflect 性能
- [46] 【社会化设计】自我(self)部分――欢迎区
- [46] 读书笔记-壹百度:百度十年千倍的29条法则
- [36] 程序员技术练级攻略
- [29] 视觉调整-设计师 vs. 逻辑