AJax技术

PJAX初体验(主要是利用HTML5 新增API pushState和replaceState+AJAX)

字号+ 作者:H5之家 来源:H5之家 2017-12-14 12:26 我要评论( )

说在前面什么是PJAX呢?站在应用角度的就是既实现了页面无刷新的效果,同时也产生了浏览器的前进和后退,而且url也会变化。也不是什么新鲜技术,主要是AJAX+html

说在前面

       什么是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操作

 

参考

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 不刷新改变URL: pushState + Ajax

    不刷新改变URL: pushState + Ajax

    2015-11-15 17:21

  • 使用Yii整合的pjax(pushstate+ajax)实现无刷新加载页面,yiipjax

    使用Yii整合的pjax(pushstate+ajax)实现无刷新加载页面,yiipjax

    2015-10-17 14:48

网友点评