php+ajax实现无刷新动态加载数据技术 - 测试用了，效果还行

php+ajax实现无刷新动态加载数据技术 -　测试用了，效果还行
感觉IE下略慢，非IE速度可以，好像是不能用jquery-1.11.1.min.js，只能用网上找的代码中提供的JQuery.js我也不知道版本，我这里改名叫jquery_for_ajax.js了
由于一开始就是直接调用ajax显示最开始的一页数据，感觉加载有点慢，我再找找其它的版本也，这个是我测试能用的一个而已。记录一下

一、HTML页中就只涉及到这些，id=lists这个DIV中显示动态加载的数据，nodata这个DIV中显示的是提醒信息，比如到最后，就显示全部加载完成了。

<div id="lists"></div> 
<div class="nodata"></div>

二、JS部分，这部分可以单写在.js中，也可以直接写在HTML页中

<script type="text/javascript">
 i = 1; //设置当前页数 
 //var tagId = <?echo $tagId;?>;//如果需要传参数，这里设计变量，下面getJSON时可以传

 $(function() {
 var totalpage = <?echo $total;?>; //总页数，防止超过总页数继续滚动，可以只写数字，我这里是通过php程序先算出有多少页了.
 var winH = $(window).height(); //页面可视区域高度 

 $(window).scroll(function() {
 if (i < totalpage) { // 当滚动的页数小于总页数的时候，继续加载
 var pageH = $(document.body).height();
 var scrollT = $(window).scrollTop(); //滚动条top 
 var aa = (pageH - winH - scrollT) / winH;
 if (aa < 0.01) {
 getJson(i)
 }
 } else { //否则显示无数据
 showEmpty();
 }
 });
 getJson(0); //加载第一页
 });
 function getJson(page) {
 $(".nodata").show().html("<img src='loading.gif'/>");
 $.getJSON("ajax.php", {page: i}, function(json) { //如果需要传参数，这里可以传{page: i, tagId:tagId}
 if (json) {
 var str = "";
 $.each(json, function(index, array) {//下面这块是css代码来显示样式，数据是通过array数组传回来动态显示在这里
 var str = "<div class=\"newsitem-mes\">";
 var str = str + "<div class=\"newsitem-mes-title\">";
 var str = str + "<a href=\"view.php?id=" + array['id'] + "\" target=\"_blank\">" + array['title'] + "</a>";
 var str = str + "<div class=\"newsitem-content\">";
 var str = str + "<div class=\"time\">" + array['submitTime'] + "</div>";
 var str = str + "<div class=\"badge\">" + array['pushNum'] + "</div>";
 var str = str + "</div>";
 var str = str + "</div>";
 $("#lists").append(str);
 });
 $(".nodata").hide()
 } else {
 showEmpty();
 }
 });
 i++;
 }
 function showEmpty() {
 $(".nodata").show().html("全部信息都在这儿了......");
 }
 </script>

三、ajax.php

<?
//这里写的是数据库编码，我用的是GBK
header("Content-type: text/html; charset=GBK"); 

/*数据库连接参数*/
$HOSTNAME="localhost";
$USERNAME="root";
$PASSWORD="";
$DATABASE01="test";
$connect=mysql_connect("$HOSTNAME","$USERNAME","$PASSWORD");
mysql_select_db($DATABASE01,$connect);mysql_query("SET NAMES 'GBK'");
/*数据库连接参数*/

$page = intval($_GET['page']); //获取请求的页数 
$pagenum = 30; //每页数量 
$start = ($page - 1) * $pagenum; 

$sqlajax="select * from news order by submitTime desc limit $start,$pagenum";
$resultajax=mysql_query($sqlajax,$connect);

$arr = array(); //定义一个数组先
while ($rowajax = mysql_fetch_array($resultajax)) { 

 $arr[] = array( 
 'title' => iconv('GBK','UTF-8',$rowajax['title']) , //ajax传中文只能是UTF-8，所以有中文的注意转码先，因为我的数据库都用的GBK，所以要用php中的iconv函数转成UTF-8，数字或英文的不用转
 'submitTime' => substr($rowajax['submitTime'],0,10), 
 'pushNum' => $rowajax['pushNum']
 ); 
} 
mysql_free_result($resultajax);

if ($arr) { 
 echo json_encode($arr); //转换为json数据输出 
}
?>