让你的WordPress简单实现全站Ajax

很多人都对全站Ajax表示出了相当高的兴趣,这里简单介绍下,相信看完就基本能自己实现全站Ajax了。


基本原理

全站Ajax的原理很简单,一句话就能概括:从服务器拿到指定链接的内容,再将取到的内容替换当前页面对应部分的内容。即

$(selector).load(URL,data,callback);

为了使返回键工作,还需要改变地址栏的内容。当然,另外还有许多的细节需要处理。动手能力强外加有编程基础的可参考这篇文章

更加“懒”的方法

这里介绍一种“一步到位”的方法,将以下代码稍作修改放入js文件中即可。

var ajaxhome='';
var ajaxcontent = 'content';
var ajaxsearch_class = 'searchform';
var ajaxignore_string = new String('#, /wp-, .pdf, .zip, .rar, /goto'); 
var ajaxignore = ajaxignore_string.split(', ');
var ajaxloading_code = 'loading';
var ajaxloading_error_code = 'error';

var ajaxreloadDocumentReady = false;
var ajaxtrack_analytics = false
var ajaxscroll_top = true
var ajaxisLoad = false;
var ajaxstarted = false;
var ajaxsearchPath = null;
var ajaxua = jQuery.browser;

jQuery(document).ready(function() {	
	ajaxloadPageInit("");
});

window.onpopstate = function(event) {
	if (ajaxstarted === true && ajaxcheck_ignore(document.location.toString()) == true) {	
		ajaxloadPage(document.location.toString(),1);
	}
};

function ajaxloadPageInit(scope){
	jQuery(scope + "a").click(function(event){
		if (this.href.indexOf(ajaxhome) >= 0 && ajaxcheck_ignore(this.href) == true){
			event.preventDefault();
			this.blur();
			var caption = this.title || this.name || "";
			var group = this.rel || false;
			try {
				ajaxclick_code(this);
			} catch(err) {
			}
			ajaxloadPage(this.href);
		}
	});
	
	jQuery('.' + ajaxsearch_class).each(function(index) {
		if (jQuery(this).attr("action")) {
			ajaxsearchPath = jQuery(this).attr("action");;
			jQuery(this).submit(function() {
				submitSearch(jQuery(this).serialize());
				return false;
			});
		}
	});
	
	if (jQuery('.' + ajaxsearch_class).attr("action")) {} else {
	}
}

function ajaxloadPage(url, push, getData){
	if (!ajaxisLoad){
		if (ajaxscroll_top == true) {
			jQuery('html,body').animate({scrollTop: 0}, 1500);
		}
		ajaxisLoad = true;
		ajaxstarted = true;
		nohttp = url.replace("http://","").replace("https://","");
		firstsla = nohttp.indexOf("/");
		pathpos = url.indexOf(nohttp);
		path = url.substring(pathpos + firstsla);
		
		if (push != 1) {
			if (typeof window.history.pushState == "function") {
				var stateObj = { foo: 1000 + Math.random()*1001 };
				history.pushState(stateObj, "ajax page loaded...", path);
			} else {
			}
		}
		if (!jQuery('#' + ajaxcontent)) {
		}
		jQuery('#' + ajaxcontent).append(ajaxloading_code);
		jQuery('#' + ajaxcontent).fadeTo("slow", 0.4,function() {
			jQuery('#' + ajaxcontent).fadeIn("slow", function() {
				jQuery.ajax({
					type: "GET",
					url: url,
					data: getData,
					cache: false,
					dataType: "html",
					success: function(data) {
						ajaxisLoad = false;
						
						datax = data.split('<title>');
						titlesx = data.split('</title>');
						
						if (datax.length == 2 || titlesx.length == 2) {
							data = data.split('<title>')[1];
							titles = data.split('</title>')[0];
							jQuery(document).attr('title', (jQuery("<div/>").html(titles).text()));
						} else {
							
						}
						if (ajaxtrack_analytics == true) {
							if(typeof _gaq != "undefined") {
								if (typeof getData == "undefined") {
									getData = "";
								} else {
									getData = "?" + getData;
								}
								_gaq.push(['_trackPageview', path + getData]);
							}
						}
						data = data.split('id="' + ajaxcontent + '"')[1];
						data = data.substring(data.indexOf('>') + 1);
						var depth = 1;
						var output = '';
						
						while(depth > 0) {
							temp = data.split('</div>')[0];
							i = 0;
							pos = temp.indexOf("<div");
							while (pos != -1) {
								i++;
								pos = temp.indexOf("<div", pos + 1);
							}
							depth=depth+i-1;
							output=output+data.split('</div>')[0] + '</div>';
							data = data.substring(data.indexOf('</div>') + 6);
						}
						document.getElementById(ajaxcontent).innerHTML = output;
						jQuery('#' + ajaxcontent).css("position", "absolute");
						jQuery('#' + ajaxcontent).css("left", "20000px");
						jQuery('#' + ajaxcontent).show();
						ajaxloadPageInit("#" + ajaxcontent + " ");
						
						if (ajaxreloadDocumentReady == true) {
							jQuery(document).trigger("ready");
						}
						try {
							ajaxreload_code();
						} catch(err) {
						}
						jQuery('#' + ajaxcontent).hide();
						jQuery('#' + ajaxcontent).css("position", "");
						jQuery('#' + ajaxcontent).css("left", "");
						jQuery('#' + ajaxcontent).fadeTo("slow", 1, function() {});
					},
					error: function(jqXHR, textStatus, errorThrown) {
						ajaxisLoad = false;
						document.title = "Error loading requested page!";
						document.getElementById(ajaxcontent).innerHTML = ajaxloading_error_code;
					}
				});
			});
		});
	}
}

function submitSearch(param){
	if (!ajaxisLoad){
		ajaxloadPage(ajaxsearchPath, 0, param);
	}
}

function ajaxcheck_ignore(url) {
	for (var i in ajaxignore) {
		if (url.indexOf(ajaxignore[i]) >= 0) {
			return false;
		}
	}
	return true;
}

function ajaxreload_code() {
	//add code here
}

function ajaxclick_code(thiss) {
	jQuery('ul.nav li').each(function() {
		jQuery(this).removeClass('current-menu-item');
	});
	jQuery(thiss).parents('li').addClass('current-menu-item');
}

以上代码提取自Advanced AJAX Page Loader插件

使用方法

  1. ajaxhome修改为主页地址
  2. ajaxcontent修改为Ajax加载部分的id,一般的主题都是content
  3. ajaxsearch_class修改为搜索表单的class,同样,一般都是类似于searchform这种的
  4. ajaxignore_string包括了不需要Ajax加载的链接格式,比如很多人都将外链转为内链,转为类似于http://example.com/goto/taobao这种格式的链接,这时就需要加上”/goto”了
  5. ajaxloading_code,ajaxloading_error_code分别是加载时和加载失败时的动画,可自行定义

请特别注意以下两点

ajaxreload_code()函数

这里面写入页面初始化时需要执行的js代码。举个例子,很多主题都含有图片弹出的效果,这种的效果一般都是通过js来实现,这时就需要将这部分实现代码放在这个函数里。以slimbox插件为例,一般是通过

jQuery(document).ready(jQuery("a[rel!=link]:has(img)").slimbox(););

来使用这个插件,因此需要在ajaxreload_code()函数里加入

jQuery("a[rel!=link]:has(img)").slimbox();

这里只有一行代码,对于多行的代码,建议包装成函数的形式,即

jQuery(document).ready(initSlim());
function initSlim(){
	jQuery("a[rel!=link]:has(img)").slimbox();
}
function ajaxreload_code() {
	initSlim();
	//other code
}

ajaxclick_code函数

很多的主题会高亮当前页面对应的菜单,这时就需要借助这个函数来实现,这个不太好说明,可参考我的修改下

function ajaxclick_code(thiss) {
	jQuery('ul.nav li').each(function() {
		jQuery(this).removeClass('current-menu-item');
	});
	jQuery(thiss).parents('li').addClass('current-menu-item');
}


Disclaimer (CC BY-NC-SA 3.0)  WordPress全站Ajax的简单实现
阅读更多
版权声明:本文为博主_老K博客的原创文章,未经博主允许不得转载。 https://blog.csdn.net/liuxuekai/article/details/42188343
个人分类: wordpress
上一篇添加 Z-Blog 博客运行天数统计效果
下一篇2015搜索引擎优化预测评估
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭