test.php

无刷新技术AJAX,就是在不刷新网页的情况下更新网站内容

<?php
header( "Content-type: text/html; charset=gbk");
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . " GMT" );
header( "Cache-Control: no-cache, must-revalidate" );
header( "Pragma: no-cache" );

?>
<?php
require("inc/header.inc");
?>
<style>

#con table{border:1px solid blue;border-bottom:0;clear:both;margin-top:3px !important;margin-top:30px;}
#con table tr{background-color:;}
#con table tr td{border-bottom:1px solid blue;padding:5px;font-size:95%;word-break:break-all;word-wrap:break-word;}
.tip{background-color:green;color:white}
#tip{margin:4px 0 2px 0;line-height:18px;font-size:12px;}
.more{float:right;position:absolute;top:30px !important;top:40px;right:50px;}
.showall{color:blue;text-decoration:underline;cursor:hand;cursor:pointer}
a{margin:1px;color:blue}
a:link{}
a:hover{background-color:#E3E2FE;;border-bottom:1px dashed blue;text-decoration:none}

</style>
<?php
  //在首页也调用登录后信息;
  session_start();
  if( $_SESSION['loginSuccessful'] ){
    require("login/login.php");
   }
?>
<script src="js/net.js"></script>
<!--//如果都采用net.js就不用prototype.js<script src="js/prototype.js"></script>-->
<script src="js/time.js"></script>
<script src="js/showtip.js"></script>
<script src="js/showmore.js"></script>
<script src="js/settable.js"></script>
<h3>Ajax xmlhttp无刷新提交帖子实例(Ajax+PHP+文本)：</h3>
<a href="#bottom">我要发帖</a>
<div id="con"></div>
<div id="more"></div>
<div id="timebar"></div><script>showTime(document.getElementById('timebar'))</script>
<div id="tip" >&nbsp;&nbsp;</div>
<form name="form1" action="action/action.php" method="post" onSubmit="return blogpost(this);">
标题：<input type="text" name="title" id="title" size="50" maxlength="200" value="Ajax无刷新发贴实例" onChange=""><br>
内容：<textarea name="contents" id="contents" cols="80" rows="10">
这是一则利用xmlhttp request传递数据，用js控制dom的实际例子。
</textarea><br>
用户：<input type="text" name="user" value="" maxlength="50" ><br>
验证：<input type="text" name="code" maxlength="4" size="4">&nbsp;<img src="validate/img.php" valign="bottom" hspace="5" id="codeimg"><a href="javascript:reshow('codeimg');">看不清</a><br>
<input name="tj" type="submit" value=" 发表文章 " style="margin-left:46px;"> <a name="bottom"></a><br>

<script>
/***********/
/*	cody by jarry
/*	http://jiarry.blogchina.com;
/***********/

function paresXml(xml,obj){
	 var message=new Array;
	 var xmldoc=xml.documentElement;
   var msg=xmldoc.getElementsByTagName("message");
   try{
	  for(var i=0;i<msg.length;i++){ //正序;	
	 	   for(var x=0; x< msg[i].childNodes.length;x++){
            message[i]=new Array;
	 	   	    //message[i][x]=msg[i].childNodes[x].firstChild.nodeValue;
						//$("con").innerHTML+=("message["+i+"]["+x+"]="+msg[i].childNodes[x].firstChild.nodeValue)+"<br>";
	 	   	    
	 	   	 var xmlci=msg[i];
	 	   	  message[i]={
	 	   	  	title:xmlci.childNodes[0].childNodes[0].nodeValue,
	 	   	  	contents:xmlci.childNodes[1].childNodes[0].nodeValue,
	 	   	  	user:xmlci.childNodes[2].childNodes[0].nodeValue,
	 	   	  	ip:xmlci.childNodes[3].childNodes[0].nodeValue,
	 	   	  	host:xmlci.childNodes[4].childNodes[0].nodeValue,
	 	   	  	time:xmlci.childNodes[5].childNodes[0].nodeValue,
	 	   	  	no:xmlci.childNodes[6].childNodes[0].nodeValue,
	 	   	  	id:xmlci.childNodes[7].childNodes[0].nodeValue
	 	   	  }
	 	   	}
	 	}
	showtip("信息读取完成！"); 
	closeTip(); 
	}catch(ex){
	  	showtip("出现意外:"+ex); 
	}
		 	

	
	var morediv=document.createElement("div");
	morediv.className="more";	//append more;
	morediv.innerHTML="<a href=\"showall_js.php\" >查看/删除留言(Ajax/JS)</a>&nbsp;&nbsp<a href=\"showall_xml.php\" >查看/删除留言(Ajax/XML)</a>&nbsp;&nbsp;<a href=\"showall_normal.php\" >查看/删除留言(传统)</a>";
	document.body.appendChild(morediv);

	if(message.length<=0)return;
	
	//delete first;
	if($("con").hasChildNodes()){//如果已经有表格就删除重新生成一个;
	  $("con").removeChild($("con").childNodes[0]);
	}

	function addChild(tr,n,o){
		tr.insertCell(n).appendChild(document.createTextNode(o));
	}
	var r=0;var c=0;
  var table=document.createElement("table");
  table.cellPadding="0";table.cellSpacing="0";
  table.width="100%";
  
//倒序 
//r = message.length - 1 ;
//while(r >  0){
/*********/
//插入表头吧;
  	var tr=table.insertRow(-1); 
    addChild(tr,0,"序号");	
    addChild(tr,1,"主题");  
		addChild(tr,2,"内容");
		addChild(tr,3,"用户");
		addChild(tr,4,"IP地址");	
		addChild(tr,5,"发帖时间");
		addChild(tr,6,"真实编号");

/**********/


 while(r<message.length){//正序
  	var tr=table.insertRow(-1); 
    addChild(tr,0,"第"+ message[r].id +"楼");	
    addChild(tr,1,message[r].title);  
		tr.insertCell(2).innerHTML=message[r].contents;//addChild(tr,2,message[r].contents);
		addChild(tr,3,message[r].user);
		addChild(tr,4, setIP(message[r].ip) );	
		addChild(tr,5,message[r].time);
		addChild(tr,6," "+message[r].no);
    r++;
     //r--;//倒序 
   }
  table.rows[0].cells[0].width="50";
  table.rows[0].cells[1].width="15%"; 
  table.rows[0].cells[3].width="80"; 
  table.rows[0].cells[4].width="100"; 
  table.rows[0].cells[5].width="180";  
  table.rows[0].cells[6].width="60";  
  $("con").appendChild(table);
   if($("con").childNodes[0].rows.length>=10){
   setTrBg( $("con").childNodes[0] , 1 ,1);//设置tr背景色;
   }
}


function showmsg(){
	try{
	showtip("信息载入中...");
  function getmsg(){
		var xmldoc=  this.req.responseXML;
		if(xmldoc.documentElement){
	    paresXml(xmldoc,$("con"));
	   }
  }
	//取前十条数据显示在这里;
	var getmsg = new net.ContentLoader("action/msgxml.php?num=10&pageno=max",getmsg,null,"GET",null,null);
	//得到内容;	
 }catch(ex){
  alert(ex);
 }
}
function init(){
	showmsg();//载入时调用;
}
init();




function checkform(f){
   var t=f.title.value,c=f.contents.value,u=f.user.value,code=f.code.value;	
   if(t.trim()=="" || c.trim()=="" || u.trim()==""){
	 showtip("请填写完整，标题、内容及用户名不能为空。");
	 return false;
   }
	 
	if(countLength(200, t.trim()).length > 0){
	   showtip("标题" + countLength(200, t));
     return false;
   }
	if(countLength(2000, c.trim()).length > 0){
	   showtip("内容" + countLength(2000, c));
     return false;
   }
	if(countLength(50, u.trim()).length > 0){
	   showtip("用户名" + countLength(50, u));
     return false;
   }
   if(code.trim()=="" || code.trim().length!=4){
	   showtip("请填写4位验证码");f.code.focus();
	   return false; 	
   }
   return true;
}

function blogpost(thisform){
if(!checkform(thisform))return false;
	
showtip("信息发送中...");
document.form1.tj.disabled=true;
try{
	var url=thisform.action;
  var params="";    
    for(var i=0;i<thisform.elements.length;i++){
     //alert(elem.tagName.toUpperCase());
     var elem=thisform.elements[i];
    /* if(elem.tagName.toUpperCase()=="TEXTAREA"){
	    elem.value = elem.value.replace(/(\t)|(\r)|(\n)/ig, '<br />');			
			//alert(elem.value);
     }*/

     params+=(elem.name+"="+encodeURIComponent(elem.value.trim()));	
     if(i!=(thisform.elements.length-1))params+="&";
    }
     
var postmsg = new net.ContentLoader(url,subform,null,"POST",params,null);
//调用net.js封装的xmlhttp;下面用到的是prototype里的库，
//效果是一样的,在本项目中采用net.js比较好，节省代码;
/*
//一个项目不用两个ajax库，这里只是为了示范说明才分别采用；
var postmsg= new Ajax.Request(url,
     {method:'post', //方法
  	 parameters:params,//参数
  	 onComplete:subform//完成后的函数
  	 }
);*/

  return false;  
	}catch(ex){
	  alert(ex.toString());
	//}finally{  	   alert("未知错误!");
	} 	 
 return false;
}  
		  
function subform(requestStr){//requestStr只采用prototype.js才要用到，net.js不用requestStr参数;
	//var gtext=requestStr.responseText;//如果用prototype.js,
	var gtext=this.req.responseText;//如果用net.js
	//alert(gtext);
	if(gtext.indexOf("postok")!=-1){//得到发送成功反馈后;
		  showtip("信息发送成功！"); 
		  reshow('codeimg');//重新获得验证码;
 			showmsg();//显示内容;
		  closeTip(); 
	}
	if(gtext.indexOf("postEmpty")!=-1){
		showtip("标题或内容不能为空"); 
	}
	if(gtext.indexOf("errorValidate")!=-1){
		showtip("验证码输入错误");document.form1.code.focus();
	}	
	return false;
}

</script>
</form>
<?php
require("inc/footer.inc");
?>