不刷新（AJAX）获取文章的内容

周一,2009 十一 30 23:27:19

相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲解。在这想跟大家分享下。AJAX加载文章的内容。当然，这里还是基于JQ的load方法来实现。OK，来看效果：

load1

load2

load3

首先，定义三个变量：

var objTag= $(".post");//定义要获取内容所在的节点
var num= objTag.length;//定义节点的数量
var _cache=new Object;//建立一个缓存对像

然后构建一个加载的函数：

function loadentry(n){
var _url=$(objTag[n]).children(".archive-post-title").children("h2").children("a").attr("href");//定义要加载文章的地址
$('<div class="details"><div style="width:160px;margin-top:8px;padding:0 2px;font-size:12px;background: #01E343; color:#FFF;">正在加载文章内容，请稍等！</div></div>').insertBefore($(objTag[n]).children(".singledata"));//插入提示信息
if(_cache[_url]==null){//判断是否有缓存
$(objTag[n]).children(".details").load(_url+" .post .entry",function(){
_cache[_url]=$(objTag[n]).children(".details").html();
$('<span class="archive-arrow"><span title="收起全文" class="hide fRight" onclick="closentry("'+n+'");">收起全文↑</span></span>').insertAfter($(objTag[n]).children(".details"));
});//加载文章内容
}else{
$(objTag[n]).children(".archive-post-title").children(".archive-arrow").remove();
$(objTag[n]).children(".details").html(_cache[_url]);//直接显示缓存对像的内容
$('<span class="archive-arrow"><span title="收起全文" class="hide fRight" onclick="closentry("'+n+'");">收起全文↑</span></span>').insertAfter($(objTag[n]).children(".details"));
}
$(objTag[n]).children(".archive-post-title").children(".archive-arrow").remove();
}

这部分对于不懂JQ的人来说可能有点复杂。懂JQ的人看起来一定很简单。就是一个对DOM的操作。通过动态的插入清除节点来实现我们需要的效果。关健在于“.load()”的用法。

到这已经实现了加载了。接着需要做个删除也就是收起全文；相比加载，删除要简单的多了，就是直接删除节点就行了。

function closentry(n){
$(objTag[n]).children(".details").animate({height: 'toggle'}, "slow",function(){$(this).remove()});
$(objTag[n]).children(".archive-arrow").remove();
$('<div class="archive-arrow"><span title="阅读全文" class="show" onclick="loadentry("'+n+'");">阅读全文↓</span></div>').insertAfter($(objTag[n]).children(".archive-post-title").children("p"));
}

这段代码就是一个基本的节点操作。在这就不作说明了；当然，最后我们需要插入节点并绑定事件。

$(document).ready(function(){
for(a=0;a<num;a++){
$(objTag[a]).children(".archive-post-title").children(".archive-arrow").append('<span class="show" title="阅读全文" onclick="loadentry("'+a+'");">阅读全文↓</span>');
}
});