ajax 有段时间没有写些技术类的文章了，（p.s，似乎其它文章也没多写。。。）。先找几个借口搪塞下，比方说：

“最近比较忙”，呸，老套! :oops:

“最近没心情”，嗯，有点挂谱， :???:

哎，找个理由其实也是蛮难的。看来，也得将嘴拙这列到缺点清单去了。 

最近，最新版的wordpress 2.7带来了全新的后台界面，加入了大量的特效，极为漂亮。并且也新增了不少特性，如评论分页和嵌套式回复。觉得有时间的话，是要考虑时下，与时俱进下，改进下ThinkAgain的模板。另外，晚上和网友回mail的时候，看到他提及尝试给主题添加ajax评论等，看来ajax的应用似乎在wordpress越来越吃香了。咱也得跟上脚步，来写篇ajax相关文章。 :mrgreen:

什么是ajax？这问题问得多好哈。晕倒先。如果对该标题没有兴趣的童鞋可以就此打住不用看了。ajax全称为Asynchronous JavaScript and XML，是一种基于javascript的动态网页开发技术吧。可以说ajax技术的发展极大扩展了javascript的应用。简单地一句话概括，利用javascript将用户请求发送给服务器，服务器接收后处理请求并将结果反馈javascript，最后javascript将结果显示在网页上。原理知道后，可以得知了需要代码处理的也就是对应这么3个步骤了： 

1. 如何利用javascript将数据提交给服务器？

2. 服务器如何处理请求？

3. 如何处理服务器的反馈。 

貌似很复杂吗？又是javascript，又是服务器处理等等。其实不然啦，别忘了有很多高手早就给小白们开发了一大箩筐好东西了。比如，jquery。

什么是jquery？又来了，Google去吧。jquery是个javascript库，其内置了非常强大且简单调用的ajax支持。这点是我们想使用的。而从2.3起，wordpress已经内置jquery了，只是在应用jquery上，在代码撰写上和原jquery略有不同而已，见文末补充资料2。

好了，既然wordpress已经内置jquery了，问题似乎很容易解决了。可以利用jquery来提交和处理ajax请求，用wordpress来搞定ajax请求。一切都是wordpress现成的，我们所做的只是如何合理地调用了。回顾下我们的口号，嘿嘿： 

“没有蛀牙”。？？？有没有搞错？说起口号，顺口就喊上了，更正下，应该是：

“最大化利用Wordpress内置资源。”

废话一大堆，转入正题，12行代码就可以给主题挂上ajax？当然，没有搞错了，继续滚动鼠标往下看。这里假设，读者能简单修改php，且愿意动手测试（否则也很难体会其中乐趣了）。 

先贴上代码。建议在本地服务器上测试。

   1: <?php wp_enqueue_script('jquery');?>
   2: <script type='text/javascript'>
   3: function my_ajax_example(){
   4:     jQuery.post("<?php echo get_option('siteurl');?>/wp-admin/admin-ajax.php",
   5:     {action:"my_ajax"},
   6:     function(str){jQuery("#ajaxtest").append(str);});}
   7: </script>
   8: <?php add_action('wp_ajax_my_ajax', 'my_ajax_example');?>
   9: <?php    function my_ajax_example(){ ;?>
  10: <?php    echo '<b>I LOVE WORDPRESS!!!</b>';    ?>
  11: <?php    exit;};?>
  12: <input type="button" value="My Ajax Example" onclick="my_ajax_example();"><div id="ajaxtest"></div>

步骤1：将第1-7行代码放到header.php内</head>标签前面。用wp_enqueue_script来加载wp内置的jquery库，2-7行是加载测试用的js代码。其中调用jquery的post函数来发送ajax请求和接收反馈。 

步骤2：将第8-11行代码添加到functions.php里面。任意位置即可。但要注意不要出现语法错误。第8行将自定义函数my_ajax_example添加到wp的ajax api接口。9-11行定义了接收ajax请求后的处理和输出内容。这里比较简单，只是输出反馈给js这么一句发自内心的话：“I LOVE WORDPRESS!!!”。

步骤3：将第12行代码添加到主题模板内拟显示ajax测试效果的地方。随便找个地方如single.php等添加进去。这行代码将会输出一个名为My Ajax Example的按钮，点击这个按钮后，即会发出一个ajax请求，然后显示ajax的反馈效果。这里是在按钮下面输出“I LOVE WORDPRESS!!!”。注意，用户应该要根据自己的需求，如ajax评论等，来修改接收ajax请求的函数内容。比如，ajax评论的话，这里就需要定义数据库全局变量$wpdb，然后添加其它语句用于将评论添加到数据库内。

通过这几行简单的代码，已经给wordpress主题挂上了Ajax。当然，这是个非常简单的，利用wordpress提供的api和内置的jquery进行ajax应用的例子。通过这个例子，主要是想提醒Developer们，可以利用wordpress提供ajax的api接口来添加ajax。至于其它应用么，那是**带进门，修行呢是要靠个人的。另外，ajax的应用，还有很多要注意，比如安全性等等。这些进门后，自己都要好好考虑的。换句话说，我还没认真考虑呢。p.s，注意利用wordpress的check_ajax_referer()。 

上面的代码测试完毕了吧。嗯，似乎少了点什么？怎么没有骨碌碌转的东西，比如这个：

loading

实现这个也很简单。多加2行代码即是了。 

   1: function my_ajax_example(){
   2:     jQuery("#ajaxtest").append('<img src="http://www.thinkagain.cn/wp-content/uploads/2008/12/loading.gif"/>');
   3:     jQuery.post("<?php echo get_option('siteurl');?>/wp-admin/admin-ajax.php",{action:"my_ajax"},
   4:     function(str){
   5:     jQuery("#ajaxtest").empty();
   6:     jQuery("#ajaxtest").append(str);});}

注意，是添加了

语句1，jQuery("#ajaxtest").append(‘<img src="http://www.thinkagain.cn/wp-content/uploads/2008/12/loading.gif"/>’);

即在显示内容前，显示该loading图片。建议将这个图片地址改为本地地址，这样加载速度会快些。以及 

语句2.jQuery("#ajaxtest").empty();

在显示内容前，将原内容清空。

p.s，加载内容前显示这种loading图片似乎是ajax的惯例了。处理方法也不单单是上面代码提到的这种，也可以利用jquery提供的其它ajax事件来激活。 

 

补充资料，有兴趣延伸阅读下，（授之以渔）：

1. WordPress ajax api接口 

用文本编辑器打开wp-admin/admin-ajax.php文件，注意Line1040（2.7版）的这行代码：do_action( ‘wp_ajax_’ . $_POST['action'] );

所以，上述代码中第5行，就是提交了一个action变量，其值为“myajax”；

2. wordpress中jquery的应用： 

要注意，调用jquery是用jQuery代替$。

Feed Me


转载文章请注明转载自：ThinkAgain - Let's Blog!

引用地址：http://www.thinkagain.cn/archives/1030.html