全站ajax

里是第一次说起Ajax,其实刚开始我也不太懂,更没有仔细百度,目前本站的主题就是全站ajax加载的。
据我所知,目前采用这个技术的主题还非常少见。除了由Cue开发的wpgo、胖子马的Q9 还有soz之外 剩下有两三个叫不上名字的主题。
除此之外,也一直没有很通俗的技术性文章告诉我们该怎么做,深入进去才知道其实没那么简单。初步实现ajax其实还比较容易,但要对某些效果进行后续处理就很难了。 比如:当用户浏览完一篇文章需要用浏览器进行后退操作时怎么办?此时只有地址栏的url会改变,页面还是原封不动的。

局部ajax

局部ajax其实大多数主题都已经具备了,就是我们常见的ajax评论提交,百度一下就会有很多教程。
在这里也不赘述了,而且我也没有研究过。(直接折腾全站ajax?是不是有些不切实际……)

最近制作主题一直在这个问题上滞留,其实我可以做一个很简单的主题,对于只求速度性能的人来说已经足够了。下面是一段很简单的js代码,足够实现全站ajax加载,但是没法处理上面所说的细节问题。还有一个前提,必须加载jQuery库。

  1. //ajax
  2.    $(".navbar a,.entry-title a, h3 a,.col-sm-4 a,.post-thumb a").live("click",
  3.     function() {
  4.        window.history.pushState({
  5.            time: new Date().getTime()
  6.         },
  7.         "", $(this).attr("href"));
  8.         $("#main").empty().append('这里放置加载动画的div');
  9.         
  10.         $('body,html').animate({
  11.             scrollTop: 0
  12.             },
  13.         100);
  14.         $.ajax({
  15.             type: "POST",
  16.             url: $(this).attr("href"),
  17.             success: function(data) {
  18.                 result = $(data).find("#main");
  19.                 $("#main").remove();
  20.                 $("#sidebar").before(result);
  21.                 document.title = $(data).filter("title").text();
  22.             }
  23.         });
  24.         return false
  25.     });

以上代码来自卢哥主题,百度一下应该很容易找到。
下面是按我个人理解进行注释后的代码:

  1. //ajax
  2.    $("这里加入你所要触发点击事件的a标签").live("click",
  3.     function() {
  4.        window.history.pushState({
  5.            time: new Date().getTime()
  6.         },
  7.         "", $(this).attr("href"));
  8.         $("被加载的主体id或者类,比如文章主体").empty().append('这里放置加载动画的div');
  9.         //点击事件后返回顶部
  10.         $('body,html').animate({
  11.             scrollTop: 0
  12.             },
  13.         100);
  14.         //ajax核心代码
  15.         $.ajax({
  16.             type: "POST",
  17.             url: $(this).attr("href"),
  18.             success: function(data) {
  19.                 result = $(data).find("被加载的主体id或者类,比如文章主体");
  20.                 $("被加载的主体id或者类,比如文章主体").remove();
  21.                 $("不加载部分的id或类,比如侧栏").before(result);
  22.                 document.title = $(data).filter("title").text();
  23.             }
  24.         });
  25.         return false
  26.     });

最后是新主题使用的ajax,经过改良。不过还有不少细节问题没有处理,算是初级版本代码如下:

//inlojv-ajax
$("这里加入你所要触发点击事件的a标签").live("click", 
function() {
window.history.pushState({
time: new Date().getTime()
},
"", $(this).attr("href"));
$('<div id="inlojv_ajax_loading_frame"></div><div title="页面加载中..." id="inlojv_ajax_loading"><div></div></div>').appendTo('body');

$.ajax({
type: "POST",
url: $(this).attr("href"),
success: function(data) {
result = $(data).find("被刷新的主体id或者类,比如文章主体");
$("要被替换的主体id或类").remove();
$("不被请求的主体id或者类,比如右侧栏").before(result);
document.title = $(data).filter("title").text();
},
//超时控制
timeout: 15000,
error: function() {
$('#inlojv_ajax_loading_frame,#inlojv_ajax_loading').remove();
location.href = url;    //页面错误时跳转到请求的页面
},
//完成后移除加载画面
complete: function() {
$('#inlojv_ajax_loading_frame,#inlojv_ajax_loading').remove();
}
});
//点击后返回顶部,1000是滚动速度,越大则越慢
$('body,html').animate({scrollTop: 0},1000);
return false
});

然后是CSS:

/*ajax加载动画*/
#inlojv_ajax_loading_frame{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;background-color:#428bca;opacity:.2;filter:alpha(opacity=20)}
#inlojv_ajax_loading{left:0;top:0;display:table-cell;z-index:9999999;position:fixed;width:100%;height:100%}
#inlojv_ajax_loading div{left:49%;top:49%;position:absolute;width:40px;height:40px;background:url('images/inlojv_loading.gif') 50% 50% no-repeat}

全站ajax