当前位置: 秋叶网络博客 网络技术 ◊ 全站ajax技术实现的通用方法

全站ajax技术实现的通用方法

作者:秋了秋 发表时间:2014年09月20日

其实ajax全站无刷新效果我很久之前就在我的网站动过手术,总希望能实现该功能,网上找了许多方法,要哪样哪样不行,折腾来折腾去还是没成功,不是有这个bug就是有那个bug。再加上我网站的代码也不是很规范,因为网上的代码很多都不靠谱,很多js是直接出错的。最后特意装了个插件,用它是不可能的,只想把它的核心代码扒过来,可没想到的是,插件也用不了的,勉强可以实现ajax加载,可是加载后把我的一些源代码暴漏出来了。因为对js不熟悉,找来找去也找不到原因,再后来直接就放弃了。

今天随意逛了下博客,发现inlojv也分享了一段js代码,于是抱着试试的态度试了下,神奇地发现居然可行,果断用上这高大上的功能。其实这是从插件上得来的一段代码,既然我的都行,那这方法应该适合大部分主题的,现在把它分享给大家:

code代码运行图标以下是程序代码

提示:可以先修改部分代码再运行

把这段代码加入到自己主题的js文件中,如果你的主题文章容器是content的话,加入后可以直接使用,无需修改任何代码(首页地址还是要改的~),如果确要修改,核心代码后面都有注释,修改起来易如反掌。

以上是第一种方法,据一些人测试,很多主题可以实现ajax效果,但是加载不出来内容,现在分享第二种方法,据说兼容性更好,亲测几个主题都可以。如果你用第一段代码出问题,不妨试试以下这段卢哥主题的代码:

jQuery(document).ready(function($){
var ajx_main = '#blogitem' , // 要替换的主体id,改为你文章部分的容器
ajx_a = 'a' , // a标签,自己添加排除规则
ajx_comt = 'comments' , // 整个评论区的id ,不加#
ajx_submit_form = '#comment_form' , // 提交按钮所在的表单
ajx_comtlist = '.comment-list' , // 评论列表id或class
ajx_comtpagenav = '.pagenav' , // 评论分页导航的id或class
ajx_comtpagenav_a = '.pagenav a' , // 评论分页导航的a标签
ajx_sform = '.inlo-search form' , // 搜索表单form标签
ajx_skey = '.s-key' ; // 搜索表单input标签内的id或class
function reload_func(){
// 这里放置需要重载的JS或函数
}


$(function() {
a(); //pushState初始化执行一次
});
// 建立锚点函数,用于跳转后的滚动定位,使用这个主要是有侧栏评论带#号时能在请求后定位到该条评论的位置
function body_am(id) {
id = isNaN(id) ? $('#' + id).offset().top : id;
$("body,html").animate({
scrollTop: id
}, 0);
return false;
}
function to_am(url) {
var anchor = location.hash.indexOf('#'); // 用indexOf检查location.href中是否含有'#'号,如果没有则返回值为-1
anchor = window.location.hash.substring(anchor + 1);
body_am(anchor);
}
// 主页地址,用于下面的提交函数
var home_url = document.location.href.match(/http:\/\/([^\/]+)\//i)[0];
// 函数: 替换url,用于评论ajax提交
function replaceUrl(url, domain) {
return url.replace(/http:\/\/([^\/]+)\//i, domain);
}
// 函数:从封装的Json获取
function getFormJson(frm) {
var o = {};
var a = $(frm).serializeArray();
$.each(a,
function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
}
// 函数:更新浏览器历史缓存(用于浏览器后退)
function l(){
history.replaceState( // 刷新历史点保存的数据,给state填入正确的内容
{ url: window.document.location.href,
title: window.document.title,
html: $(document).find(ajx_main).html(), // 抓取主体部分outerHTML用于呈现新的主体。也可以用这句 html: $(ajx_main).prop('outerHTML'),
}, window.document.title, document.location.href);
}
// 函数:页面载入初始一次,解决Chrome浏览器初始载入时产生ajax效果的问题,并且监听前进后退事件
function a(){
window.addEventListener( 'popstate', function( e ){ //监听浏览器后退事件
if( e.state ){
document.title = e.state.title;
$(ajx_main).html( e.state.html ); //也可以用replaceWith ,最后这个html就是上面替换State后里面的html值
// 重载js
window.load = reload_func(); // 重载函数
}
});
}
//函数:AJAX核心
function ajax(reqUrl, msg, method, data) {
if (msg == 'pagelink' || msg == 'search') { // 页面、搜索
$(ajx_main).fadeTo('slow',0.6);
} else if ( msg == 'comment' ){ // 评论提交
$('#' + ajx_comt).fadeTo('slow',0.5);
} else if ( msg == 'comtpagenav' ){ // 评论分页时
$(ajx_comtlist).fadeTo('slow',0.5);
$(ajx_comtpagenav).fadeTo('slow',0.8);
}
$.ajax({
url: reqUrl,
type: method,
data: data,
beforeSend : function () { //加载前操作 这个必须放在window.history.pushState()之前,否则会出现逻辑错误。
l(); //刷新历史点内容,这个必须放在window.history.pushState()之前,否则会出现逻辑错误。
},
success: function(data) {
if (msg == 'pagelink' || msg == 'search') { // 又如果msg为 页面 或 搜索—— 【1】
$(ajx_main).html($(data).find(ajx_main).html()) ; // 替换原#main的内容
$(ajx_main).fadeTo('normal',1);
} else if (msg == 'comment') { // 又如果msg为 评论回复——————————【2】
$('#' + ajx_comt).html($(data).find('#' + ajx_comt).html());// 评论列表滑出
$('#' + ajx_comt).fadeTo('normal',1);
$("body,html").animate({scrollTop:$('#'+ajx_comt).offset().top}, 900); // 定位返回评论ID顶部
} else if (msg == 'comtpagenav') { // 又如果msg为 评论分页——【3】
var content = $(data).find(ajx_main).html();
var pagedstring = $(data).find(ajx_comtpagenav).html();
$(ajx_main).html(content);
$(ajx_comtpagenav).html(pagedstring);
$(ajx_comtlist).fadeTo('normal',1); // 评论列表显示
$(ajx_comtpagenav).fadeTo('normal',1); // 评论分页显示
$("body,html").animate({scrollTop:$(ajx_comtlist).offset().top}, 600);
}
document.title = $(data).filter("title").text(); // 浏览器标题变更
if (msg != 'comment') { // —— 不为后退 也 不为评论回复时
var state = { // 设置state参数
url: reqUrl,
title: $(data).filter("title").text(),
html: $(data).find(ajx_main).html(),
};
// 将当前url和历史url添加到浏览器当中,用于后退。里面三个值分别是: state, title, url
window.history.pushState(state, $(data).filter("title").text(), reqUrl);
}
},
complete: function() { // ajax完成后加载
// 代码重载区
if (msg == 'pagelink') { // 若msg为 页面链接
to_am(reqUrl) ;// 定位到相应链接位置,这个必须放在window.history...之后执行,否则遇到带#号的链接,再点击其他链接地址栏就无法改变
}
window.load = reload_func(); // 重载函数
},
timeout: 5000, // 超时长度
error: function(request) { // 错误时的处理
if (msg == msg == 'pagelink' || msg == 'search'){
location.href = reqUrl; //直接刷新跳转到请求的页面链接
} else if (msg == 'comment') { // 若msg为评论回复
alert($(request.responseText).filter("p").text()); // 弹出警告,这个是必需的,如果删除那么提交错误时就会打开空白页面
$('#' + ajx_comt).fadeTo('normal',1);
} else if ( msg == 'comtpagenav' ) {
$(ajx_comtlist).fadeTo('normal',1); // 警告后评论区显示
$(ajx_comtpagenav).fadeTo('normal',1); // 警告后评论区显示
} else {
location.href = reqUrl; //页面错误时跳转到请求的页面
}
},
});
}
//页面ajax
$('body').on("click",ajx_a,
function() {
ajax($(this).attr("href"), 'pagelink');
return false;
});
//评论ajax
$('body').on('submit',ajx_submit_form,
function() {
ajax(replaceUrl(this.action, home_url), 'comment', 'POST', getFormJson(this));
return false;
});
//搜索ajax
$('body').on('submit',ajx_sform,
function() {
ajax(this.action + '?s=' + $(this).find(ajx_skey).val(), 'search');
return false;
});
//评论分页ajax
$('body').on("click",ajx_comtpagenav_a,
function() {
ajax($(this).attr("href"), 'comtpagenav');
return false;
});
});

确保你的主题已经加载了jQuery,否则也是不行的。

2
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/127.html
目录: 网络技术 | 标签: ajax, 全站无刷新 | 18977次阅读