JQuery-WordPress的全站Ajax加载

By19.Published on七月 12, 2008 5:15. 527 Views .
很差差一般好非常好 (4 次评分, 平均: 4.75 out of 5)
Loading ... Loading ...

利用jQuery来简单实现WordPress的全Ajax加载.

现在站点已经完成了大部分链接的AJAX加载。我的做法是因为每次打开文章只需要SINGLE部分，打开首页面之类只需要INDEX部分，所以HEADER,SIDEBAR,FOOT就加载一次就行了。

在INDEX和SINGLE的相关部分加了一句：

1
2
3
4
5
6
7
8
9
10
11

<?php 
$glll=$_POST["glll"];
if ($glll != "ajax") {
get_header(); 
}
?>
<?php 
if ($glll != "ajax") {
get_footer(); 
}
?>

就是说判断什么时候来读取HEADER和FOOT，一般如果从搜索引擎或者其他链接进来是不会post一个值为ajax的参数glll的，所以我们在自己页面点击的时候就可以传这个参数进来判断他不去执行HEADER,SIDEBAR,FOOT之类了。

然后在HEADER的末尾

1

<div id="ajaxPost" style="margin:0; padding:0;">

和FOOT的最上面

1

</div>

这个ID叫ajaxPost的DIV就用做每次点击链接来替换相应内容，比如我首页输出了文章的标题链接我点击他来AJAX在当前页面：

1
2

<!-- 这是我的文章标题链接 -->
<h2><a href="<?php the_permalink(); ?>" id="entry-post-<?php the_ID() ?>"  title=" Link to <?php the_title(); ?> ...GL`LL."  name="PostID-<?php the_ID() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!-- 之后标题下直接添加相关JS -->
<script type="text/javascript">
jQuery('#entry-post-<?php the_ID() ?>').click(function() {
<!-- 点击之后再替换URL成"#",因为我觉得链接是要全部输出来才好，毕竟要让搜索引擎收录的。 -->
jQuery('#entry-post-<?php the_ID() ?>').attr("href","#");
<!-- #ajaxPost 在加载成功前就显示等待加载之类的文字 -->
document.getElementById("ajaxPost").innerHTML = "<div  style="margin-bottom:800px;  padding-left:60px; padding-top:20px;"><h2>等待加载...<?php the_title(); ?>.</h2><br><font style="font:Verdana; font-size:9px; color:#0000FF">Loading for life......</font>&nbsp;&nbsp;&nbsp;<img src="http://www.ll19.com/glll/images/busy.gif" border="0" /></div>";
jQuery.ajax({ 
<!-- 访问的链接 -->
url : "<?php bloginfo('home') ?>/?p=<?php the_ID() ?>", 
<!-- 传入的用来判断的参数 -->
data : "glll=ajax",
dataType : "html",
<!-- 这里为了不让在请求后将data附加在URL上，所以请不要用默认的GET  -->
type : "post",
success : function(message){
<!-- message 就是已经读取完毕的内容了 用innerHTML或者jQuery的方法输出到#ajaxPost都可以-->
document.getElementById("ajaxPost").innerHTML = message;
<!-- 下面是为了执行massage中的JS innerHTML后不能执行JS的问题也可以用这个方法轻松解决-->
var script = new Array();
script = jQuery("#ajaxPost script");
for (var i=0; i<script.length; i++) {
eval (jQuery(script[i]).html());
}
},
<!-- 抛出错误的话  -->
error : function(result) {
alert(result.responseText);
document.getElementById("ajaxPost").innerHTML = "<div  style="margin-bottom:800px;  padding-left:60px; padding-top:20px;"><h2>AJAX Error...<h2></div>";
}
});
});
</script>

success会得到所访问地址返回的非错误页面（当然你可以设置他的类型，并非就非要是HTML）。比如PHP访问后输出的echo或者比如访问java的servlet后out.print();(不过做JAVA更多用DWR实现AJAX)。

error则得到返回的错误页面，result.responseText得到具体的错误信息。
也可以用一些比如slideDown和slideUp来让他更牛B的显示出来,最后觉得呢《奋斗》这片应该改名叫《吃喝玩乐谈对象》。

关于SEO的说明：JQuery是不用去掉a中的href加入onclick之类才能执行的，你完全可以输出所有的链接（不论是WP默认的http://****/?p=之类还是已经在后台设置了静态链接的.html之类），之后在页面的最下加入执行AJAX的JS，比如这个页面我输出的链接也是静态链接，你如果直接点击确实是AJAX来加载，不过如果是右键新窗口的话打开的就是他输出的链接，所以是不会影响搜索引擎收录的，因为你所有链接已经正常输出了。

写了一篇后续文章，提供了一个实现此效果的JQuery的插件~：http://www.ll19.com/sweetcron_wordpress_ajax.html

AJAX后用“前进后退”按钮浏览历史记录请看这篇文章~：http://www.ll19.com/for_ajax_history.html

本文来自： http://www.ll19.com/jquery-wordpress-ajax.html

{ Tags: , , }
«
»
这篇文章发布于 2008年07月12日，星期六，5:15 上午，归类于 Diary。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。

29 Responses to “ JQuery-WordPress的全站Ajax加载 ”

  1. yang yang 说： ( Has commented 4 times in LL19.com )
    九月 28, 2011 17:55 于 5:55 下午

    还是不会弄呀！
    郁!

    回复 |  回复并邮件
  2. dqaria dqaria 说： ( Has commented 1 times in LL19.com )
    七月 25, 2011 8:15 于 8:15 上午

    很给力的ajax效果~

    回复 |  回复并邮件
  3. 瞿胜佳 瞿胜佳 说： ( Has commented 1 times in LL19.com )
    四月 17, 2011 14:09 于 2:09 下午

    非常值得学习。。。。。。。。。。

    回复 |  回复并邮件

回复分页(Comments pages):     « 早前评论   

文章回复(Leave a reply):

注意: 评论者允许直接点击留言人下方的“回复并邮件”按钮将自己回复的评论邮件通知另外评论者。点击“回复”按钮则只回复不发邮件。