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

说在前

       什么是PJAX呢?
站于运用角度的便是既贯彻了页面无刷新的功用,同时为闹了浏览器的升华与退化,而且url也会见变动。
也未是啊特殊技术,主要是AJAX+html5 pushState和replaceState。   HTML5
为history提供了pushState和replaceState用来当浏览历史记录中添加和改动记录。

      
PJAX是于群里看到朋友当聊,孤陋寡闻还没听罢这,平时啊从不顾观察。附图Github实现了是效果,当您切换标签时页面局部刷新,浏览URL也会见生成。

Ajax 1

 

Ajax 2

 

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 3

Ajax 4Ajax 5

 

思路

  • 每次手动点击左边的食谱,我以Ajax地址之询问内容(?背后的)附在demo
    HTML页面地址后,使用history.pushState塞到浏览器历史受到。
  • 浏览器的上进与落后,会触发window.onpopstate事件,通过绑定popstate事件,就可以根据目前URL地址被之询问内容让对应的食谱执行Ajax载入,实现Ajax的升华与后回落效果。
  • 页面首软载入的时,如果没有询问地址、或询问地址不配合,则使第一个菜单的Ajax地址之查询内容,并采取history.replaceState转当前底浏览器历史,然后触发Ajax操作

 

参考

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

相关文章