说在前面

       什么是PJAX呢？ 站在应用角度的就是既实现了页面无刷新的效果，同时也产生了浏览器的前进和后退，而且url也会变化。 也不是什么新鲜技术，主要是AJAX+html5 pushState和replaceState。   HTML5 为history提供了pushState和replaceState用来在浏览历史记录中添加和修改记录。

       PJAX是在群里看到朋友在聊，孤陋寡闻还没听过这个，平时也没注意观察。附图Github实现了这个效果，当你切换标签时页面局部刷新，浏览URL也会变化。

AJAX载入与浏览器的前进和后退

       众所周知，Ajax可以实现页面的无刷新操作——优点；但是，也会造成另外的问题，无法前进与后退！曾几何时，Gmail似乎借助iframe搞定，如今，HTML5让事情变得如同过家家般简单。

       当执行Ajax操作的时候，往浏览器history中塞入一个地址（使用pushState）（这是无刷新的）；于是，返回的时候，通过URL或其他传参，我们就可以还原到Ajax之前的模样。

实例分析

      参考张鑫旭的Demo我自己试了一把。

<a href='/Home/Region?area=pudong'>浦东</a>|<a href='/Home/Region?area=baoshan'>宝山</a>|<a href='/Home/Region?area=jiading'>嘉定</a> <ul id='result'> </ul> <script src='~/Scripts/jquery-1.10.2.js'></script> <script> $(function () { var eleMenus = $('a').bind('click', function (event) { var query = this.href.split('?')[1]; if (history.pushState && query) { $('#result').empty(); $.ajax({ url: this.href, type: 'get', dataType: 'json', success: function (data) { $.each(data, function (i, v) { $('<li>' + v.name + ',' + v.price + ',' + v.address + '' + '</li>').appendTo('#result'); }); } }); var title = $(this).text(); if (event && /d/.test(event.button)) { history.pushState({ title: title }, title, location.href.split ('?')[0] + '?' + query); } } return false; }); var fnHashTrigger = function (target) { var query = location.href.split('?')[1], eleTarget = target || null; if (typeof query == 'undefined') { if (eleTarget = eleMenus.get(0)) { // 如果没有查询字符，则使用第一个导航元素的查询字符内容 history.replaceState(null, document.title, location.href.split('#')[0] + '?' + eleTarget.href.split('?')[1]) + location.hash; fnHashTrigger(eleTarget); } } else { eleMenus.each(function () { if (eleTarget === null && this.href.split('?')[1] === query) { eleTarget = this; } }); if (!eleTarget) { // 如果查询序列没有对应的导航菜单，去除查询然后执行回调 history.replaceState(null, document.title, location.href.split('?')[0]); fnHashTrigger(); } else { $(eleTarget).trigger('click'); } } } if (history.pushState) { window.addEventListener('popstate', function () { fnHashTrigger(); }); } fnHashTrigger(); }); </script> 实现效果

思路 每次手动点击左侧的菜单，我将Ajax地址的查询内容(?后面的)附在demo HTML页面地址后面，使用history.pushState塞到浏览器历史中。 浏览器的前进与后退，会触发window.onpopstate事件，通过绑定popstate事件，就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入，实现Ajax的前进与后退效果。 页面首次载入的时候，如果没有查询地址、或查询地址不匹配，则使用第一个菜单的Ajax地址的查询内容，并使用history.replaceState更改当前的浏览器历史，然后触发Ajax操作

 

参考