Pjax 之于 iOS Web App

[disinfeqt]

GitHub 的 CEO 和 co-founder —— Chris Wanstrath （defunkt ）本身就是个技术狂人，大名鼎鼎的模版语言 {{ mustache }} 和好用的 alert() 替代品 Facebox 都是他的作品。

Pjax 不过是他的一个小玩具而已。如果你细心观察过 Github 的 code view 页面，譬如 https://github.com/defunkt/jquery-pjax 你会发现点击每个 repo 里的文件后，是用 ajax 的方式加载的，而且 URL 也会跟着完美转换，不会出现 Twitter 的 /#!/。

再转换话题到 iOS Web App，当你把网站封装为可以从桌面启动的 web app 时，一旦页面内有需要跳转的页面，那 web app 就露馅了，跳到 Safari 打开肯定不是好的用户体验。

这样一来，你有两个选择：1) 把整个网站改造为纯 ajax 结构；2) 用 pjax 伪造。

因此，对我个人而言，这个东西堪称神器。

PS: 同类型、更强大的还有 Ajaxify http://max.jsrhost.com/ajaxify/

[aligo]

cool！用到了window.history，连gaq都考虑到了
不过这个东西和hash还是不同，hash是单入口的，也就是所谓纯ajax，当然同时也可以实现混合ajax
这个东西话就必须确保每个url都是通过url还有动态方式同时可以访问的
我还是比较喜欢hash的方式，同时把a的href写成不带hash的，然后通过绑定click事件转换为hash方式就好-A-

[disinfeqt]

@aligo 所以我称之为「伪装 ajax」，适合给架构完毕的中小型网站，或者单独给一个 module 使用。

[aligo]

这也是ajax啊，绝对不是伪装的，一样通过xhr发起请求，只不过是为了实现像hash一样的前进后退功能，但采取更改整个url而不是hash的方式而已

[flytwokites]

太神了！

另外，我始终觉得hash方式是在http上打的一个丑陋的补丁，带hash的url不是真正的原生url，只能运用于带js的浏览器，别的爬虫什么的都不能直接使用。

[sogood]

Github 的效果就是基于这个做出来的啊，爽。

[aligo]

@flytwokites hash只是出现在地址栏啊，爬虫爬的是href，无影响

[disinfeqt]

@aligo 晕，我的意思是：把当前的静态网站改造成 ajax 加载，跟网站架构是不相关的。

[fanzeyi]

我一直在想他这个效果是怎么做出来的。。
原来如此....

[aligo]

@disinfeqt 。。。这个的话用hash或者什么都不用也行啊，只要判断request是xhr发起就返回局部模版就行了啊

pjax这玩意的主要作用在于实现ajax的前进后退还有各种类似gaq的记录吧

[sparklo]

eh... 这个和jquery中的history plugin有什么本质的区别么?

http://www.serpere.info/jquery-history-plugin/samples/ajax/#1

[reorx]

请教各位一个问题： Pjax是怎么实现地址栏URL转换却不加载相应页面的呢？比如改变hash，只需要给window.location.hash 赋值即可，而给window.location.href赋值浏览器就自动加载那个URL了。

[fanzeyi]

刚刚发现 tumblr 也是这个效果
http://www.tumblr.com 点右上角的log in
会有一个动画效果到 http://www.tumblr.com/login
然后再点右上角的 Sign up 会动画效果到 http://www.tumblr.com/register

[aligo]

@reorx 用window.history的pushState和replaceState