Php 发送新邮件时更新页面

这将以类似于松弛的方式运行。我需要页面动态更新，以防用户键入

我有

index.php

，

messages.html

和

newmessage.php

聊天页面（

index.php

）如下所示：

<h1>Chat</h1>
<?php
echo file_get_contents("./messages.html") ;
?>
<br>
<form action="newmessage.php" method="post">
<input type="text" placeholder= "Compose a new message..." name="message" required>
<input type="submit"><br>

因此，消息显示给发送消息的用户，而不是聊天室中的其他人。我不能使用元刷新，以防其他用户正在键入某些内容，并且我尝试只刷新

或使用AJAX或事件侦听器。我需要在新消息发布到

messages.html

后动态更新这些内容

任何指点都将不胜感激。提前谢谢

更新，因为应答编辑被拒绝

function reloadData()
{
   var now = new Date();
   url = 'liveData?' + now.getTime();

   try {
      req = new XMLHttpRequest();
   } catch (e) {
      try {
         req = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         try {
            req = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (oc) {
            alert("No AJAX Support");
            return;
         }
      }
   }

   req.onreadystatechange = processReqChange;
   req.open("GET", url, true);
   req.send(null);
}

function processReqChange()
{
   // If req shows "complete"
   if (req.readyState == 4)
   {
      dataDiv = document.getElementById('currentData');

      // If "OK"
      if (req.status == 200)
      {
         // Set current data text
         dataDiv.innerHTML = req.responseText;

         // Start new timer (1 min)
         timeoutID = setTimeout('reloadData()', 60000);
      }
      else
      {
         // Flag error
         dataDiv.innerHTML = '<p>There was a problem retrieving data: ' + req.statusText + '</p>';
      }
   }
}

函数重载数据（）
{
var now=新日期（）；
url='liveData？'+now.getTime（）；
试一试{
req=新的XMLHttpRequest（）；
}捕获（e）{
试一试{
req=新的ActiveXObject（“Msxml2.XMLHTTP”）；
}捕获（e）{
试一试{
req=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}捕获量（oc）{
警报（“不支持AJAX”）；
返回；
}
}
}
req.onreadystatechange=processReqChange；
请求打开（“获取”，url，true）；
请求发送（空）；
}
函数processReqChange（）
{
//如果req显示“完成”
如果（req.readyState==4）
{
dataDiv=document.getElementById（'currentData'）；
//如果“确定”
如果（请求状态==200）
{
//设置当前数据文本
dataDiv.innerHTML=req.responseText；
//启动新计时器（1分钟）
timeoutID=setTimeout（'reloadData（）'，60000）；
}
其他的
{
//标志错误
dataDiv.innerHTML='检索数据时出现问题：'+req.statusText+'
'；
}
}
}

获得您想要的动态更新的最佳方法是AJAX，因为您并不总是想要真正的刷新。你说你试过AJAX？这种方法看起来怎么样

我的建议是对web架构有一个基本的了解。尝试理解您找到的JS代码以及AJAX是如何工作的。你以前和JS一起工作过吗？如果没有，学习基础知识

将url变量更改为服务器上用于返回数据的url。是的，你会需要的。然后查看回调函数（processReqChange（））

---

我想给你的不仅仅是提示，但在你的早期阶段，最好是单独做很多事情，由更有经验的开发人员提供一些提示。

不得不添加到帖子：）我完全不了解如何使用你的提示。步骤1：学习JS。第2步：学习什么是AJAX。步骤3：理解代码。作为一名新开发人员没有问题。你用你的项目挑战自己是件好事。但你仍然需要基础知识。

function reloadData()
{
   var now = new Date();
   url = 'liveData?' + now.getTime();

   try {
      req = new XMLHttpRequest();
   } catch (e) {
      try {
         req = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         try {
            req = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (oc) {
            alert("No AJAX Support");
            return;
         }
      }
   }

   req.onreadystatechange = processReqChange;
   req.open("GET", url, true);
   req.send(null);
}

function processReqChange()
{
   // If req shows "complete"
   if (req.readyState == 4)
   {
      dataDiv = document.getElementById('currentData');

      // If "OK"
      if (req.status == 200)
      {
         // Set current data text
         dataDiv.innerHTML = req.responseText;

         // Start new timer (1 min)
         timeoutID = setTimeout('reloadData()', 60000);
      }
      else
      {
         // Flag error
         dataDiv.innerHTML = '<p>There was a problem retrieving data: ' + req.statusText + '</p>';
      }
   }
}