📄 19-1.htm
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>无刷新留言簿</title>
<style type="text/css">
<!--
body { text-align: center; font-family:"宋体", Arial; margin:0; padding:0; background: #FFF; font-size:12px; color:#6D6D6D; background-color:#F0F0F0}
div,form,img,ul,ol,li,dl,dt,dd,p { margin: 0; padding: 0; border: 0;}
li{ list-style:none; margin-bottom:5px}
input,textarea{ border:1px solid #CCCCCC; overflow:hidden}
.sub{height:20px; width:48px; background:url(images/input_bg.gif); border:0; padding:2px 0 0; font-size:12px;}
.purple,a.purple:link,a.purple:visited{ color:#AC349B}
.cBlack,a.cBlack:link,a.cBlack:visited{ color:#000;}
#head{ margin:5px 0 8px 0; font:bold 12px Arial, Helvetica, sans-serif ;color:#AC349B}
#content{ text-align: left; margin:0 20px 12px 20px; padding: 8px;border:1px solid #CBCBCB; background-color:#FFF; line-height:18px}
#revBox{text-align: left;margin:-3px 20px 12px 20px;padding: 8px;border:1px solid #CBCBCB; background-color:#FFF; line-height:18px}
#list{text-align: left;margin:-3px 20px 12px 20px;}
#list div{ margin-bottom:5px;padding: 8px;border:1px solid #CBCBCB; background-color:#FFF; line-height:18px}
.title{text-align: left;margin:0 20px 5px 22px; color:#AC349B; font-weight: bold;}
-->
</style>
<script language="javascript">
var xmlHttp; //定义变量
var addNew; //定义变量
/* 显示留言 */
function showre()
{
obj=document.getElementById("list"); //获取对象
obj.innerHTML="<div>评论载入中...</div>"; //改变层的内容
var date=new Date();
temp=date.getTime();
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLRPC对象
xmlHttp.onreadystatechange=showlist; //定义句柄函数
var url="19-1.php?timestamp="+temp; //定义URL
xmlHttp.open("GET",url,true); //打开连接
xmlHttp.send(null); //发送请求
}
function showlist()
{
if(xmlHttp.readyState==4) //如果传递完成
{
if(xmlHttp.status==200) //如果服务器返回OK
{
document.getElementById("list").innerHTML=""; //清空显示层内容
//获取所有用户名
xmlAuthor=xmlHttp.responseXML.getElementsByTagName("Author");
//获取所有留言内容
xmlContent=xmlHttp.responseXML.getElementsByTagName("Content");
for(i=0;i<xmlContent.length;i++) //遍历结果
{
var Content=xmlContent[i].firstChild.data; //循环获取留言内容
Content=Content.split("\n");
var temp="";
for(j=0;j<Content.length;j++)
{
if(j==Content.length-1) temp=temp+Content[j];
else temp=temp+Content[j]+"<br>";
}
var div=document.createElement("DIV"); //循环创建层
div.id=i; //为创建的层设置ID
if(Content=="没有留言") //如果没有留言内容
{
div.innerHTML="没有留言"; //设置当前层内容为“没有留言”
}
else
{
var Author=xmlAuthor[i].firstChild.data; //获取作者信息
var PostTime=xmlAuthor[i].getAttribute('PostTime'); //获取留言时间
div.innerHTML="<span class='purple'>"+Author+"</span>于"+PostTime+"发表留言：<br /><span class='cBlack'>"+temp+"</span>"; //设置当前层的内容
}
document.getElementById("list").appendChild(div); //将当前层添加到主显示层中
}
}
else //如果服务器没有返回200
{
alert("执行过程中出现问题，服务器返回："+xmlHttp.statusText);
}
}
}
/* 发送留言 */
function AddNew()
{
obj=document.getElementById("sendGuest"); //获取发送按钮对象
obj.disabled=true; //使发送按钮不可用
//获取用户输入的用户名与留言内容
var Author=document.getElementById("memAuthor").value;
var Content=document.getElementById("memContent").value;
if(Author==""||Content=="") //如果两者中有一个为空
{
alert("请填写完整！"); //弹出警示框
obj.disabled=false; //使发送按钮可用
return false; //返回假值
}
addNew=new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLRPC对象
addNew.onreadystatechange=sendGuest; //定义句柄函数
var GuestInfo="Author="+Author+"&Content="+Content;
addNew.open("POST","19-1-2.php",true);
addNew.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
addNew.send(GuestInfo);
}
function sendGuest()
{
if(addNew.readyState==4) //如果传递完成
{
if(addNew.status==200) //如果服务器返回OK
{
//alert(unescape(addNew.responseText));
obj=document.getElementById("head"); //获取头部层
obj.innerHTML=unescape(addNew.responseText); //改变头部层的内容
document.getElementById("sendGuest").disabled=false; //发送按钮可用
document.getElementById("memAuthor").value=""; //清空作者输入框
document.getElementById("memContent").value=""; //清空内容输入框
showre();
}
else //如果服务器没有返回200
{
alert("执行过程中出现问题，服务器返回："+addNew.statusText);
}
}
}
/* 重置内容 */
function reSet()
{
obj1=document.getElementById("memAuthor"); //获取作者对象
obj2=document.getElementById("memContent"); //获取内容对象
obj1.value=""; //清空作者
obj2.value=""; //清空内容
}
</script>
</head>
<body onLoad="showre()">
<div id="head">无刷新留言簿</div>
<div class="title">留言列表</div>
<div id="list">
</div>
<div class="title" >发表新留言</div>
<div id="revBox">
<ul>
<li>
<label>昵称
<input name="memAuthor" type="text" id="memAuthor" />
</label>
</li>
<li>
<label>内容
<textarea name="memContent" cols="50" rows="5" wrap="virtual" id="memContent"></textarea>
</label>
</li>
<li>
<label>
<input type="button" onClick="AddNew()" value="确 认" class="sub" id = "sendGuest" />
</label>
<label>
<input type="button" onClick="reSet()" class="sub" value="重置" />
</label>
</li>
</ul>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -