📄 index.htm
字号:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>Ajax无刷新留言板</title>
<script type="text/javascript" src="op.js"></script>
<style type="text/css">
body{font-size:10pt;}
td{font-size:10pt;}
a{text-decoration:none}
</style>
<script type="text/javascript">
var obj;
var pagecount=10,currentpage=1,totalrecord=0,totalpage=0;
function createObj()
{
if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
var os=["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHTTP"];
var o;
for(var i=0;i<os.length;i++)
{
try
{
o=new ActiveXObject(os[i]);
return o;
}
catch(e)
{
}
}
}
}
window.onload=InitData;
function InitData()
{
var url="op.asp?action=read&p="+currentpage+"&pc="+pagecount+"&init=1&ts="+escape(new Date().toString());//注意时间戳的问题，防止缓存用的
obj=createObj();
obj.open("get",url,true);
obj.onreadystatechange=function()
{
if(obj.readyState==4)
{
if(obj.status==200)
{
parseXML(obj.responseXML,"");
}
else
{
document.getElementById("tdMsg").cells[0].innerHTML="<font color='red'>加载数据数据失败！</font>";
}
}
}
obj.send(null);
InitMark();
}
function InitMark()
{
var mark=document.getElementById("mark");
if(navigator.appName!="Netscape")
mark.style.filter="Alpha(opacity=60)";
else
mark.style.opacity="0.6";
mark.contentWindow.document.open();
mark.contentWindow.document.write("<div align='center' style='position:absolute;top:"+document.body.clientHeight/2
+";width:100%'><font size='5'><b>正在处理您的请求......</b></font></div>");
mark.contentWindow.document.close();
}
function Add()
{
var t=document.getElementById("title"),ct=document.getElementById("content");
if(t.value!=""&&ct.value!="")
{
OpMark("");
var url="op.asp?action=add&ts="+escape(new Date().toString());
var par="t="+escape(t.value)+"&ct="+escape(ct.value);
obj=createObj();
obj.open("post",url,true);
obj.onreadystatechange=function()
{
if(obj.readyState==4)
{
OpMark("none");
if(obj.status==200)
{
if(ErrorCodeHanlder(obj.responseXML))
return;
var id=obj.responseXML.getElementsByTagName("id")[0].firstChild.nodeValue;
var tbList=document.getElementById("tbList");
if(tbList.rows.length>=pagecount)
tbList.removeChild(tbList.rows[pagecount-1]);//先删除最后一条记录
AddTr(tbList,t.value,ct.value,id,0);
t.value="";
ct.value="";
totalrecord++;
GetGuide();
alert("添加留言成功！");
}
else
{
alert("添加留言失败！");
}
}
}
obj.setRequestHeader("content-type","application/x-www-form-urlencoded");//post方法时注意设置这个头
obj.send(par);
}
else
{
alert("标题和留言内容不能为空！");
document.getElementById("title").focus();
}
}
function ErrorCodeHanlder(xml)
{
var err=xml.getElementsByTagName("errcode");
var msg="",errstr;
if(err.length>0)
{
code=err[0].firstChild.nodeValue.toString();
switch(code)
{
case "1":
alert("action参数错误！");
return true;
case "2":
alert("读取数据失败！");
return true;
case "3":
alert("标题和留言内容不能为空！");
return true;
case "4"://属于服务器错误
errstr=xml.getElementsByTagName("errmsg");
if(errstr.length!=0)
msg=errstr[0].firstChild.nodeValue.toString();
alert("添加留言失败！===错误原因===\n"+msg);
return true;
case "5":
alert("要删除的数据的id不正确！");
return true;
case "6":
alert("要删除的数据的id不存在！");
return true;
case "7"://属于服务器错误
errstr=xml.getElementsByTagName("errmsg");
if(errstr.length!=0)
msg=errstr[0].firstChild.nodeValue.toString();
alert("删除留言失败！===错误原因===\n"+msg);
return true;
case "8":
alert("要更新的数据的id不正确！");
return true;
case "9":
alert("要更新的数据的id不存在！");
return true;
case "10"://属于服务器错误
errstr=xml.getElementsByTagName("errmsg");
if(errstr.length!=0)
msg=errstr[0].firstChild.nodeValue.toString();
alert("更新留言失败！===错误原因===\n"+msg);
return true;
}
}
return false;
}
function parseXML(xml,Clear)
{
if(ErrorCodeHanlder(xml))//有错误代码直接返回
return ;
if(Clear!="Clear")//第一次加载数据得到总数据条数，以后由js控制这个变量，服务器不再返回这个值，减少网络流量
{
var tbinfo=xml.getElementsByTagName("tbinfo")[0];
totalrecord=parseInt(tbinfo.childNodes[0].firstChild.nodeValue);
}
if(totalrecord==0)
{
document.getElementById("tdMsg").cells[0].innerHTML="<font color='red'>没有数据！</font>";
}
else
{
document.getElementById("tdMsg").style.display="none";
var tbList=document.getElementById("tbList");
if(Clear=="Clear")
{
ClearAllRows(tbList);
}
var items=xml.getElementsByTagName("item");
for(var i=0;i<items.length;i++)
{
var citem=items[i];
AddTr(tbList,citem.childNodes[1].firstChild.nodeValue,citem.childNodes[2].firstChild.nodeValue,citem.childNodes[0].firstChild.nodeValue,i);
}
}
GetGuide();
}
function ClearAllRows(tbList)
{
while(tbList.rows.length!=0)
tbList.removeChild(tbList.rows[0]);
}
function GetGuide()
{
if(totalrecord % pagecount ==0)
totalpage=totalrecord / pagecount;
else
totalpage=parseInt(totalrecord / pagecount)+1;
var tbGuide=document.getElementById("tbGuide");
tbGuide.innerHTML="";
if(currentpage<=1)
{
tbGuide.innerHTML+="<font color='#bbbbbb'>首页</font> <font color='#bbbbbb'>上一页</font>";
}
else
{
tbGuide.innerHTML+="<a href='#' onclick=\"HandlerPage('First')\">首页</a> <a href='#' onclick=\"HandlerPage('Pre')\">上一页</a>";
}
if(currentpage>=totalpage)
{
tbGuide.innerHTML+=" <font color='#bbbbbb'>下一页</font> <font color='#bbbbbb'>尾页</font>";
}
else
{
tbGuide.innerHTML+=" <a href='#' onclick=\"HandlerPage('Next')\">下一页</a> <a href='#' onclick=\"HandlerPage('Last')\">尾页</a>";
}
tbGuide.innerHTML+=" 共<font color='red'>"+totalrecord+"</font>条记录，<font color='red'>"+pagecount+
"</font>条/页。共有<font color='red'>"+totalpage+"</font>页，当前页<font color='red'>"+currentpage+"</font>";
}
function HandlerPage(Type)
{
OpMark("");
switch(Type)
{
case "First":
currentpage=1;
break;
case "Pre":
currentpage--;
break;
case "Next":
currentpage++;
break;
case "Last":
currentpage=totalpage;
break;
default:
return;
}
url="op.asp?action=read&p="+currentpage+"&pc="+pagecount+"&ts="+escape(new Date().toString());
obj=createObj();
obj.open("get",url,true);
obj.onreadystatechange=function()
{
if(obj.readyState==4)
{
OpMark("none");
if(obj.status==200)
{
parseXML(obj.responseXML,"Clear");
}
else
{
alert("加载数据失败！");
}
}
}
obj.send(null);
}
function AddTr(tbList,ti,ct,id,i)
{
var r=tbList.insertRow(i);
r.fid=id;
var c0,c1,c2;
c0=r.insertCell(0);
c1=r.insertCell(1);
c2=r.insertCell(2);
c0.style.width="35%";
c1.style.width="50%";
c2.style.width="15%";
c0.innerHTML="<span>"+ti+"</span>"
+"<input type='text' style='display:none;width=:100%' value='"+ti+"'/>";
c1.innerHTML="<span>"+ct+"</span>"
+"<textarea type='text' style='display:none;width:100%;height:50px'>"+ct+"</textarea>";
c2.innerHTML="<a href='#' onclick=\"Update(event,'"+id+"')\">修改</a>"
+"<a href='#' style='display:none;width:100%;' onclick=\"Cancel(event)\"> 取消</a>"
+"<a href='#' onclick=\"if(confirm('确认删除？'))Delete(event,'"+id+"')\"> 删除</a>";
c2.align='center';
}
function Delete(e,id)
{
e=e?e:event;
var tag=e.target?e.target:e.srcElement;
var tr=tag.parentNode.parentNode;
OpMark("");
var tbList=document.getElementById("tbList");
//获取当前显示的最小id，以便从服务器返回一条数据来填补删除的行
var minid=tbList.rows.length>0?tbList.rows[tbList.rows.length-1].fid:"-1";
var url="op.asp?action=del&id="+id+"&minid="+minid+"&ts="+escape(new Date().toString());
obj=createObj();
obj.open("get",url,true);
obj.onreadystatechange=function()
{
if(obj.readyState==4)
{
OpMark("none");
if(obj.status==200)
{
if(ErrorCodeHanlder(obj.responseXML))
return ;
tbList.removeChild(tr);//删除当前行
var item=obj.responseXML.getElementsByTagName("item");
if(item.length!=0)//有数据返回
{
AddTr(tbList,item[0].childNodes[1].firstChild.nodeValue,item[0].childNodes[2].firstChild.nodeValue,item[0].childNodes[0].firstChild.nodeValue,tbList.rows.length);
}
totalrecord--;
GetGuide();
alert("删除成功！");
}
else
{
alert("删除失败！");
}
}
}
obj.send(null);
}
function OpMark(state)
{
document.getElementById("mark").style.display=state;
}
function Update(e,id)
{
e=e?e:event;
var tag=e.target?e.target:e.srcElement;
var tr=tag.parentNode.parentNode;
if(tag.innerHTML=="修改")
{
tag.innerHTML="更新";
OpTr(tr,"none","");
}
else
{
var ti=tr.cells[0].childNodes[1].value,ct=tr.cells[1].childNodes[1].value;
if(ti==""||ct=="")
{
alert("标题和内容不能为空！");
return;
}
OpMark("");
var url="op.asp?action=up&ts="+escape(new Date().toString());
var pars="id="+id+"&ti="+escape(tr.cells[0].childNodes[1].value)+"&ct="+escape(tr.cells[1].childNodes[1].value);
obj=createObj();
obj.open("post",url,true);
obj.onreadystatechange=function()
{
if(obj.readyState==4)
{
OpMark("none");
if(obj.status==200)
{
if(ErrorCodeHanlder(obj.responseXML))
return ;
tag.innerHTML="修改";
//更新值
tr.cells[0].childNodes[0].innerHTML=tr.cells[0].childNodes[1].value;
tr.cells[1].childNodes[0].innerHTML=tr.cells[1].childNodes[1].value;
OpTr(tr,"","none");
alert("更新成功！");
}
else
alert("更新失败！");
}
}
obj.setRequestHeader("content-type","application/x-www-form-urlencoded");
obj.send(pars);
}
}
function Cancel(e)
{
e=e?e:event;
var tag=e.target?e.target:e.srcElement;
tag.parentNode.firstChild.innerHTML="修改";
var tr=tag.parentNode.parentNode;
//还原值
tr.cells[0].childNodes[1].value=tr.cells[0].childNodes[0].innerHTML;
tr.cells[1].childNodes[1].value=tr.cells[1].childNodes[0].innerHTML;
OpTr(tr,"","none");
}
function OpTr(tr,d1,d2)
{
var len=tr.cells.length;
for(var i=0;i<len-1;i++)
{
tr.cells[i].childNodes[0].style.display=d1;
tr.cells[i].childNodes[1].style.display=d2;
}
tr.cells[len-1].childNodes[1].style.display=d2;
}
function SetPC()
{
var PC=document.getElementById("PC");
if(PC.value==""||isNaN(PC.value)||parseInt(PC.value)<1)
{
alert("数据不对！");
PC.focus();
return;
}
pagecount=parseInt(PC.value);
HandlerPage("First");
}
</script>
</head>
<body>
<table width="500" align="center" border="0" cellpadding="0" cellspacing="2">
<tr><td>每页显示的数据：<input type="text" id="PC" value="10" style="width:50px"/> <input type="button" value="设置" onclick="SetPC()"/></td></tr>
<tr><td align="center">
<table width='100%' border='1' cellpadding='0' cellspacing='2'>
<thead style="background-color:#eeeeee">
<tr><td width='35%' align="center">标题</td>
<td width='50%' align="center">内容</td>
<td width='15%' align="center">操作</td>
</tr>
<tr id="tdMsg" ><td colspan='3' align="center"><font color="red">正在加载数据......</font></tr>
</thead>
<tbody id="tbList">
</tbody>
<tbody>
<tr><td colspan='3' align='center' id="tbGuide">
</td></tr>
</tbody>
</table>
</td></tr>
<tr><td>
<table width='100%' border='1' cellpadding='0' cellspacing='2'>
<tr>
<td width='20%'>标题</td>
<td width='80%'><input type="text" id="title" style="width:100%" /></td>
</tr>
<tr>
<td width='20%'>留言内容</td>
<td width='80%'><textarea id="content" style="width:100%;height:100px"></textarea></td>
</tr>
<tr><td colspan="2" align="center"><input type="button" value="提交留言" onclick="Add()" /></td></tr>
</table>
</td></tr>
</table>
<iframe id="mark" style="display:none;position:absolute;top:0px;left:0px;margin:0px;width:100%;height:100%;background-color:#666666" scrolling="no" frameborder="0"></iframe>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -