IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

Google+中URL的渐进增强

记事本 2011-07-18 12:13:39 累计浏览 3,755 次
本机暂存

在高级浏览器下点击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+针对不同的操作场景和浏览器,做了一些方案处理点击链接后的行为。

  1. 如果浏览器不支持history.pushState或直接在浏览器地址栏中输入地址回车,那么就会从服务器拿完整的页面呈现给用户。
  2. 如果浏览器支持history.pushState,就用AJAX取区块的数据,然后生成HTML刷新到相应的区域上,并调用 history.pushState更新地址栏,生成访问历史。

值得注意的是,Google+对AJAX返回的数据做了缓存处理,再次请求的话会从缓存中获取数据。

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. HTML5 离线缓存-manifest简介 (累计阅读 17,102)
  2. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  3. 使用python/casperjs编写终极爬虫-客户端App的抓取 (累计阅读 12,961)
  4. YSLOW法则中,为什么yahoo推荐用GET代替POST? (累计阅读 11,837)
  5. JSONP与POST方式请求 (累计阅读 11,294)
  6. jQuery插件---轻量级的弹出窗口wBox. (累计阅读 10,772)
  7. 10个强大的Ajax jQuery文件上传程序 (累计阅读 8,853)
  8. jQuery的data()方法 (累计阅读 8,651)
  9. 前端必须熟悉的10个CSS3属性 (累计阅读 7,718)
  10. 面向移动设备的HTML5开发框架梳理 (累计阅读 7,416)