序言
今天是星期一,是我发文章的日子。最近在搞一个东西,就是将ajax运用到wordpress中,大家可以看我的博客,里面有很多的ajax的东西,包括:
1.首页的分页的ajax
2.评论分页的ajax
3.侧边栏评论的最近评论ajax
4.评论ajax提交
后面的文章将逐步介绍如何实现上面的ajax功能,这篇文章的主要目的是让大家了解ajax的用法,用一个简单的例子说明ajax的使用,让大家能很快上手ajax,写出自己需要的ajax程序。

ajax的优缺点
缺点:

  1. 各个浏览器对XMLHttpRequest对象的支持度不足(兼容性问题)
  2. 破坏浏览器的前进,后退功能。
  3. 对搜索引擎支持不足。
  4. 调试工具支持不足。
  5. 编程比较复杂
  6. 需要多加载jquery.js和自定义的js,第一次加载会影响速度
    优点:
  7. 加载需要的页面,避免重复加载
  8. 使用使用时的体验较好
  9. 可以装一下,毕竟主题支持动态加载,nb啊,呵呵

ajax的需要的元素
元素包括:

  1. 一个html页面,这里包含了有css标记的元素,比如a,可以供js来寻找,在用户点击的时候发出ajax请求
  2. jquery.js,下载地址为:http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js
  3. 定义的js文件,规定请求的动作,和接受数据之后的动作
  4. 后台模板中的functions.php定义一个函数,用了规定接受到ajax请求之后后台要做的动作。

元素的位置:

  1. html就在文章中写即可
  2. jquery.js在header.php中包含

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js”>
复制代码

3.把自己定义的js保存为 test.js,同样在header.php中包含

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/functions/test.js”>
复制代码

4.functions.php中添加行数即可

例子的运行情况
见:http://localhost/9.html

html部分
你随便写一个文章,用html模式,把下面的代码贴进去就可以了。注意将
http://localhost/?navi=2 换成你的http://自己域名/?navi=2

1
2
3
4
5
6
<div class=”test_response”>
<div> 返回结果的位置 </div>
<div class=”test_navi”>
<a href=”http://127.0.0.1/dhblog/?navi=1″>第一页</a> <a href=”http://dhblog.org/?navi=2″>第二页</a> <a href=”http://127.0.0.1/dhblog/?navi=3″>第三页</a>
</div>
</div>

js部分
下面的代码保存为 test.js文件,放到模板里面,记得在header.php中包含哦

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
var tnavi=’.test_navi’;
var tnavi_a=’.test_navi a’;
var tresponse=’.test_response’;
$(document).ready(function test_navi(){
$(tnavi_a).click(function() {
var z = $(this).attr(“href”);
$.ajax({
url: z,
type:”POST”,
data:”action=test_action”,
beforeSend:function()
{
document.body.style.cursor = ‘wait’;
var C=0.7;
$(tresponse).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:’alpha(opacity=’ + C * 100 + ‘)’});
$(tnavi).html(‘<a>载入中…</a>’);
},
error:function (xhr, textStatus, thrownError){
alert(“readyState: ” + xhr.readyState + ” status:” + xhr.status + ” statusText:” + xhr.statusText +” responseText:” +xhr.responseText + ” responseXML:” + xhr.responseXML + ” onreadystatechange” +xhr.onreadystatechange);
alert(thrownError);
},
success: function (data)
{
//alert(data);
$(tresponse).html(data);
document.body.style.cursor = ‘auto’;
test_navi();//翻页后DOM变化了,需要重新绑定函数
}
});
return false;
});
})

后台php部分
下面的代码放到functiongs.php中,http://localhost/?navi=2 换成你的http://自己域名/?navi=2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*****************************************************
函数名称:test_action_do
函数作用:简单的ajax的例子
行数作者:dhblog
******************************************************/
function test_action_do(){
if( isset($_POST[‘action’])&& $_POST[‘action’] == ‘test_action’){
$navi=$_GET[‘navi’];
echo ‘<div class=”test_response”>’;
echo ‘<div> 我是ajax返回的结果哦!您选择的第’. $navi .’页</div>’;
echo ‘<div class=”test_navi”>’;
echo ‘<a href=”http://127.0.0.1/dhblog/?navi=1″>第一页</a> ‘;
echo ‘<a href=”http://127.0.0.1/dhblog/?navi=2″>第二页</a> ‘;
echo ‘<a href=”http://127.0.0.1/dhblog/?navi=3″>第三页</a>’;
echo ‘</div>’;
echo ‘</div>’;
die();
}else{
return;
}
}
add_action(‘template_redirect’, ‘test_action_do’);

希望大家通过上面的例子能够理解ajax的工作过程,能做好ajax学习的第一步!