wp全站ajax插件,WordPress的全站Ajax加载(四)完整代码篇(完结)
最近发现小伙伴们对ajax加载比较感兴趣，我之前也写了三篇转门介绍Ajax,自以为已经结束了 写的也比较清楚了。有点懒同学给我提了建议“得把读者都当成小白来看待，不然估计还看不懂”。此文接受建议而出，不过个人还是觉得小伙伴们不要太过把自己当小白，还是要多学会思考总结。本人以前也是小白一个 学的也不是编程。好了 废话不多说 直接进入主题。
这篇部分代码是本人正在使用的代码摘录而出，使用了html5的API来控制历史记录。代码为ajax的核心代码，没有ajax操作时候的一些特效(内容部分会有个简单的半透明渐变处理)。如果你的主题文章部分的DIV是 #content的话 应该可以直接拷过去就用。我说的是应该。
//全局变量
var ajaxBinded = false;
jQuery(document).ready(function() {
//下面三行你可以插入到你的jQuery(document).ready(function()里面，html5的历史记录API
if( history && history.pushState){
//为真就执行Ajaxopt函数
Ajaxopt();
}
})
//Ajaxopt函数
function Ajaxopt(){
//所有不为新窗口打开的链接
$('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)
return
//以上条件语句均为判断链接时候需要ajax加载，下面2句为执行loadDate函数进行ajax操作。
loadData(url,true);
event.preventDefault();
});
}
//loadDate函数
function loadData(url,toPush){
//进行AJAX操作
$.ajax({
url:url,
data: "soz=ajax", //这个可以参考ajax全站加载系列文章第二篇。
dataType: "html",
type: "post",
beforeSend:function(jqXHR, settings){ //加载前操作 #content的DIV变化
$('#content').fadeTo(500,0.3);
}
,
complete:function(){ //加载后操作 #content的DIV变化
$('#content').fadeTo(200,1);
}
,
success:function(message){ //加载成功的操作
var msger = message;
var titl1 = $(message).find("h1:first").text();
var titl2 = $(message).find("h2:first").text();
if (titl1 == "") {
window.document.title = titl2 + " \u2502 SOZ";
}
else {
window.document.title = titl1 + " \u2502 SOZ";
}
//以上几句为组合新页面的标题。下面一句为插入ajax回来的内容到"#content"的DIV容器内。
$("#content").html(msger);
if(toPush){//使用html5的特有API 来改变历史记录数据。
window.history.pushState(null, titl1, url);
}
if(!ajaxBinded){//ajax后重新绑定新加载页面的ajax事件。
ajaxBinded = true;
$(window).bind('popstate', function(e){
loadData(location.href,false);
return false;
});
}
}
,
error: function() {//如果加载失败 报错内容
$("#content").html("
AJAX Error...
");
},
});
}
以上为所有ajax操作的必要步骤，小白同学可以仔细研究。高手可以路过 嗯
From: http://soz.im/wordpress-is-the-stations-ajax-to-load-four-complete-code-articles.html