解决ajax不支持历史向前/向后/刷新的问题

前言：

目前，前端和后端基本上通过ajax实现了前端和后端接口之间的数据交互，但ajax有一个小缺点，那就是不支持浏览器的“后退”和“前进”键。

但是，现在我们可以通过H5的histroy属性来解决ajax在交互请求中的这个小bug。

事件描述：

H5添加了一个事件窗口，当用户点击这两个按钮时就会触发。但是仅仅检测这个事件是不够的，还需要传递一些参数，也就是说在返回上一页的时候，需要知道该页的pageIndex。可以通过历史的pushState方法来实现，即pushState(pageIndex)保存当前页面的pageIndex，然后在返回到这个页面时获取这个pageIndex。

Window.history.pushState描述：

window.history.pushState(状态、标题、URL)；State对象：是一个JavaScript对象，与pushState()方法创建的新历史实体相关。用于存储有关要插入历史记录的条目的信息。State对象可以是任何Json字符串。因为firefox使用用户的硬盘访问状态对象，所以这个对象的最大存储空间是640k K，如果大于这个数字，pushState()方法就会抛出异常。

标题：firefox现在忽略了这个参数，尽管它可能会在未来使用。现在使用它最安全的方法是传递一个空字符串来防止将来的修改。

Url:用于传递新历史实体的URL，浏览器在调用pushState()方法后不会加载该实体。也许你以后会尝试加载这个网址。例如，在用户重新启动浏览器后，新的url可能不是绝对路径。如果是相对路径，它将是相对于现有的url。新url必须与现有url在同一个域中，否则pushState()将引发异常。此参数是可选的。如果为空，将被设置为文档的当前url。

直接粘贴代码：

/** * Created: Aaron。* address : http://www.cnblogs.com/aaron-pan/*///var page index=window . history . state===null？0: window . history . state . page；(函数($，window，undefined){ var loadData={ page index : window . history . state===null？1: window . history . state . page，//pageIndex:0，init : function(){ this . getdata(this . page index)；this . NextPage()；}，getdata : function(page index){ var=this；$.ajax({ type:'post '，url: '。/data/getmovies ' page index '。json '，dataType:'json '，async:false，success : function(data){ that . renderdom(data)；}})}，renderdom:函数(电影){varbook html=' table'' tr ' '第几部电影/第几个导演/第几个发行时间/第几个' '/tr '；for(var I=0；imovies.lengthi ){ bookHtml='tr' ' td '电影[i]。movie name/' TD ' ' TDA '电影[i]。movie editor/a/TD“TD”电影[i]。times '/TD ' '/tr '；} BookHTML=“/table”；BookHtml='按钮上一页/按钮' '按钮类='下一页'下一页/按钮'；$(“body”)。html(BookHTML)；}，nextPage:function(){ var即=this$(文档)。打开('点击'，'。' nextPage '，函数(){ that . page index；that . getdata(that . page index)；window . history . push state({ page : that . page index }，null，window . location . href)；//返回并刷新到主页window . history . replace state({ page : that . page index }，null，window . location . href)；}) }, };loaddata . init()；window . addeventlistener(' pop state '，function(event){ var page=0；if(event.state！==null){ page=event . state . page；console.log('page: '页)；} console.log('page: '页)；loadData.getData(第页)；loadData.pageIndex=page})})(jQuery，window，undefined)；您可以通过直接在html页面上调用js文件来查看运行结果。

运行结果：

这样，我们就可以通过与ajax的交互来实现监控转发/后台/刷新的功能。

与浏览器兼容：

ajax不支持向前/向后/刷新历史的上述问题是边肖与大家分享的全部内容。希望能给大家一个参考，多多支持我们。