技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> Google+中URL的渐进增强

Google+中URL的渐进增强

浏览:2573次  出处信息

在高级浏览器下点击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 到页面加载完成的过程中都发生了什么事情?    (阅读:14219)
  2. 前端要给力之:URL应该有多长?    (阅读:6902)
  3. 豆瓣的Url结构方式一览    (阅读:6446)
  4. URL正则表达式    (阅读:3354)
  5. IE的Get请求(URL)的最大长度限制    (阅读:3187)
  6. URL的井号    (阅读:3019)
  7. 关于URL编码    (阅读:2992)
  8. 在HTML中获取正确的URL属性值    (阅读:2876)
  9. URL 设计准则    (阅读:2737)
  10. 渐进增强的HTML5表单方案    (阅读:2316)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1