php（ajax）异步刷新（转）

第一种方法，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<="北京时间1970年01月01日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()",1000);啊或者setInterval("start()",1000);（每隔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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<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 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>

</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>
<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="/images/questionbutton.jpg"/></a></td>
</tr>
</table>
</div>
</center>
</body>
</html>

2.product_newmsg.php:

复制代码代码如下:

}
</script>
<div id="answerDiv" class="answerDiv">
   <table id="answerTable">
      <tr>
   <td class="answerHead" colspan="2"> 回答：</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="/images/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就可以看到效果了。但是这个示例里面有很多东西操作了数据库。直接访问没什么效果。但是代码肯定是可以的。里面的原理和代码都是完整的。
好了。这里就介绍这两种方法。有这两种方法已经可以完成基本上所有的页面局部刷新了。

php（ajax）异步刷新（转）的更多相关文章

Ajax异步刷新地址栏url改变（利用Html5 history.pushState实现）
早些时候在博客园参阅了不少资料,然后决定入驻博客园分享自己的开发心得,最近准备转方向筹备着辞职交接工作,所以有点忙碌,搁置了一个月才匆匆写下这么一篇随笔,希望能给大家带来一点帮助吧,资料和学识有限,如 ...
Ajax异步刷新省市级联
省市级联在web前端用户注册使用非常广泛.Ajax异步刷新省市级联.如图:选择不同的区,自动加载相应的街. <TD class=field>位置:</TD> <TD&g ...
MVC使用ajax异步刷新时怎样输出从后台中传过来的JSON数据
前言这几天在学习MVC使用AJAX异步刷,因为是新手.所以在js中传参数到后台以及后台返回数据到前台怎么接受,怎么前台遍历出JSON数据都开始不知道,相信新手在使用时跟我一样会遇到,这里我就和大家分 ...
asp.net mvc ajax 异步刷新例子
这几天在asp.net中使用ajax来做异步刷新,这里整理一下 1.首先看前台页面点击的时候调用函数 function shuxin() { $.ajax( { url: "GetValue ...
Ajax异步刷新分页功能-MySQL
1.Servlet中代码 /** 条件Map */ Map<String, Object> map=new HashMap<String, Object>(); /** 分页配 ...
Ajax异步刷新局部页面的小李子
看到下面那幅图没有,我们要的是当点击确定以后,根据条形码搜索出商品信息,并且异步刷新右边页面:
使用jquery Ajax异步刷新下拉框
一个下拉框 <label>产品类型:</label> <select id="protype" name="protype" on ...
Ajax异步刷新地址栏
公司项目后台使用现成的UI框架,DevExpress,jqGrid,XXXUI之类的,这些展示数据列表的控件/插件,基本是异步的. 这倒也好,有变化也只是数据那一块变化,不会重新加载整个页面. 但是, ...
asp.net jquery+ajax异步刷新1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
ajax 异步刷新
第一种方法,ajax实现:当然,ajax使用起来确实很简单就可以实现,但是里面的很多知识还是比较有点深的.我之前做页面时间自动刷新的功能就是用的ajax.完整代码是:1.getTime.php: 复制 ...

随机推荐

Vue的十个常用指令
1.v-text:用于更新标签包含的文本,作用和{{}}的效果一样. 2.v-html:绑定一些包含html代码的数据在视图上. 3.v-show:用来控制元素的display属性,和显示隐藏有关.v ...
国内的Jquery CDN免费服务
Jquery是个非常流行的JS前端框架,在很多网站都能看到它的身影.很多网站都喜欢采用一些Jquery CDN加速服务,这样网站加载jquery会更快.之前火端网络的一些网站都是使用Google的jq ...
halcon相机标定及图像矫正
https://blog.csdn.net/humanking7/article/details/44756073 相机标定内容详解:转载自祥的博客预备知识标定中的四个坐标系 1.1.平面旋转 ...
android-menudrawer-master 使用
1. 参照例子写, 运行总崩溃, 多半是导库问题... 2. 既然这样不行, 只好将源码全部拷贝到工程中了. 然后修错误, (将需要的res 文件复制过来.主要是value中的几个文件) 3. 在Ma ...
null 理解
值 null 特指对象的值未设置.它是 JavaScript 基本类型之一. 语法节 null 描述节值 null 是一个字面量,它不像undefined 是全局对象的一个属性.null 是表示缺 ...
linux虚拟机安装值得注意的几点
1.建立新的虚拟机时选择自定义安装并选择稍后安装操作系统 2.关键安装命令 tar -xzvf VMwareTools-10.0.6-3595377.tar.gz sudo ./wmware-ins ...
NLP.TM | GloVe模型及其Python实现
在进行自然语言处理中,需要对文章的中的语义进行分析,于是迫切需要一些模型去描述词汇的含义,很多人可能都知道word2vector算法,诚然,word2vector是一个非常优秀的算法,并且被广泛运用, ...
javaEE(17)_邮件原理与JavaMail开发
一.Java邮件开发介绍为什么要学习javamail开发 •现在很多WEB应用在开发时都需要集成邮件发送功能,例如: •给新注册的用户自动发送一封包含其注册信息的欢迎E-Mail. •给过生日的注册 ...
iterator方法和for方法遍历数据库user表结果集ResultSet
首先,把连接数据库的语句做成工具类,因为会一直用到这几句代码如下: package com.swift.jdbc; import java.sql.Connection; import java.s ...
Xcode及Mac快捷键
1. 文件 CMD + N: 新文件CMD + SHIFT + N: 新项目CMD + O: 打开CMD + S: 保存CMD + SHIFT + S: 另存为CMD + W: 关闭窗口CMD + S ...

php（ajax）异步刷新（转）

php（ajax）异步刷新（转）的更多相关文章

随机推荐

热门专题