archive-gh-me/leuisken.github.io
1
0
Fork 0
mirror of https://github.com/LeuisKen/leuisken.github.io.git synced 2026-01-25 14:43:04 +00:00
Code Issues Projects Releases Wiki Activity

pjax

Browse Source
This commit is contained in:
LeuisKen 2015-06-16 21:17:02 +08:00
parent d3b1d42011
commit 01f1ee9c8a
1 changed files with 10 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
_posts/2015-06-16-pjax.html Normal file
View File

@ -0,0 +1,10 @@
---
layout: post
category: "frontend"
tag: [前端]
title: PJAX：pushState和Ajax
---
<p>终于从漫长的休眠期中清醒过来，改认真搞搞技术了。在研究手机触摸界面的时候接触到了PJAX这个东西，先研究、笔记一下。</p>
<p>其实这个pushState这个东西就是在html5时代，history新增的方法，除了这个还有replaceState方法和onpopstate事件。可以说这几个方法是现在各种单页系统的基础。</p>
<p>这里引用<a href="http://www.zhangxinxu.com/study/201306/ajax-page-html5-history-api.html?area=pudong">张鑫旭大神的demo</a>，当你点击左边选项卡的时候，注意上边url的变化。在变化的时候，整个页面都没有刷新，url历史记录都是pushState方法加入的，当用户点击后退时，会触发onpopstate事件，接下来用你的执行函数去渲染前一个，让url和视图一一对应，这样就ok了。</p>
<p>关于这里，由于我自己还没有写demo，之后自己写了demo以后，再探讨一些细节的问题。</p>