IT技术博客大学习 共学习 共进步

Google+中URL的渐进增强

记事本 2011-07-18 12:13:39 浏览 3,663 次

在高级浏览器下点击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. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (阅读 15,706)
  2. 前端要给力之:URL应该有多长? (阅读 8,062)
  3. 豆瓣的Url结构方式一览 (阅读 7,823)
  4. IE的Get请求(URL)的最大长度限制 (阅读 4,706)
  5. URL正则表达式 (阅读 4,662)
  6. URL的井号 (阅读 4,242)
  7. 关于URL编码 (阅读 3,883)
  8. 在HTML中获取正确的URL属性值 (阅读 3,682)
  9. 网址决定内容 (阅读 3,641)
  10. URL 设计准则 (阅读 3,643)