PUSHSTATE＋AJAX操作

如果不想看文字你可以直接看图~~~~~

由于现在很多H5页面都在手机上看了，越来越多人开发WEB移动端页面。当然页面上要是网络不好或者访问的网站服务器好慢就难受了。页面操作不流畅虽然表面上看上去好像很好看但其实访问的时候速度慢切换页面变得非常麻烦，现在好了！

现在大多数网页都基于HTML5标准的。在HTML5标准上增加了HISTORY.PUSHSTATE和HISTORY.REPLACESTATE功能，而且在当前页面上HISTORY这个对象可以获取到STATE内容，这个内容就是我们REPLACESTATE或者PUSHSTATE之后这个页面就有了这个记录，它记录着我们跳页的信息。

举个例子：比如我们要在这个页面不刷新打开一层东西出来那么我们就使用IFRAME或者AJAX或什么的方式拿另外一个页面的内容加载上来同时在这个时候使用pushstate方法吧新的数据写到state上，那么相当于前进了一页而且加载了东西出来。那么我们按手机的后退或者浏览器的后退的时候怎么办？可以监听这个事件

window.onpopstate=function(ev){ ev.state }

这个事件是全局事件，当返回的这个操作或者前进的操作这里都会被调用。同时跳到某个历史记录的时候event参数的state就是当前这个页面的state内容。或者这样说：我们可以试验一下，我们在任意浏览器打开任意一个页面在控制台操作

第一步：监听窗口事件window.onpopstate=function(ev){ console.log(ev.state); }

第二步：这个先给当前这个页面的state内容赋值一下替换一下历史记录

history.replaceState(state对象内容,"",URL)

第三步：使用pushstate模拟浏览器前进一页。

history.pushState(state对象内容,"",URL)

第四步：使用浏览器的返回功能这时候控制台就会输出你第一个已经被替换过历史记录的那个页面state内容，然后如果前进一页就会得到前进的那一页的state内容的了。

当然这种功能可以做很多事情。比如你想要整个页面用起来流畅无比而不需要重新加载页面直接看到数据更新的单页面应用还是很有用的，不过可能出现的问题就是浏览器可能记录不了那么多页面的内容在那里，需要每次跳页获取数据放到界面上而至于页面有点乱。如果可以，希望日后有比现在某某流行前端框架更好的框架。能够做到真正开源源码轻松简洁，制作起来能够更加灵活。

以下是图：

第一步：监听事件

第二步：替换当前页面的历史记录

第三步：前进一页，就是往历史记录上写一条历史记录，就是前进一页

第四步：浏览器后退功能控制台输出第一页的state数据

第五步：浏览器前进功能控制台输出加进历史记录的那个页面的state数据

当然直接跳链接跳页的话那么返回回来这个页面的时候是没有效果的反而会有点报错。