获取用户动态在一些论坛等社交网络中很常见,甚至可以说,就是一个微博嘛。其实这个系统很简单的,很容易就能写出来。
当然,你平时要做好准备,在你的后台数据库加一张动态表,在用户发帖、回帖等各个动作的执行时候,再加一条把用户的各个动作入库,记录到一张专门的动态表内。时刻收集好用户的动态,这样才能向用户的好友或者整个网站的用户展示好友动态。
现在举一个例子来说明,怎么编写一个获取动态系统,也就是微博。
一、基本目标
假设我们现在收集了16条用户动态在Testtable表里面,时间什么的具体数据居然有条1877年发表的动态,请忽略这些细节,毕竟这16数据都是我自己乱打的。
假设这个表各个字段代表的东西如下图,毕竟这个表我用来做了多个实验,因此字段名称为何number是代表发表的动态,也请忽略这些细节,先假设这个number字段,代表用户的动态。
然后在一个网页上,按时间排序,先显示5条动态,如果用户想看更多,则点击按钮,每次读出5条给用户看。
当然,考虑到用户体验性什么鬼,我们还要在加载动态的时候,显示“加载中……”
如果没有最新动态,则提示。同时削去“查看更多的按钮”
二、基本思想
目录结构如下,就三个页面。
三、制作过程
1、首先在model.php根据《【php】利用php的构造函数与析构函数编写Mysql数据库查询类》(点击打开链接)的思想,写好数据库查询类,把testTable这些用户动态表的动态按照时间的倒序查询出来,把查询结构存放到一个testTableList的二维数组里面。
<?php class testtable{ private $con; function __construct($databaseName){ $this->con=mysql_connect("localhost","root","root"); if(!$this->con){ die("连接失败!"); } mysql_select_db($databaseName,$this->con); mysql_query("set names utf8;"); } public function getAll(){ $result=mysql_query("select * from testtable order by date desc;"); $testtableList=array(); for($i=0;$row=mysql_fetch_array($result);$i++){ $testtableList[$i]['id']=$row['id']; $testtableList[$i]['username']=$row['username']; $testtableList[$i]['number']=$row['number']; $testtableList[$i]['date']=$row['date']; } return $testtableList; } function __destruct(){ mysql_close($this->con); } } ?>2、之后我们要再Controller.php,根据Model.php查询出来的二维数据,构造一个如下图的Json给前台的View.html页面。这个Json其实就是第1-6条动态。Json说白了,就是一个特殊的字符串。在这个controller.php构造出如下格式的字符串,打印出来,在view.html用Ajax获取这串字符串就可以了。
不过打印这个字符串的时候,必须注意,在利用php构造循环的时候,不要在某些容易忽略的位置多打逗号,,否则前台的javascript一辈子都识别不了此乃Json。
在Json字符串前后用[ ]括起来,前台的javascript直接用eval就可以了。
具体代码如下:
<?php header("Content-type: text/html; charset=utf-8");//设置编码,其实不设置也可以的。接受的javascript所在的页面设置好就可以了。 include_once("model.php");//引入数据库查询类 $dynamicPage=$_REQUEST["dynamicPage"];//从前台传递过来的动态起始位置 $testtable=new testtable("test"); $testtableList=$testtable->getAll();//把整张test数据库中的testtable表拿出来再说 $total=$dynamicPage+5;//初定查询5条动态 if($dynamicPage+5>count($testtableList)){//如果剩余的动态不足5条 $total=count($testtableList);//则把剩余的动态读出来就可以了 } //下面根据存放查询结果的二维数组构造json字符串 $jsonStr=""; //注意,php中字符串与字符串的连接是点.,数字的相加是+,不要和C++,Java等语言混淆了 $jsonStr.="["; for($i=$dynamicPage;$i<$total;$i++){//只构造动态起始位置到(动态起始位置+5)的共5条动态给前台的javascript $jsonStr.="{ 'id':'".$testtableList[$i]['id']."', 'username':'".$testtableList[$i]['username']."', 'number':'".$testtableList[$i]['number']."', 'date':'".$testtableList[$i]['date']."' }";//注意最后一项的date结尾没有逗号 if($i+1!=$total){//注意,如果是数组的最后一项没有逗号 $jsonStr.=","; } } $jsonStr.="];"; echo $jsonStr;//注意构造完这个字符串要打印在这个php页面上 ?>3、view.html,最后大功告成的一步也就是javascript的内容,
首先,这个页面在HTML布局中什么都没有。就一个标题,与一个设置好id的div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态列表</title> </head> <body> <h1>动态列表</h1> <div id="dynamic"> </div> </body> </html>之后是《【JavaScript】网页节点的增删改查》(点击打开链接)的难点。具体代码如下:
<script> //动态的起始位置一开始是0 var dynamicPage=0; //创建Ajax对象,不同浏览器有不同的创建方法,其实本函数就是一个简单的new语句而已。 function createXMLHttpRequest() { var XMLHttpRequest1; if (window.XMLHttpRequest) { XMLHttpRequest1 = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { XMLHttpRequest1 = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { XMLHttpRequest1 = new ActiveXObject("Microsoft.XMLHTTP"); } } return XMLHttpRequest1; } function getDynamic(){ //如果有“查看更多”这个按钮,那么我们在添加最新动态的时候,先删去 if(document.getElementById("moreButton")){ //删除这个按钮 var moreButton=document.getElementById("moreButton"); moreButton.parentNode.removeChild(moreButton); } //创建一个加载中的p节点,加到动态列表id="dynamic"的div中,设置好id,一会儿便于删除 var pLoading = document.createElement("p"); pLoading.id="pLoading"; pLoading.innerHTML="加载中……"; document.getElementById("dynamic").appendChild(pLoading); //这句话纯属恶搞! alert("假设网速很卡"); //开始对controller.php这个页面进行Ajax var XMLHttpRequest1=createXMLHttpRequest(); var url="controller.php"; //通过post方法 XMLHttpRequest1.open("POST",url,true); XMLHttpRequest1.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //给它传递dynamicPage这个参数 XMLHttpRequest1.send("dynamicPage=" + dynamicPage); XMLHttpRequest1.onreadystatechange=function(){ if(XMLHttpRequest1.readyState==4){ if(XMLHttpRequest1.status==200){ var data=eval(XMLHttpRequest1.responseText);//把后台的字符串读成json处理 if(data==""){//如果这是空串就简单了,直接扔一个“无最新动态”的p节点给dynamic的div var p = document.createElement("p"); p.innerHTML="没有最新动态了!"; frag.appendChild(p); } else{ //因controller.php扔过来的东西比较多,我们把创建的动态先放到一个文件碎片上面 //不要读一条加一条,是读一条加一条到文件碎片上面,最后把整个文件碎片加到网页上,这样就不卡了 var frag = document.createDocumentFragment(); for (var i = 0; i < data.length; i++) {//对于json数组的操作 //为json数组中的每一个json,创建一个p节点 var p = document.createElement("p"); //这个p的内容如下 p.innerHTML="id为:"+data[i].id+"的"+data[i].username+"在"+data[i].date+"的动态是:"+data[i].number; //把这个p放到文件碎片上 frag.appendChild(p); //再补条华丽的分割线 var hr = document.createElement("hr"); frag.appendChild(hr); } //最后我们在于文件碎片中补个查看更多的按钮 var moreButton = document.createElement("button"); moreButton.id="moreButton"; moreButton.innerHTML="查看更多……"; //注意在javascript设置按钮的事件是怎么设置的! moreButton.onclick=function(){getDynamic()}; frag.appendChild(moreButton); //动态的起始位置偏移5个位置 dynamicPage=dynamicPage+5; } //最后才把整个文件碎片放到div里面。这样就不会读一条,网页节点被操作一次了。 document.getElementById("dynamic").appendChild(frag); //当然,我们要移除那个“加载中...”的p节点 pLoading=document.getElementById("pLoading") pLoading.parentNode.removeChild(pLoading); } else{ alert("网络连接中断!"); } } }; } //一开始,先读5条动态给用户看看吧! getDynamic(); </script>
Javascript删除节点是有技巧的,先用var xx=document.getElementById("xx")找到自己,然后找自己的家长来删除自己xx.parentNode.removeChild(xx);
在Javascript如果利用var xx=document.createElement("button");创建一个按钮,那么这个按钮的onclick事件必须写成xx.onclick=function(){什么什么函数()},如果只写xx.onclick=什么什么函数()则无法把这个事件绑定在这个按钮的!
【php】配合Ajax与Json,根据MVC思想,无插件,完美兼容IE6,编写一个获取动态系统
原文地址:http://blog.csdn.net/yongh701/article/details/46043709