前注：本文有部分内容转载自 https://hilau.com/5/
这几天给自己的博客加了一个音乐播放器，但是点击链接跳转到其他页面时，整个页面都会刷新，包括我播放器所在的footer，致使音乐播放中断，体验十分不好，后来发现AJAX可以解决这个问题
Tip：AJAX即局部加载网页，可以显著提升加载速度，具体可以上网百度一下~~
可惜的是，百度上很多转载的所谓AJAX.js都是会报错，与网站不兼容，所以我找到了一个能用的，在这里把源码发一下：
//全局变量
//注意：这里用的选择器是jQuery，使用前确保你引入了jQuery
//注意：这里jQuery可能不兼容，你可以先在控制台试一下，如果不兼容，尝试把jQuery改成 $
//注意，这里你需要把#centent改成你想在你网站上实现异步加载的区域的id或者class名称，ID前要加#号
var ajaxBinded = false;
jQuery(document).ready(function() {
//下面三行你可以插入到你的jQuery(document).ready(function()里面，html5的历史记录API
if( history && history.pushState){
//为真就执行Ajaxopt函数
Ajaxopt();
}
})
//Ajaxopt函数
function Ajaxopt(){
//所有不为新窗口打开的链接
jQuery('a[target!=_blank]').live('click',function(event){
var link = event.currentTarget;
var url = link.href;
if ( event.which > 1 || event.metaKey || event.ctrlKey )
return
if ( location.protocol !== link.protocol || location.host !== link.host ){
return;
}
if (link.hash && link.href.replace(link.hash, '') === location.href.replace(location.hash, ''))
return
if (url.indexOf("respond")>0||url.indexOf("/wp-admin/")>0||url.indexOf("wp-login.php")>0||url.indexOf("sitemap.xml")>0||url.indexOf("/nextcloud/")>0||url.indexOf("/crack-beta.php")>0||url.indexOf("/file-download/")>0)
return
//以上条件语句均为判断链接时候需要ajax加载，下面2句为执行loadDate函数进行ajax操作。
loadData(url,true);
event.preventDefault();
});
}
//loadDate函数
function loadData(url,toPush){
//进行AJAX操作
jQuery.ajax({
url:url,
data: "soz=ajax", //这个可以参考ajax全站加载系列文章第二篇。
dataType: "html",
type: "post",
beforeSend:function(jqXHR, settings){ //加载前操作 #centent的DIV变化
jQuery('#centent').fadeTo(500,0.3);
}
,
complete:function(){ //加载后操作 #centent的DIV变化
setTimeout("jQuery('#centent').fadeTo(200,1)",100);
}
,
success:function(message){ //加载成功的操作
var msger = message;
var titl1 = jQuery(message).find("h1:first").text();
var titl2 = jQuery(message).find("h2:first").text();
if (titl1 == "") {
window.document.title = titl2 + " \u2502 \u221a";
}
else {
window.document.title = titl1 + " \u2502 \u221a";
}
//以上几句为组合新页面的标题。下面一句为插入ajax回来的内容到"#centent"的DIV容器内。
jQuery("#centent").html(msger);
if(toPush){//使用html5的特有API 来改变历史记录数据。
window.history.pushState(null, titl1, url);
}
if(!ajaxBinded){//ajax后重新绑定新加载页面的ajax事件。
ajaxBinded = true;
jQuery(window).bind('popstate', function(e){
loadData(location.href,false);
return false;
});
}
document.getElementById("logo").scrollIntoView();//这里是我自己加的，用来回到页面顶部
}
,
error: function() {//如果加载失败 报错内容
alert("AJAX页面由于您自身的网络原因加载失败！请检查网络和浏览器控制台！");
throw("AJAX加载失败，请刷新页面！！！");
},
});
}
//这个脚本主要内容来自https://hilau.com/5/把上面的JS放进js文件里，然后把它丢到你网站随便哪个目录底下，然后在你主题的header.php里面插入:
<script type="text/javascript" src="path/AJAX.js"></script>注意，上方的path是你网站到达js文件的路径，自己修改。
正确配置这一切之后，就可以看到加载效果了，加载速度也有了比较大的提升。当然，如果你有什么不想刷新的js或者是内容的话，可以放到footer里面，例如我的音乐播放器。
我最后还是要评测一下，我博客配置完Ajax之后，那些兼容性踩过的坑。
1.Ajax不兼容页面加载动画，至少不能完美兼容，因为加载动画的主题要刷新，但是把刷新动画删掉的js却必须要写在footer里面，致使首次进入网站时动画加载正常，但是点击链接跳转时AJAX会不刷新执行清除js导致动画无法被正常关闭。
2.AJAX不兼容某些内嵌Js，如果有一些JS必需在每次打开界面时都要加载刷新，但是AJAX可能会忽略那些JS从而导致某些插件不能正常加载。
3.AJAX与一些WordPress插件不兼容，在使用AJAX刷新时，插件的JS不能正常应用于新加载出来的html。
关于这些问题的解决方法，请看下文：
关于第一种问题，我没有好的解决办法，只能是在AJAX的JS里面添加remove语句，具体可以这样写：
jQuery(selector).remove()//删除指定的元素通过remove指令在页面加载后移除加载动画。
第二种可以修改主题文件，把JS直接写进去，或者自己写JS进行动态加载：
function loadScript(src) {//这里是加载JS的方法，可以写在JS文件里
var script = document.createElement('script'),
head = document.getElementsByTagName('head')[0];
script.type = 'text/javascript';
script.charset = 'UTF-8';
script.src = src;
if (script.addEventListener) {
script.addEventListener('load', function () {
}, false);
} else if (script.attachEvent) {
script.attachEvent('onreadystatechange', function () {
var target = window.event.srcElement;
if (target.readyState == 'loaded') {
}
});
}
head.appendChild(script);
}
//#######################################
//调用方法为
loadScript(src);//src为JS文件路径
//这样就可以动态加载JS了关于第三种问题，我有我自己的解决方法，我用的插件是 SyntaxHighlighter ，这个插件只要加载JS和CSS以后，只要执行一个函数就可以将页面上所有的代码进行高亮：
SyntaxHighlighter.highlight();
//这个可以放进上面AJAX的加载完成后操作里好啦，这篇文章就写到这，如果你想知道更多，欢迎留言！
486065df9e668297bd4688717e3917eb