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

说在眼下

       什么是PJAX呢?
站在采取角度的就是既已毕了页面无刷新的功用,同时也发生了浏览器的前行和滞后,而且url也会生成。
也不是什么尤其技术,重假诺AJAX+html5 pushState和replaceState。   HTML5
为history提供了pushState和replaceState用来在浏览历史记录中加上和修改记录。

      
PJAX是在群里看到朋友在聊,孤陋寡闻还没听过那个,日常也没注意观看。附图Github已毕了那些意义,当您切换标签时页面局地刷新,浏览URubiconL也会变卦。

图片 1

 

图片 2

 

AJAX载入与浏览器的升高和倒退

      
大名鼎鼎,Ajax可以兑现页面的无刷新操作——优点;可是,也会造成其余的题材,不可以前行与后退!哪天,Gmail就像借助iframe解决,最近,HTML5让工作变得就像过家庭般简单。

      
当执行Ajax操作的时候,往浏览器history中塞入1个地点(使用pushState)(那是无刷新的);于是,再次回到的时候,通过UPAJEROL或任何传参,大家就足以过来到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>

 

贯彻效益

图片 3

图片 4图片 5

 

思路

  • 每次手动点击左边的菜谱,作者将Ajax地址的查询内容(?后面的)附在demo
    HTML页面地址前边,使用history.pushState塞到浏览器历史中。
  • 浏览器的发展与落后,会接触window.onpopstate事件,通过绑定popstate事件,就足以按照近年来URAV4L地址中的查询内容让对应的菜谱执行Ajax载入,完结Ajax的进步与后退效果。
  • 页面首次载入的时候,倘诺没有询问地址、或询问地址不般配,则运用第壹,个菜单的Ajax地址的询问内容,并利用history.replaceState变动当前的浏览器历史,然后触发Ajax操作

 

参考

http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

http://www.cnblogs.com/hustskyking/p/history-api-in-html5.html

相关文章