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();

好了，以上是一个简单的单页面实例，代码显得有点粗糙，欢迎大家指正并优化，接下来我会有文章和大家分享几个常见的前端框架实现的优雅的单页面应用实例，敬请关注。