- GL~19′Life.- JQuery-WordPress的全站Ajax加载

Search the Site

JQuery-WordPress的全站Ajax加载

by 19. on 2008-07-12

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

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

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

<?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的最上面

</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>

<!-- 之后标题下直接添加相关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

{ Tags: ajax, jquery, WordPress }

(查看之前文章) » 仿PSP的FLASH歌词同步波形播放器. | (查看之后文章) » SVN架设在Apache的记录文档 |

本篇日志相关文章：

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

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

CIN 说： ( Has commented 1 times in LL19.com )

四月 30, 2009于11:47 上午

非常不错的尝试，我最近也想把网站改为ajax加载，不过一先只打算用简单的xmlhttp 来加载不过，看了你的站点，觉得jQuery也是一个比较不错的解决方案来的。不过有一点，如果可以克服了，就很不错了~~就是浏览器的前进后退按钮问题~~~呵呵

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  四月 30, 2009于1:57 下午
  
  @CIN:
  这块我的做法是AJAX后把前面访问的地址和当前的地址输出在页面上（网站上部），至于要用JS模拟或者执行浏览器的后退按钮来浏览过去的数据还有待琢磨一下，也许可以实现 – 。-，这两天放假刚好研究研究。
  
  回复 | 回复并邮件
verymore 说： ( Has commented 1 times in LL19.com )

一月 12, 2009于2:24 下午

不错，有的时候全站ajax也是非常有用的。

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  一月 12, 2009于3:03 下午
  
  有用到说不上~
  算是个人心血来潮~顺应下趋势。不过想对应我的19~line连续播放倒是有些用。
  
  回复 | 回复并邮件
Betty 说： ( Has commented 5 times in LL19.com )

十二月 19, 2008于12:53 下午

你这样做出来的地址栏不会变，比如在首页上点了某个文章标题，文章的内容是加载出来了，但地址栏显示的url还是首页的

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  十二月 19, 2008于1:22 下午
  
  AJAX就是这样啊~
  想要做成页面AJAX,但是浏览器地址又要对应当前页面据我所知应该不行。
  所以才在右上角每次都提示上次浏览过的地址防止AJAX失败返回不到之前的页面。
  
  回复 | 回复并邮件
19. 说： ( Admin commented )

十二月 16, 2008于4:23 下午

哈哈！老大出错了吧~
在这个页面（http://www.ll19.com/jquery-wordpress-ajax.html#js104）点上面的GL’LL是无法返回首页的哦~

：你说那个有”#”没”#”是你点击的某个链接时候才会出问题，和你打开有没有”#”的链接后再AJAX没有关系。
我的站很早就解决这个问题了，你说的那个访问（http://www.ll19.com/jquery-wordpress-ajax.html#js104）点上面的GL’LL是无法返回首页的哦~应该早就解决了不会有这样的问题~

至于你打开AJAX的地址如果有”#”要么你就不去AJAX这个页，要么就自己截下字符串：
1 2 3 4 5 6
var _1=jQuery(this).attr("href"); if(_1!=null){ if(_1.indexOf("#")!=-1){ _1=_1.split("#")[0]; } }
回复 | 回复并邮件
- 纪小年说： ( Has commented 2 times in LL19.com )
  
  十二月 18, 2008于5:43 下午
  
  真的会出错哦~.
  点击GL‘LL回主页的时候一直出现
  等待加载…LL19.com.
  Loading for life…….
  然后就是出错了。.
  难道是我网速？.
  .
  另：没有LL大大的本领，已经放弃全站Ajax了…囧
  
  回复 | 回复并邮件
  - 19. 说： ( Admin commented )
    
    十二月 18, 2008于5:55 下午
    
    应该是网络问题 >_<
    
    回复 | 回复并邮件
纪小年说： ( Has commented 28 times in LL19.com )

十二月 16, 2008于4:11 下午

而且我做出来的网址后面有个#号…
删除了jQuery(‘#entry-post-<?php the_ID() ?>’).attr("href","#");里面的,"#"会导致加载完Ajax之后又从加载的地址进去了。。。。

回复 | 回复并邮件
纪小年说： ( Has commented 28 times in LL19.com )

十二月 16, 2008于4:07 下午

哈哈！老大出错了吧~
在这个页面（http://www.ll19.com/jquery-wordpress-ajax.html#js104）点上面的GL’LL是无法返回首页的哦~

回复 | 回复并邮件
匿名说： ( Stranger commented in LL19.com )

十一月 8, 2008于3:14 下午

readCosBetaCookie is not defined
我如此尝试，但是浏览器报错呢
而且我无法更改载入时的内容

回复 | 回复并邮件
Shawn 说： ( Has commented 1 times in LL19.com )

十月 22, 2008于7:28 下午

谢谢，很棒的内容。

回复 | 回复并邮件