Ajaxajax 异步刷新

第2种艺术,ajax实现: 理所当然,ajax使用起来的确很不难就可以达成,但是中间的无数学问依旧相比较有点深的。我事先做页面时间自动刷新的效用正是用的ajax。完整代码是:
1.getTime.php:

复制代码代码如下:

<?php
header(“cache-control:no-cache,must-revalidate”);  
header(“Content-Type:text/html;charset=utf-8”);
$time = “2012-1-20 18:00:00”;
$dt_element=explode(” “,$time);
$date_element=explode(“-“,$dt_element[0]);
$time_element=explode(“:”,$dt_element[1]);
$date =
mktime($time_element[0],$time_element[1],$time_element[2],$date_element[1],$date_element[2],$date_element[0]);
$nowTime = time();  
$showtime = date(“日本东京时间Y年m月d日H:i:s”,$date-$nowTime);  
if($showtime<=”法国巴黎时间一九六六年010月030日08:00:00″){
 echo “happy new year”;
}
echo $showtime;

2.zidong.php:

复制代码代码如下:

</head>  
<body>  
<h1>Ajax动态显示时间</h1>  
<input type=”button” value=”早先呈现时间” id=”go” onclick=”start()”
/>  
<p>当前时光:<font color=”red”><span
id=”showtime”></span></font></p>  
</body>  
<script type=”text/javascript”>
var xmlHttp;
function createXMLHttpRequest(){
 if(window.ActiveXObject){
  xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
 }
 else if(window.XMLHttpRequest){
  xmlHttp = new XMLHttpRequest();
 }
}
function start(){
 createXMLHttpRequest();
 var url=”getTime.php”;
 xmlHttp.open(“GET”,url,true);
 xmlHttp.onreadystatechange = callback;
 xmlHttp.send(null);
}
function callback(){
 if(xmlHttp.readyState == 4){
  if(xmlHttp.status == 200){
   document.getElementById(“showtime”).innerHTML =
xmlHttp.responseText;
   setTimeout(“start()”,1000);
  }
 }
}
</script>
</html> 

在浏览器里面一贯访问zidong.php就足以了,点击里面包车型地铁按钮就能够见到效果。
以此便是用ajax做的刷新页面局地内容的小例子。你也许会可疑:那在那之中没有跟数据库交互啊?那还不简单,直接在getTime.php页面里面操作就能够啊。

这种办法就无须多说了啊。至于ajax里面包车型地铁代码是什么样看头,不要问我啊,笔者事先就说过,那中间的ajax照旧有点深的。

第三种方法:使用iframe方法完毕。 不要给自家说用PHP
的include能够啊。你去尝试啊。能够,能够就不会有那么五人在百度之中问了。
那种办法吧说起来复杂,其实依旧挺简单的。说下原理吧:
要刷新的页面中把要活动刷新的一些的代码单独拿出去,做成贰个单独的页面,自动刷新有很各种方法:能够在那几个独立页面中用javascript来决定,什么setTimeout(“start()”,一千);啊只怕setInterval(“start()”,一千);(每隔1秒刷新页面)那样,还能用meta标签达成:<meta
http-equiv=”Refresh”
content=”10″>(每隔10秒刷新页面)。那样在原本的页面中用iframe来将它调用过来。这样就足以了。
要么上示例代码吧:
1.show.php:

复制代码代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;  
<html xmlns=”http://www.w3.org/1999/xhtml"&gt;  
<head>  
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>  
<!–<meta http-equiv=”refresh” content=”5″>–>  
<title>Admin</title>  
<script language=”javascript” type=”text/javascript”
src=”/extend/js/json.js” ></script>  
<script language=”javascript” type=”text/javascript”
src=”/extend/menus.js”></script>  
<script language=”javascript” type=”text/javascript”
src=”/extend/js/jquery-1.4.2.js”></script>  
<link href=”/css/main.css” rel=”stylesheet” type=”text/css” />  
<link href=”/css/question.css” rel=”stylesheet” type=”text/css”
/>  
<script type=”text/javascript”>  
//上边包车型大巴isKeyTrigger()、ctrlEnter()、submitContent()方法是响应键盘事件提交内容的。包容性不错。  
function isKeyTrigger(e,keyCode){  
var argv = isKeyTrigger.arguments;  
var argc = isKeyTrigger.arguments.length;  
var bCtrl = false;  
if(argc > 2){  
bCtrl = argv[2];  
}  
var bAlt = false;  
if(argc > 3){  
bAlt = argv[3];  
}  

var nav4 = window.Event ? true : false;  

if(typeof e == ‘undefined’) {  
e = event;  
}  

if( bCtrl &&  
!((typeof e.ctrlKey != ‘undefined’) ?  
e.ctrlKey : e.modifiers & Event.CONTROL_MASK > 0)){  
return false;  
}  
if( bAlt &&  
!((typeof e.altKey != ‘undefined’) ?  
e.altKey : e.modifiers & Event.ALT_MASK > 0)){  
return false;  
}  
var whichCode = 0;  
if (nav4) whichCode = e.which;  
else if (e.type == “keypress” || e.type == “keydown”)  
whichCode = e.keyCode;  
else whichCode = e.button;  

return (whichCode == keyCode);  
}  

function ctrlEnter(e){  
var ie =navigator.appName==”Microsoft Internet Explorer”?true:false;  
if(ie){  
if(event.ctrlKey && window.event.keyCode==13){  
submitContent();  
}  
}else{  
if(isKeyTrigger(e,13,true)){  
submitContent();  
}  
}  
}  
function submitContent(){  
save_answer();   
}  

  
function save_answer(){   
var $content = $(‘#answer’).val();  
var $save_answer_url = ‘<?php echo $save_answer_url;?>’;  
if ( $content == ” ){  
alert(“no data!”);  
return;  
}  
var $post_data = {  
content : $content ,  
qid:'<?php echo $question[‘ID’];?>’,  
uid:'<?php echo $questionUser[‘ID’];?>’  
};  
//alert($save_answer_url);  
$.ajax({  
type : ‘post’ ,  
url : $save_answer_url ,  
data : $post_data ,  
success : function( e ){  
var $rs = JSON.decode( e );  
if ( $rs.succ == 1 ){  
alert(“answer success!”);  
$(‘#answer’).val(“”);  
location.reload(); //刷新页面  
} else {  
alert( $rs.msg );  
}  
}  
});  
}  
//删除答案  
function deleteanswer($id){  
var $delete_answer_url = ‘<?php echo
$delete_answer_url;?>’;  
var $post_data = {  
id : $id  
};  
if(confirm(“are you sure delete?”)){  
$.ajax({  
type : ‘post’ ,  
url : $delete_answer_url,  
data : $post_data ,  
success : function( e ){  
var $rs = JSON.decode( e );  
if ( $rs.succ == 1 ){  
alert(“delete success!”);  
location.reload(); //刷新页面  
} else {  
alert( $rs.msg );  
}  
}  
});  
}  
else{  
return;  
}  

}  
////设置为最好答案  
//function setbestanswer($id,$aid){  
//  var $set_bestanswer_url = ‘<?php echo
$set_bestanswer_url;?>’;  
//  var $post_data = {  
//  id : $id ,  
//  aid : $aid  
//  };  
//  if(confirm(“are you sure set this answer is best?”)){  
//  $.ajax({  
//  type : ‘post’ ,  
//  url : $set_bestanswer_url,  
//  data : $post_data ,  
//  success : function( e ){  
//  var $rs = JSON.decode( e );  
//  if ( $rs.succ == 1 ){  
//  alert(“set success!”);  
//  location.reload(); //刷新页面  
//  } else {  
//  alert( $rs.msg );  
//  }  
//  }  
//  });  
//  }  
//  else{  
//  return;  
//  }  
//
//}  
</script>  
<!–<script language=”javascript”>–>  
<!–setInterval(“myajax();”,1000);–>  
<!–function myajax()–>  
<!–{–>  
<!–  //获撤废息json数组 –>  
<!–  var html2 = “”;–>  
<!–  html2 = “<table id=\”answerTable\”><tr><td
class=\”answerHead\” colspan=\”2\”> 回答:”+–>  
<!–   “</td></tr><tr><td><iframe width=0
height=0
src=\”check_new.php\”></iframe></td></tr>”+–>  
<!–   “<?php if (isset($answers) && !empty($answers)) {foreach
($answers as $key=>$value){?>”+–>  
<!–   “<tr><td class=\”boss\”>”+–>  
<!–   “<?php echo $value[‘Answer’];?>”+–>  
<!–   “</td><td
style=\”text-align:right;\”>”+–>  
<!–   “<?php if($_SESSION[‘ADMINISTRATOR’]){?>”+–>  
<!–   “<a href=\”javascript:deleteanswer(<?php echo
$value[‘ID’];?>);\”>”+–>  
<!–   “<img src=\”questiondelete.jpg\” 
style=\”border:0;\”/></a>”+–>  
<!–   “<?php   }?>”+–>  
<!–   “</td></tr><tr><td
class=\”answerAuthor\” colspan=\”2\”>回答者:”+–>  
<!–   “<?php echo $value[‘Email’];?>”+–>  
<!–   ”   回答时间:”+–>  
<!–   “<?php echo $value[‘Date’];?>”+–>  
<!–   “</td></tr><tr><td
colspan=\”2\”><hr style=\”border: 1px dashed #ccc; width:
100%; height: 1px;\” /></td></tr>”+–>  
<!–   “<?php }}else{?>”+–>  
<!–   “<tr><td style=\”text-align:center;height:80px;\”
colspan=\”2\”>该难题最近还尚未用户作答,你能够在底下填写内容来回复</td></tr>”+–>  
<!–   “<?php }?>  </table>”;–>  
<!–  $(“#answerDiv”).html(html2);–>  
<!–}–>  
<!–</script>–>  

<!–<script type=”text/javascript”>–>  
<!–var xmlHttp;–>  
<!–function createXMLHttpRequest(){–>  
<!– if(window.ActiveXObject){–>  
<!–  xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);–>  
<!– }–>  
<!– else if(window.XMLHttpRequest){–>  
<!–  xmlHttp = new XMLHttpRequest();–>  
<!– }–>  
<!–}–>  
<!–function start(){–>  
<!– //alert(“laslfda;f”);–>  
<!– createXMLHttpRequest();–>  
<!– var url=”/extend/check_new.php?sid=”+Math.random()”;–>  
<!– //var url = “../../view/product/check_new.php”;–>  
<!– //alert(url);–>  
<!– xmlHttp.open(“GET”,url,true);–>  
<!– //alert(url);–>  
<!– xmlHttp.onreadystatechange = callback;–>  
<!– xmlHttp.send(null);–>  
<!–}–>  
<!–function callback(){–>  
<!– if(xmlHttp.readyState == 4){–>  
<!–  //alert(“asdflasdf”);–>  
<!–  //if(xmlHttp.status == 200){–>  
<!–   document.getElementById(“answerDiv”).innerHTML =
xmlHttp.responseText;–>  
<!–  
//alert(document.getElementById(“answerDiv”).innerHTML);–>  
<!–   setTimeout(“start()”,1000);–>  
<!–  //}–>  
<!–  //alert(xmlHttp.status);–>  
<!– }–>  
<!–}–>  
<!–setInterval(“start()”,1000);–>  
<!–</script>–>  
</head>  
<body onkeydown=”javascript:ctrlEnter(event);”>  
<center>  
<div class=”Container”>  
   <table>  
  <tr>  
   <th class=”zongHead” colspan=”2″> 
产品难点及回复详尽列表</th>  
  </tr>  
  <tr>  
   <td colspan=”2″><hr/></td>  
  </tr>  
  <tr>  
   <td class=”questionHead” colspan=”2″>
该难点详细内容:</td>  
  </tr>  
  <?php   
 if (isset($question) && !empty($question)) {  
  ?>  
<tr>  
 <td class=”questionContent” colspan=”2″><?php echo
$question[‘Question’];?></td>  
</tr>  
<tr>  
  <td class=”author” colspan=”2″>提问者:<?php echo
$questionUser[‘Email’];?>   提问时间:<?php echo
$question[‘Date’];?></td>  
</tr>  
  <?php   
 }  
  ?>  
  <tr>  
   <td colspan=”2″><hr/></td>  
  </tr>  
</table>  
<iframe src=”<?php echo
get_url(array(‘m’=>’product’,’a’=>’product_newmsg’,’qid’=>$qid));?>”
scrolling=”no” frameborder=”0″ width=”999px”
onload=”this.height=this.contentWindow.document.documentElement.scrollHeight”></iframe>  
<!–<div id=”answerDiv” class=”answerDiv”>  
<table id=”answerTable”>  
  <tr>  
<td class=”answerHead” colspan=”2″> 回答:</td>  
  </tr>  
  <tr>  
<td><iframe width=0 height=0
src=”check_new.php”></iframe></td>  
  </tr>  
<?php   
if (isset($answers) && !empty($answers)) {  
foreach ($answers as $key=>$value){  
?>  
<tr>  
  <td class=”boss”><?php echo
$value[‘Answer’];?></td>  
  <td style=”text-align:right;”>  
  <?php   
if($_SESSION[‘ADMINISTRATOR’]){//如果$_SESSION[‘ADMINISTRATOR’]=0,即不是超级管理员,则不显得删除按钮  
  ?>  
   <a href=”javascript:deleteanswer(<?php echo
$value[‘ID’];?>);”><img src=”questiondelete.jpg” 
style=”border:0;”/></a>  
  <?php
}  
  ?>  
  </td>  
</tr>  
<tr>  
 <td class=”answerAuthor” colspan=”2″>回答者:<?php echo
$value[‘Email’];?>   回答时间:<?php echo
$value[‘Date’];?></td>  
</tr>  
<tr>  
 <td colspan=”2″><hr style=”border: 1px dashed #ccc; width:
100%; height: 1px;” /></td>  
</tr>  
<?php   
}  
}else{  
?>  
<tr>  
 <td style=”text-align:center;height:80px;”
colspan=”2″>该难点如今还从未用户作答,你能够在上面填写内容来回答</td>  
</tr>  
<?php   
}  
?> 
  </table>  
  </div>  
  –><table class=”youWrite”>  
   <tr>  
 <td>你也回答瞬间吗:</td>  
   </tr>  
   <tr>  
 <td>  
  <textarea rows=”10″ cols=”80″ id=”answer”
name=”answer”></textarea>  
 </td>  
   </tr>  
   <tr>  
 <td class=”submits”><a
href=”javascript:save_answer();”><img style=”border:0;”
src=”questionbutton.jpg”/></a></td>  
</tr>  
  </table>  
</div>  
</center>  
</body>  
</html>  

2.product_newmsg.php:

复制代码代码如下:

<meta http-equiv=”Refresh” content=”10″>
<script language=”javascript” type=”text/javascript”
src=”/extend/js/json.js” ></script>
<script language=”javascript” type=”text/javascript”
src=”/extend/menus.js”></script>
<script language=”javascript” type=”text/javascript”
src=”/extend/js/jquery-1.4.2.js”></script>
<link href=”/css/main.css” rel=”stylesheet” type=”text/css” />
<link href=”/css/question.css” rel=”stylesheet” type=”text/css”
/>
<script type=”text/javascript”>
//删除答案
function deleteanswer($id){
 var $delete_answer_url = ‘<?php echo
$delete_answer_url;?>’;
 var $post_data = {
  id : $id
 };
 if(confirm(“are you sure delete?”)){
  $.ajax({
   type : ‘post’ ,
   url : $delete_answer_url,
   data : $post_data ,
   success : function( e ){
    var $rs = JSON.decode( e );
    if ( $rs.succ == 1 ){
     alert(“delete success!”);
     location.reload(); //刷新页面
    } else {
     alert( $rs.msg );
    }
   }
  });
 }
 else{
  return;
 }

}
</script>
<div id=”answerDiv” class=”answerDiv”>
    <table id=”answerTable”>
      <tr>
    <td class=”answerHead” colspan=”2″> 回答:</td>
      </tr>
<!–  <tr>–>
<!–<td><iframe width=0 height=0
src=”check_new.php”></iframe></td>–>
<!–  </tr>–>
<?php

 

if (isset($answers) && !empty($answers)) {
 foreach ($answers as $key=>$value){
?>
 <tr>
   <td class=”boss”><?php echo
$value[‘Answer’];?></td>
   <td style=”text-align:right;”>
   <?php 
 if($_SESSION[‘ADMINISTRATOR’]){//如果$_SESSION[‘ADMINISTRATOR’]=0,即不是一级管理员,则不展现删除按钮
   ?>
    <a href=”javascript:deleteanswer(<?php echo
$value[‘ID’];?>);”><img src=”questiondelete.jpg” 
style=”border:0;”/></a>
   <?php  
 }
   ?>
   </td>
 </tr>
 <tr>
 <td class=”answerAuthor” colspan=”2″>回答者:<?php echo
$value[‘Email’];?>   回答时间:<?php echo
$value[‘Date’];?></td>
</tr>
<tr>
 <td colspan=”2″><hr style=”border: 1px dashed #ccc; width:
100%; height: 1px;” /></td>
</tr>
<?php 
 }
}else{
?>
 <tr>
  <td style=”text-align:center;height:80px;”
colspan=”2″>该难点近日还平素不用户作答,你能够在上边填写内容来答复</td>
 </tr>
<?php 
}
?> 
  </table>
  </div>

这么就足以兑现了。在浏览器中走访show.php就能够见见效果了。然而那一个示例里面有成都百货上千东西操作了数据库。直接待上访问没什么效果。可是代码肯定是足以的。里面包车型大巴原理和代码都以全部的。
好了。那里就介绍那三种艺术。有那二种格局已经足以做到大概全体的页面局地刷新了。

相关文章