很多朋友都认为ajax能提高网页的速度,但是我更喜欢用ajax来提高用户体验和平衡动态页面与静态页面之间的关系。我曾经乱谈过ajax,原因在于有几个朋友认准了一个死理:那就是ajax对改善速度的作用是大大的!而今天的这篇文章中,我想重点谈一谈如何在wordpress系统中使用ajax,也就是如何通过修改模板或者插件在wordpress中灵活的运用ajax。
对了,如果你还不太清楚ajax的基本原理,请自行google之,本站就不再为互联网贡献垃圾了。在实际的操作中,我们运用ajax的方式大部分情况下为异步请求(当然你也可以设置成同步模式),异步请求的好处在于浏览器在载入html的同时,后台也会用js请求数据,所以载入数据的时候感觉不到任何卡页的现象。由于数据的请求是由JS控制,因此你可以将ajax代码嵌入到静态化的wordpress页面中,从而将部分的内容通过ajax做实时的请求,而本文的目的便在于此。
下面举例说明如何运用ajax在静态的首页中实时的请求最新留言(如果你已经使用了 cos-html-cache,这个例子没有必要了,因为 cos-html-cache在有新的留言的时候会自动更新首页)。首先我们想到的应该是如何去产生最新留言这个数据,这里有两种方式,一种是插件,另外一种就是直接修改模板,其实归根结底都一样,所以我们就用插件来举例,按照本人的老规矩,所有的说明均在下面代码中的注释里面体现。
- /*
- Plugin Name: GetLatestComment
- Plugin URI: http://www.storyday.com
- Description: use ajax to show comments
- Version: 1.0
- Author: jiangdong
- date:2007-04-20
- Author URI:http://www.storyday.com
- */
- //该函数是获取最新留言,通过查询wp的数据库获取信息,函数命名为cos_主要是防止和别人的插件冲突
- function cos_get_latest_comments($no_comments = 5, $before = '<li> ', $after = '</li>', $show_pass_post = false,$trim_num=20) {
- //no_comments 表示取出留言的数量
- //$before $after为显示留言的标签
- //$trim_num留言最长字符数
- $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')";//
- if(!$show_pass_post) { $request .= "AND post_password ='' "; }
- $request .= "AND comment_approved = '1' ORDER BY $tablecomments.comment_date DESC LIMIT $no_comments";
- $comments = $wpdb->get_results($request);
- $output = '';
- foreach ($comments as $comment) {
- $comment_excerpt = utf_substr($comment_content,$trim_num);//utf_substr这个函数是为了截断中文字utf8符串
- $permalink = get_permalink($comment->ID)."#comment-".$comment->comment_ID;
- $output .= $before . '<a href="' . $permalink . '" title="View the entire comment by ' . $comment_author . '">' .$comment_author . '</a>' . $comment_excerpt . $after;
- //这里输出留言
- }
- $output = "< ?xml version='1.0' encoding='utf-8'?><ul class='latestcomments'>".$output."</ul>";
- echo $output;
- }
- }
- //
- //show latest comments by index.php?action=storyday.showCommentsList
- //下面的函数是将函数挂载到wordpress 初始化的钩子上
- function add_cos_cutom(){
- if( 'storyday.showCommentsList' == $_GET['action'] ){
- //如果get的参数是storyday.showCommentsList即请求是index.php?action=storyday.showCommentsList
- //则调用下面的函数,在本例子中,该函数就是显示最新5条留言
- //函数调用完毕之后直接终止输出die();
- cos_get_latest_comments($no_comments = 5, $before = '<li> ', $after = '</li>', $show_pass_post = false,30);
- }
- }
- }
- add_action('init', 'add_cos_cutom');
- //将该函数挂载到init钩子上,各位客官,这下访问index.php?action=storyday.showCommentsList
- //就可以看到最新留言的数据流
下面是截断字符串的函数,主要用于正常的uft8编码截断,所以没有放在上面一起,如果你的wp插件库中没有这个函数,请添加到上面的代码中。
- function utf_substr($str,$len){
- return $str;
- for($i=0;$i<$len;$i++)
- {
- $i++;
- if($i< $len) {
- }
- }
- else {
- }
- }
- $new_str = $new_str."...";
- return $new_str;
- }
- }
好了,服务器端如何获取留言的插件已经搞定。现在我们就开始考虑如何在客户端处理了。当然,如果你采用了jquery,只需要在模板对应的文件中加上下面的这段代码即可
- <div id="latest-comment"></div>
- <script>
- url = "< ?php echo get_settings('home'); ?>/index.php?action=storyday.showCommentsList";
- $(”#latest-commen”).load(url);
- </script>
—-如果你没有使用jQuery 请看下面的代码 ————-
ajax函数代码
- <script LANGUAGE="JavaScript">
- <!--
- var req;
- var global_divname;
- function loadXMLDoc(url,divnm,is_asc) {
- // branch for native XMLHttpRequest object
- global_divname = divnm;
- if(document.getElementById(global_divname) == null){
- alert('ERROR:HTML tag not exists!');
- return false;
- }
- if (window.XMLHttpRequest) {
- req = new XMLHttpRequest();
- req.onreadystatechange = processReqChange;
- req.open("GET", url, true);
- req.send(null);
- // branch for IE/Windows ActiveX version
- } else if (window.ActiveXObject) {
- req = new ActiveXObject("Microsoft.XMLHTTP");
- if (req) {
- req.onreadystatechange = processReqChange;
- req.open("GET", url, is_asc);
- req.send();
- }
- }
- return true;
- }
- //////////////////
- function processReqChange() {
- // only if req shows "loaded"
- if (req.readyState == 4) {
- // only if "OK"
- if ( (req.status == 200)&&(global_divname != null) ) {
- // ...processing statements go here...
- document.getElementById(global_divname).innerHTML = req.responseText ;
- } else {
- alert("数据载入失败");
- }
- }
- }
- //-->
- </script>
利用上面的ajax函数代码获取数据
- <div id="latest-comment"></div>
- <script>
- url = "< ?php echo get_settings('home'); ?>/index.php?action=storyday.showCommentsList";
- loadXMLDoc(url,"latest-comment",true);
- </script>
不知道我有没有说清楚?如果没有,请留言。当然前提条件是你要基本熟悉wordpress的插件机制,如果你不熟悉,或者上面的那个插件你可以用来作为参考。
俗话说,书中自有颜如玉,没有美女怎么行,管她是不是AV女优松岛枫?
标签:ajax, Wordpress
前8排已经被占据了 快抢好位置哦
沙发,先占茅坑。
我很晕,怎么是松岛枫?我没看错吧
看来确实是老手,一看就知道是松岛枫,不过人家是大名人了!
这个得好好研究一下.
搞不懂,这个图到底是啥作用 - -”
你一定是O型学,没有作用,随便放一张图片而已
松岛枫,我喜欢!
最后一句不会是为了SEO吧?