此新闻评论系统共分为五个部分,分别为数据库、前台页面、JS代码、服务器处理、CSS样式。
数据库的设计
PL表:
字段名
类型
长度
id
自动编号
user
文本
20
dateandtime
日期/时间
content
备注
newid
数字
前台页面:(index.htm)
如上图所示,前台页面共包括两部分,上半部分为页面评论列表显示,下半部分为提交评论。由于我们这里只是模拟一个新闻评论系统,并没有真正的新闻页面,那么在传递新闻ID的时候我们采用了一个默认值 〈input name="newsid" value="1" type="hidden"/〉。
代码:index.htm
〈%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%〉
〈!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=gb2312" /〉
〈title〉评论系统〈/title〉
〈script src="main.js"〉〈/script〉
〈link href="main.css" rel="stylesheet" type="text/css" /〉
〈/head〉
〈body〉
〈div id="pllist"〉正在加载评论……
〈script〉 loadDom();setTimeout("loadDom()",10000);〈/script〉
〈/div〉
〈div style="width:240px;font-size:12px;text-align:center"〉
〈fieldset〉〈legend〉评论〈/legend〉
呢称:〈input name="user" type="text" style="width:180px"/〉〈input name="newsid" value="1" type="hidden"/〉〈br/〉
内容:〈textarea name="content" style="width:180px;height:80px"〉〈/textarea〉〈br/〉
〈input name="submit" value="我要评论" onclick="fb();" type="button" /〉
〈/fieldset〉
〈/div〉
〈div style="font-size:12px;" id="msg"〉
〈/div〉
〈/body〉
〈/html〉
JS代码页(核心部分) main.js
JS代码算是本系统的一个核心部分了,Ajax的体现基本全包含在这短短数十行的代码中,是连结前台与后台处理的一个桥梁,可谓是重中之重,为了更好的让大家理解整个功能,我们将分段介绍。
1、获得XmlHttp对象,创建并返回一个XmlHttp对象。
var xhr;
function getXHR()
{
try {
xhr=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xhr=false;
}
}
if(!xhr&&typeof XMLHttpRequest!='undefined')
{
xhr=new XMLHttpRequest();
}
return xhr;
}
function openXHR(method,url,callback)
{
getXHR();
xhr.open(method,url);
xhr.onreadystatechange=function()
{
if(xhr.readyState!=4)return;
callback(xhr);
}
xhr.send(null);
}
function loadXML(method,url,callback)
{
getXHR();
xhr.open(method,url);
xhr.setRequestHeader("Content-Type","text/xml");
xhr.setRequestHeader("Content-Type","GBK");
xhr.onreadystatechange=function()
{
if(xhr.readyState!=4)return;
callback(xhr);
}
xhr.send(null);
}
具体的调用方法:
loadXML(method,url,callback)
method: http方法,例如:POST、GET、PUT及PROPFIND
url: 请求的URL地址,可以为绝对地址也可以为相对地址
callback:自定义的返回处理函数