叛道 Pandao
Web Designer & Developer
Xiamen, China
关注我
开源中国
花瓣
豆瓣
首页
文章笔记
收集
作品
关于我
TOP
什么是 Hijax?Hijax 的原理及优缺点介绍
发布时间: 2013-08-24
Hijax
Ajax
XMLHttpRequest
HTML5
History API
Hashbang
前端开发
> 之前发表在开源中国:[http://my.oschina.net/pandao/blog/156532](http://my.oschina.net/pandao/blog/156532) #### 简介 Hijax,即渐进增强的 Ajax,也被称为“简化的 Ajax”,也是 hijack(劫持)的意思,也可直接理解成保存和操纵历史的 Ajax,Hijax 是由 Jeremy Keith(杰里米基斯)提出来的。 http://domscripting.com/blog/display/41 #### 主要原理 传统 Web 的表单提交和链接方式都会重新刷新加载整个页面,这样会造成内容和资源的重复加载,对服务器造成压力和浪费。 Hijax 的原理是“劫持”表单提交和 URL 链接,然后通过 Ajax 获取数据后局部更新 DOM 及内容,从而减少带宽消耗和服务器压力,避免页面刷新带来的闪烁感和重复感,改善用户浏览体验。如果客户端不支持 JS 或 XMLHttpRequest,则表单和链接会按传统方式提交和跳转。 HTML5 的 History API 能更好的实现这样的功能,且更新 URL 地址时页面不刷新,支持浏览器后退和前进按钮,这个时候你也可以直接理解成 History + Ajax,Github 无疑是 Hijax 的最佳范例了。 http://dev.w3.org/html5/spec-author-view/history.html https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history?redirectlocale=en-US&redirectslug=DOM%2FManipulating_the_browser_history #### 优点 1. 改善用户浏览体验, 避免页面刷新带来的闪烁感和重复感; 2. 减少服务器压力和带宽浪费。 #### 缺点 似乎只有一点,对搜索引擎不友好,不过 Google 的爬虫会索引这样的 URL 格式,即由一个由井号和叹号构成的 URL 字符串(#!),称为 Shebang(也称为 Hashbang),我们在 Shell 和Python 会经常看到这样的字符串,通过程序解析字符串并加载相应的模块或内容。 不过 HTML5 的 History API 不需要这样的 URL 格式,直接使用传统 URL 格式就可以了。基于 HTML5 的 History API 的 Hijax 是更好的 Hijax。 #### 参考资料 示例 URL:http://www.example.com/#!/about/contact 了解 Hashbang:http://zh.wikipedia.org/zh-cn/Shebang Google 建议使用 PushState 而非 hashbang: http://seo.dns.com.tw/?p=9120
TOP