码迷,mamicode.com
首页 > Web开发 > 详细

【php】配合Ajax与Json,根据MVC思想,无插件,完美兼容IE6,编写一个获取动态系统

时间:2015-05-27 14:07:28      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:动态   ajax   json   mvc   php   

获取用户动态在一些论坛等社交网络中很常见,甚至可以说,就是一个微博嘛。其实这个系统很简单的,很容易就能写出来。

当然,你平时要做好准备,在你的后台数据库加一张动态表,在用户发帖、回帖等各个动作的执行时候,再加一条把用户的各个动作入库,记录到一张专门的动态表内。时刻收集好用户的动态,这样才能向用户的好友或者整个网站的用户展示好友动态。

现在举一个例子来说明,怎么编写一个获取动态系统,也就是微博。


一、基本目标

假设我们现在收集了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,编写一个获取动态系统

标签:动态   ajax   json   mvc   php   

原文地址:http://blog.csdn.net/yongh701/article/details/46043709

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!