获取用户动态在一些论坛等社交网络中很常见，甚至可以说，就是一个微博嘛。其实这个系统很简单的，很容易就能写出来。
当然，你平时要做好准备，在你的后台数据库加一张动态表，在用户发帖、回帖等各个动作的执行时候，再加一条把用户的各个动作入库，记录到一张专门的动态表内。时刻收集好用户的动态，这样才能向用户的好友或者整个网站的用户展示好友动态。
现在举一个例子来说明，怎么编写一个获取动态系统，也就是微博。
一、基本目标
假设我们现在收集了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=什么什么函数()则无法把这个事件绑定在这个按钮的！