wordpress和ajax

时间：2008-04-15 10:10:53      类别：HTML客户端, Web技术|WEB Tech, Wordpress      本文链接：生活点滴Enjoy Life

松岛枫很多朋友都认为ajax能提高网页的速度，但是我更喜欢用ajax来提高用户体验和平衡动态页面与静态页面之间的关系。我曾经乱谈过ajax，原因在于有几个朋友认准了一个死理：那就是ajax对改善速度的作用是大大的！而今天的这篇文章中，我想重点谈一谈如何在wordpress系统中使用ajax，也就是如何通过修改模板或者插件在wordpress中灵活的运用ajax。

对了，如果你还不太清楚ajax的基本原理，请自行google之，本站就不再为互联网贡献垃圾了。在实际的操作中，我们运用ajax的方式大部分情况下为异步请求（当然你也可以设置成同步模式），异步请求的好处在于浏览器在载入html的同时，后台也会用js请求数据，所以载入数据的时候感觉不到任何卡页的现象。由于数据的请求是由JS控制，因此你可以将ajax代码嵌入到静态化的wordpress页面中，从而将部分的内容通过ajax做实时的请求，而本文的目的便在于此。

下面举例说明如何运用ajax在静态的首页中实时的请求最新留言（如果你已经使用了 cos-html-cache，这个例子没有必要了，因为 cos-html-cache在有新的留言的时候会自动更新首页）。首先我们想到的应该是如何去产生最新留言这个数据，这里有两种方式，一种是插件，另外一种就是直接修改模板，其实归根结底都一样，所以我们就用插件来举例，按照本人的老规矩，所有的说明均在下面代码中的注释里面体现。

  1. /*
  2. Plugin Name: GetLatestComment
  3. Plugin URI: http://www.storyday.com
  4. Description: use ajax to show comments
  5. Version: 1.0
  6. Author: jiangdong
  7. date:2007-04-20
  8. Author URI:http://www.storyday.com
  9. */
  10.  
  11. if( !function_exists("cos_get_latest_comments")){
  12. //该函数是获取最新留言，通过查询wp的数据库获取信息，函数命名为cos_主要是防止和别人的插件冲突
  13.         function cos_get_latest_comments($no_comments = 5, $before = '<li> ', $after = '</li>', $show_pass_post = false,$trim_num=20) {
  14. //no_comments 表示取出留言的数量
  15. //$before  $after为显示留言的标签 
  16. //$trim_num留言最长字符数
  17.  
  18.         global $wpdb, $tablecomments, $tableposts;
  19.         $request = "SELECT ID, comment_ID, comment_content, comment_author FROM $tableposts, $tablecomments WHERE $tableposts.ID=$tablecomments.comment_post_ID AND (post_status = 'publish' OR post_status = 'static')";//
  20.  
  21.         if(!$show_pass_post) { $request .= "AND post_password ='' "; }
  22.  
  23.     $request .= "AND comment_approved = '1' ORDER BY $tablecomments.comment_date DESC LIMIT $no_comments";
  24.     $comments = $wpdb->get_results($request);
  25.     $output = '';
  26.     foreach ($comments as $comment) {
  27.        $comment_author = stripslashes($comment->comment_author);
  28.        $comment_content = strip_tags($comment->comment_content);
  29.        $comment_content = stripslashes($comment_content);
  30.        $comment_excerpt = utf_substr($comment_content,$trim_num);//utf_substr这个函数是为了截断中文字utf8符串
  31.        $permalink = get_permalink($comment->ID)."#comment-".$comment->comment_ID;
  32.        $output .= $before . '<a href="' . $permalink . '" title="View the entire comment by ' . $comment_author . '">' .$comment_author .  '</a>' . $comment_excerpt . $after;
  33. //这里输出留言
  34.        }
  35.            $output = "< ?xml  version='1.0' encoding='utf-8'?><ul class='latestcomments'>".$output."</ul>";
  36.            header( 'Content-type: text/xml;charset=utf-8' );//将留言用xml格式输出，当然有可能不是合法的xml文件，不过这没有关系
  37.        echo $output;
  38.         }
  39. }
  40. //
  41.  
  42.  
  43. //show latest comments by index.php?action=storyday.showCommentsList
  44. //下面的函数是将函数挂载到wordpress 初始化的钩子上
  45. if( !function_exists("add_cos_cutom")){
  46.         function add_cos_cutom(){
  47.                 if(  'storyday.showCommentsList' == $_GET['action']   ){
  48. //如果get的参数是storyday.showCommentsList即请求是index.php?action=storyday.showCommentsList
  49. //则调用下面的函数，在本例子中，该函数就是显示最新5条留言
  50. //函数调用完毕之后直接终止输出die();
  51.                         cos_get_latest_comments($no_comments = 5, $before = '<li> ', $after = '</li>', $show_pass_post = false,30);
  52.                         die();
  53.                 }
  54.         }
  55. }
  56. add_action('init', 'add_cos_cutom');
  57. //将该函数挂载到init钩子上，各位客官，这下访问index.php?action=storyday.showCommentsList
  58. //就可以看到最新留言的数据流

下面是截断字符串的函数，主要用于正常的uft8编码截断，所以没有放在上面一起，如果你的wp插件库中没有这个函数，请添加到上面的代码中。
  1. if( !function_exists("utf_substr")){
  2.         function utf_substr($str,$len){
  3.                 if( strlen( $str ) < = $len )
  4.                         return $str;
  5.                 for($i=0;$i<$len;$i++)
  6.                 {
  7.                         $temp_str=substr($str,0,1);
  8.                         if(ord($temp_str) > 127){
  9.                                 $i++;
  10.                         if($i< $len)    {
  11.                                 $new_str[]=substr($str,0,3);
  12.                                 $str=substr($str,3);
  13.                                 }
  14.                         }
  15.                 else {
  16.                         $new_str[]=substr($str,0,1);
  17.                         $str=substr($str,1);
  18.                         }
  19.                 }
  20.                
  21.                 $new_str = join($new_str);
  22.                 $new_str = $new_str."...";
  23.                 return $new_str;
  24.         }
  25. }

好了，服务器端如何获取留言的插件已经搞定。现在我们就开始考虑如何在客户端处理了。当然，如果你采用了jquery，只需要在模板对应的文件中加上下面的这段代码即可

  1. <div id="latest-comment"></div>
  2. <script>
  3. url = "< ?php echo get_settings('home'); ?>/index.php?action=storyday.showCommentsList";
  4. $(”#latest-commen”).load(url);
  5. </script>

—-如果你没有使用jQuery 请看下面的代码 ————-
ajax函数代码

  1. <script LANGUAGE="JavaScript">
  2. <!--
  3. var req;
  4. var global_divname;
  5. function loadXMLDoc(url,divnm,is_asc) {
  6.     // branch for native XMLHttpRequest object
  7.         global_divname = divnm; 
  8.         if(document.getElementById(global_divname) == null){
  9.                 alert('ERROR:HTML tag not exists!');
  10.                 return false;
  11.         }
  12.     if (window.XMLHttpRequest) {
  13.         req = new XMLHttpRequest();
  14.         req.onreadystatechange = processReqChange;
  15.         req.open("GET", url, true);
  16.         req.send(null);
  17.     // branch for IE/Windows ActiveX version
  18.     } else if (window.ActiveXObject) {
  19.         req = new ActiveXObject("Microsoft.XMLHTTP");
  20.         if (req) {
  21.             req.onreadystatechange = processReqChange;
  22.             req.open("GET", url, is_asc);
  23.             req.send();
  24.         }
  25.     }
  26.         return true;
  27. }
  28. //////////////////
  29. function processReqChange() {
  30.     // only if req shows "loaded"       
  31.     if (req.readyState == 4) {
  32.       // only if "OK"
  33.         if ( (req.status == 200)&&(global_divname != null) ) {
  34.             // ...processing statements go here...
  35.                         document.getElementById(global_divname).innerHTML = req.responseText ;
  36.         } else {                       
  37.                                 alert("数据载入失败");   
  38.         }
  39.     }
  40. }       
  41. //-->
  42. </script>

利用上面的ajax函数代码获取数据
  1. <div id="latest-comment"></div>
  2. <script>
  3. url = "< ?php echo get_settings('home'); ?>/index.php?action=storyday.showCommentsList";
  4. loadXMLDoc(url,"latest-comment",true);
  5. </script>

不知道我有没有说清楚？如果没有，请留言。当然前提条件是你要基本熟悉wordpress的插件机制，如果你不熟悉，或者上面的那个插件你可以用来作为参考。

俗话说，书中自有颜如玉，没有美女怎么行，管她是不是AV女优松岛枫？

标签：,
发表于 2008-04-15 10:10:53 目录：HTML客户端, Web技术|WEB Tech, Wordpress [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
如果您喜欢本blog，欢迎你的feed订阅，谢谢你的支持
上一篇： « 最近的一些事情 下一篇： 体验wordpress2.5的好处 »

前8排已经被占据了 快抢好位置哦

  • 第1楼 tsian 在 2008.04.15 10:21发表评论如下:

    沙发，先占茅坑。

    [回复他/她]
  • 第2楼 lxltop 在 2008.04.15 10:25发表评论如下:

    我很晕，怎么是松岛枫？我没看错吧

    [回复他/她]
    • 第3楼 cosβ 在 2008.04.15 11:40发表评论如下:

      看来确实是老手，一看就知道是松岛枫，不过人家是大名人了！

      [回复他/她]
  • 第4楼 paran 在 2008.04.15 14:16发表评论如下:

    这个得好好研究一下.

    [回复他/她]
  • 第5楼 星点 在 2008.04.15 17:37发表评论如下:

    搞不懂,这个图到底是啥作用 - -”

    [回复他/她]
    • 第6楼 cosbeta 在 2008.04.15 20:06发表评论如下:

      你一定是O型学,没有作用,随便放一张图片而已

      [回复他/她]
  • 第7楼 浅浅蓝 在 2008.04.15 22:36发表评论如下:

    松岛枫，我喜欢！

    [回复他/她]
  • 第8楼 偶爱偶家 在 2008.04.17 08:50发表评论如下:

    最后一句不会是为了SEO吧?

    [回复他/她]
  • 转到第 页
(Required)
(Required, not published)
如果留言未显示请不要重复留言，我将为你恢复！


生活点滴Enjoy Life is proudly powered by WordPress | admin| About Us | cosbeta| Bluehost| site map 0.424s & 41