ajax实现无刷新分页
2010-07-16 10:23 o2oo 阅读(478) 评论(4) 编辑 收藏 举报直接给出源代码，可自行分析，写的不好请留言指正，谢谢！
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <title>投票结果</title>
5 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
6
7 <script type="text/javascript">
8
9 function GetXmlHttpObject()
10 {
11 var xmlHttp=null;
12 try
13 {
14 // Firefox, Opera 8.0+, Safari
15 xmlHttp=new XMLHttpRequest();
16 }
17 catch (e)
18 {
19 // Internet Explorer
20 try
21 {
22 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
23 }
24 catch (e)
25 {
26 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
27 }
28 }
29 return xmlHttp;
30 }
31 function checkajax(){
32 xmlHttp=GetXmlHttpObject()
33
34 if (xmlHttp==null)
35 {
36 alert ("您的浏览器不支持AJAX！");
37 return ;
38 }else
39 {
40 return xmlHttp;
41 }
42 }
43 function preshow(){
44 ajaxobj = checkajax();
45 var url = "page.php?page=1";
46 ajaxobj.onreadystatechange=stateChanged;
47 ajaxobj.open("GET",url,true);
48 ajaxobj.send(null);
49 }
50 function showHint1(str)
51 {
52 ajaxobj = checkajax();
53 document.getElementById("msg").innerHTML="正在读取数据……";
54
55 var url = str;
56 ajaxobj.onreadystatechange=stateChanged;
57 ajaxobj.open("GET",url,true);
58 ajaxobj.send(null);
59
60 }
61
62 function showHint2(str)
63 {
64 ajaxobj=checkajax();
65 document.getElementById("msg").innerHTML="正在读取数据……";
66
67 var url = str;
68 ajaxobj.onreadystatechange=stateChanged;
69 ajaxobj.open("GET",url,true);
70 ajaxobj.send(null);
71 }
72 function showHint3(str)
73 {
74 ajaxobj=checkajax();
75 document.getElementById("msg").innerHTML="正在读取数据……";
76
77 var url = str;
78 ajaxobj.onreadystatechange=stateChanged;
79 ajaxobj.open("GET",url,true);
80 ajaxobj.send(null);
81 }
82 function showHint4(str)
83 {document.getElementById("msg").style.display="none";
84 ajaxobj=checkajax();
85 document.getElementById("msg").innerHTML="正在读取数据……";
86
87 var url = str;
88 ajaxobj.onreadystatechange=stateChanged;
89 ajaxobj.open("GET",url,true);
90 ajaxobj.send(null);
91 }
92
93
94 function stateChanged()
95 {
96 if (xmlHttp.readyState==4)
97 {
98 document.getElementById("message").innerHTML=xmlHttp.responseText;
99 }
100 }
101 </script>
102 </head>
103
104 <body onload="preshow()">
105 <div id="wrapper">
106 <h4>用户留言如下：</h4>
107 <div id="message">
108 </div>
109 </div>
110 </body>
111 </html>
112
2 <html>
3 <head>
4 <title>投票结果</title>
5 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
6
7 <script type="text/javascript">
8
9 function GetXmlHttpObject()
10 {
11 var xmlHttp=null;
12 try
13 {
14 // Firefox, Opera 8.0+, Safari
15 xmlHttp=new XMLHttpRequest();
16 }
17 catch (e)
18 {
19 // Internet Explorer
20 try
21 {
22 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
23 }
24 catch (e)
25 {
26 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
27 }
28 }
29 return xmlHttp;
30 }
31 function checkajax(){
32 xmlHttp=GetXmlHttpObject()
33
34 if (xmlHttp==null)
35 {
36 alert ("您的浏览器不支持AJAX！");
37 return ;
38 }else
39 {
40 return xmlHttp;
41 }
42 }
43 function preshow(){
44 ajaxobj = checkajax();
45 var url = "page.php?page=1";
46 ajaxobj.onreadystatechange=stateChanged;
47 ajaxobj.open("GET",url,true);
48 ajaxobj.send(null);
49 }
50 function showHint1(str)
51 {
52 ajaxobj = checkajax();
53 document.getElementById("msg").innerHTML="正在读取数据……";
54
55 var url = str;
56 ajaxobj.onreadystatechange=stateChanged;
57 ajaxobj.open("GET",url,true);
58 ajaxobj.send(null);
59
60 }
61
62 function showHint2(str)
63 {
64 ajaxobj=checkajax();
65 document.getElementById("msg").innerHTML="正在读取数据……";
66
67 var url = str;
68 ajaxobj.onreadystatechange=stateChanged;
69 ajaxobj.open("GET",url,true);
70 ajaxobj.send(null);
71 }
72 function showHint3(str)
73 {
74 ajaxobj=checkajax();
75 document.getElementById("msg").innerHTML="正在读取数据……";
76
77 var url = str;
78 ajaxobj.onreadystatechange=stateChanged;
79 ajaxobj.open("GET",url,true);
80 ajaxobj.send(null);
81 }
82 function showHint4(str)
83 {document.getElementById("msg").style.display="none";
84 ajaxobj=checkajax();
85 document.getElementById("msg").innerHTML="正在读取数据……";
86
87 var url = str;
88 ajaxobj.onreadystatechange=stateChanged;
89 ajaxobj.open("GET",url,true);
90 ajaxobj.send(null);
91 }
92
93
94 function stateChanged()
95 {
96 if (xmlHttp.readyState==4)
97 {
98 document.getElementById("message").innerHTML=xmlHttp.responseText;
99 }
100 }
101 </script>
102 </head>
103
104 <body onload="preshow()">
105 <div id="wrapper">
106 <h4>用户留言如下：</h4>
107 <div id="message">
108 </div>
109 </div>
110 </body>
111 </html>
112
1 <?php
2 $link = mysql_connect('localhost', 'root', '') or die(mysql_error());
3 mysql_select_db('vote', $link) or die(mysql_error());
4 mysql_query("set names utf8");
5 $num = 3;
6 $url = "page.php";
7 $con = "<ul id='msg'>";
8 $page = (isset($_REQUEST['page'])) ? $_REQUEST['page'] : 1;
9 $offset = ($page - 1) * $num;
10 $result = mysql_query("SELECT COUNT(*) FROM client");
11 $total = mysql_fetch_row($result);
12 $total = $total[0];
13 $pagenum = ceil($total / $num);
14 $page = min($pagenum, $page); //获得首页
15 $prepg = $page - 1; //上一页
16 if ($prepg <= 1)
17 $prepg = 1;
18 $nextpg = ($page == $pagenum ? 1 : $page + 1); //下一页
19 //如果只有一页则跳出函数：
20 if ($pagenum <= 1)
21 return false;
22
23 $sql = "SELECT `name`,`content` FROM `client` LIMIT " . $offset . "," . $num;
24 $res = mysql_query($sql);
25 while ($content = mysql_fetch_row($res)) {
26 $con .= "<li><span>$content[0]:</span> $content[1]</li>";
27 }
28 $con .= "</ul>";
29 $con .= <<< PAGE
30 <p id="page"><a href="#" id="first" onclick="showHint1('$url?page=1')">首页</a>|<a href="#" id="pre" onclick="showHint2('$url?page=$prepg')">上一页</a>|<a href="#" id="next" onclick="showHint3('$url?page=$nextpg')">下一页</a>|<a href="#" id="last" onclick="showHint4('$url?page=$pagenum')">尾页</a></p>
31
32 PAGE;
33
34 echo $con;
35 ?>
2 $link = mysql_connect('localhost', 'root', '') or die(mysql_error());
3 mysql_select_db('vote', $link) or die(mysql_error());
4 mysql_query("set names utf8");
5 $num = 3;
6 $url = "page.php";
7 $con = "<ul id='msg'>";
8 $page = (isset($_REQUEST['page'])) ? $_REQUEST['page'] : 1;
9 $offset = ($page - 1) * $num;
10 $result = mysql_query("SELECT COUNT(*) FROM client");
11 $total = mysql_fetch_row($result);
12 $total = $total[0];
13 $pagenum = ceil($total / $num);
14 $page = min($pagenum, $page); //获得首页
15 $prepg = $page - 1; //上一页
16 if ($prepg <= 1)
17 $prepg = 1;
18 $nextpg = ($page == $pagenum ? 1 : $page + 1); //下一页
19 //如果只有一页则跳出函数：
20 if ($pagenum <= 1)
21 return false;
22
23 $sql = "SELECT `name`,`content` FROM `client` LIMIT " . $offset . "," . $num;
24 $res = mysql_query($sql);
25 while ($content = mysql_fetch_row($res)) {
26 $con .= "<li><span>$content[0]:</span> $content[1]</li>";
27 }
28 $con .= "</ul>";
29 $con .= <<< PAGE
30 <p id="page"><a href="#" id="first" onclick="showHint1('$url?page=1')">首页</a>|<a href="#" id="pre" onclick="showHint2('$url?page=$prepg')">上一页</a>|<a href="#" id="next" onclick="showHint3('$url?page=$nextpg')">下一页</a>|<a href="#" id="last" onclick="showHint4('$url?page=$pagenum')">尾页</a></p>
31
32 PAGE;
33
34 echo $con;
35 ?>
