PushState+Ajax实现简单的单页面应用SPA

Posted lewo的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了PushState+Ajax实现简单的单页面应用SPA相关的知识,希望对你有一定的参考价值。

http://www.helloweba.com/view-blog-386.html

单页面应用(Single Page Application)简称SPA,使用SPA构建的应用优点有用户体验好、速度快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染,从而相对减轻了服务器压力,SPA在WEB移动端应用非常广泛。

我们在上一篇文章javascript实现前端简单路由中提到的前端路由,可以在不刷新整个页面的情况下,通过变换地址栏的hash来实现页面局部加载。

今天我要给大家介绍的是使用HTML5的PushState+ajax实现不刷新整个页面,而地址栏变换,页面局部刷新的效果,综合前后端页面技术实现一个简单的SPA。我们先来了解几个知识点。

HTML5 History API

HTML5在History里增加了pushState方法,这个方法会将当前的url添加到历史记录中,然后修改当前url为新url。当然这个方法只会修改地址栏的Url显示,但并不会发出任何请求。因此我们可以利用这个方法结合ajax实现单页面应用SPA,就是PushState+Ajax,人称Pjax。

pushstate的使用方法:

history.pushState(state, title, url)

state: 可以放任意你想放的数据,它将附加到新url上,作为该页面信息的一个补充。

title: 顾名思义,就是document.title。

url: 新url,也就是你要显示在地址栏上的url。

history.replaceState(state, title, url)

replaceState方法与pushState大同小异,区别只在于pushState会将当前url添加到历史记录,之后再修改url,而replaceState只是修改url,不添加历史记录。

window.onpopstate

一般来说,每当url变动时,popstate事件都会被触发。但若是调用pushState来修改url,该事件则不会触发,因此,我们可以把它用作浏览器的前进后退事件。该事件有一个参数,就是上文pushState方法的第一个参数state。

Pjax能做什么

Pjax是一个优秀的解决方案,它可以做:

  • 可以在页面切换间平滑过渡,增加Loading动画。
  • 可以在各个页面间传递数据,不依赖URL。
  • 可以选择性的保留状态,如音乐网站,切换页面时不会停止播放歌曲。
  • 所有的标签都可以用来跳转,不仅仅是a标签。
  • 避免了公共JS的反复执行,减少了请求体积,节省流量,加快页面响应速度。
  • 对SEO也不会有影响,对于不支持HTML5的浏览器以及搜索引擎爬虫,则可以跳转真实的页面。
  • 支持浏览器前进和后退按钮。

实现原理

1. 拦截a标签的默认跳转动作。

2. 使用Ajax请求新页面。

3. 将返回的Html替换到页面中。

4. 使用HTML5的History API或者Url的Hash修改Url。

代码实现

HTML

我们设置一个菜单#nav,通过点击菜单上的链接,将链接页面对应的内容加载到div#result中。

<ul id="nav">  
    <li><a href="home.html">首页</a></li>  
    <li><a href="product.html">产品</a></li>  
    <li><a href="server.php" title="服务">服务</a></li>  
</ul> 
<div id="result"></div>

pjax.js

首先在pjax.js中判断浏览器对html5的支持情况,然后定义一个cache缓存对象:cache{},定义设置cache和获取cache的方法。然后定义event事件对象:event{},绑定popstate和hashchange以及click事件,click事件会触发调用pajax对象,请求页面内容。cache缓存对象和event事件对象的代码大家可以下载源码查看,本文由于篇幅原因只将核心pjax{}对象代码粘出来。

var pjax = { 
    // Forward And Back,表示当前操作是否由前进和后退触发 
    fnb: false, 
    // 显示新页面内容 
    show: function (title, html) { 
        document.title = title; 
        document.querySelector(‘#result‘).innerHTML = html; 
    }, 
 
    //跳转到指定页面 
    jump: function (url, data, callback) { 
         
        // 如果是由前进后退触发,则试着从缓存中获取数据 
        if (pjax.fnb) { 
            var value = cache.get(url); 
            if (value !== null) { 
                pjax.show(value.title, value.html); 
                return; 
            } 
        } 
 
 
        document.querySelector(‘#result‘).innerHTML = ‘加载中...‘; 
        //ajax发送请求 
        var xhr = new XMLHttpRequest(); 
 
        xhr.open("GET", url, true); 
        xhr.setRequestHeader("X-PJAX", "true"); 
        xhr.setRequestHeader("X-PJAX-TITLE", data); 
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
        xhr.onreadystatechange = function(){ 
            if(xhr.readyState === 4){ 
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){ //304是缓存 
                    var html = xhr.responseText, 
                        title = xhr.getResponseHeader("X-PJAX-TITLE"); 
                    if(title==null){ 
                        title = document.title; 
                    }else{ 
                        title = decodeURI(title); 
                    } 
                    //console.log(title); 
                     
                    // 显示新页面 
                    pjax.show(title, html); 
 
                    //不是前进和后退按钮触发 
                    if(!pjax.fnb){ 
                        // 修改URL,URL地址栏会变换 
                        if (support === ‘HTML5‘) { 
                            history.pushState(null, null, url); 
                        } else { 
                            var path = url.replace(location.protocol + "//" + location.host, ""); 
                            location.hash = path; 
                        } 
                        // 添加到缓存 
                        cache.set(url, { 
                            title: title, 
                            html: html 
                        }); 
                    } 
 
                }else{ 
                    console.log(‘请求失败!‘); 
                } 
                pjax.fnb = true; 
            } 
        }; 
        xhr.send(); 
    }, 
 
    init: function () { 
        event.bindEvent(); 
    } 
};

可以看出,pjax的核心部分是发送异步的ajax请求,调用html5的history.pushState() 方法,缓存页面信息,已经处理异步请求返回的结果。

最后调用:

pjax.init();

 

以上是关于PushState+Ajax实现简单的单页面应用SPA的主要内容,如果未能解决你的问题,请参考以下文章

关于在Ajax中使用pushstate

使用ajax和history.pushState无刷新改变页面URL

ajax与HTML5 history pushState/replaceState实例

AJAX 单页面应用的两种实现思路

前端路由的两种实现方式

如何通过 pushState 在 Backbone 中使用 SEO 友好的 URL?