MENU

没基础也可以!不用插件给你的博客加上AJAX 使你的博客瞬间成为高大上!

在看正文之前我们先来了解一下什么是AJAX

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

看到这里你可能一脑袋浆糊,我也一样,不过不要紧,这是摘自于某百科,我们不需要理解(其实他们是什么不重要,只要能达到我们需要的效果就行。)

为什么需要AJAX(或者是哪些情况需要ajax)

以我的动漫博客『君好き』为例,这里暂时称我的动漫博客为『K』吧
进过我的K博客的都知道,右边有个音乐播放器

1

 

假如你在首页就开始听音乐听到这个进度时你点开文章。

m1

 

然后在没有ajax的情况下你就会发现你“日了狗了”

m2

音乐在点开文章之后重新播放了,你可能会说,点开文章会刷新页面,重新播放是理所当然的事情。但是!我们现在的目的就是打破这个理所当然!让音乐在点开文章是继续播放而不是重新播放!

哪些网站使用了ajax

据某百科所说,该技术在1998年前后由Outlook Web Access成功应用(当然这不重要,我还是说说现在哪些知名的站点使用ajax)。
我所知道的应用ajax的知名站点有youtube、google、gmail、github、coding(这些对于我们也不重要,接下来我们就讲讲如何使用ajax)。

如何使用ajax

由于我们的教程面向与新的站长与博主与零基础的人,教程结束后我就把某个wordpress插件里的ajax脚本拿来供大家引用。

第一部:找出目标站点的文章标签

为了便于分析代码鄙人介绍史上最良心最纯净最好的浏览器『google chrome』至于为什么这个是最好的,相信有一定前端基础的人都知道,新手的话用一段时间你就会发现。

废话不说,说说如何去找出它,首先我们来看2幅图

y1y2

 

左边为首页,右边为文章 (图片点击查看大图!)

通过分析K站我们可以发现首页和文章两个页面唯一不同的地方就是公告栏下面、右侧导航栏左边的那一块,这里我们称这一块不同的地方为W,我们产生一个思路,如果每次打开页面仅是刷新w块,其它块不动,我们把播放器放到不动的块里不就可以了。没错这就是ajax的主要作用。

下面我给大家介绍如何找出区块

scys从上图我们可以发现W块为我们要改的区块,它的class为“content”它的id为“wzajax” (看到这里有的人会发现自己分析的区块没有id,不要紧,这种情况我们等下介绍如何去修改。)

记下这个id的值,这个值是ajax实现的关键。接下来我们开始实现ajax

第二步:实现ajax

这里我提供一段来自wordpress的某个知名ajax插件的代码

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');
}

 

此段代码包含一些我们需要改的参数,这里我已代码的形式写出来供你修改

var ajaxhome='https://blog.ni-co.moe'; //这是你的站点根网址,链接为绝对路径,访问方式2选一如果使用https则http访问会失去ajax功能,反过来同理
var ajaxcontent = 'content'; //这里填写分析需要改变的区块得到的id(没有id的不要急下面会说如何添加id)
var ajaxsearch_class = 'searchform'; //这里是搜索表单的class,一般为searchform
var ajaxignore_string = new String('#, /wp-, .pdf, .zip, .rar, /goto'); //这里为不用ajax加载的东西,如音乐、视频、文件等资源,将其后缀如上方式添加进去,如果你使用外链转内联则需要填写一个路径,如/goto,
var ajaxignore = ajaxignore_string.split(', '); //这句不需要改
var ajaxloading_code = 'loading'; //这是在加载的时候暂时显示的文字
var ajaxloading_error_code = 'error'; //这是加载出现问题时显示的文字

这一段在代码最顶上,改好后保存成js文件,然后打开你的站点的header.php文件将其引用在<head>标签内引用jquery语句的下面即可
wordpress引用示例

<script type='text/javascript' src='<?php bloginfo("template_url"); ?>/ajax/ajax.js'></script>//这里的意思是调用js文件,其路径为你的主题路径(主题路径由php自动获取)ajax文件夹下的ajax文件。

要引用ajax的区块没有ID怎么办

这里时间关系就简单的说下吧,不会不要紧我还会专门再写一个文章来说明

首先打开你所有的主题文件,将你要引用ajax区块的class复制然后在这些文件里查找(所有的文件都要找)找到的话在后面加上id="随意取一个字母的id名字"然后同上面说明一样修改就可以了。

如果你哈不会的话请邮箱联系我:我的邮箱

无标签
最后编辑于: 2017 年 03 月 30 日
996.icu 996.icu