Javascript 通知html更新自身(向html发送信号)
假设我有一张桌子在里面。我想远程通知html页面,表中的另一行已经更新。这在Html中可能吗 我将只做测试的目的,并将在我发送通知的同一台计算机上查看该网站,因此,这不是我们正在处理的“安全”问题Javascript 通知html更新自身(向html发送信号),javascript,html,sql,Javascript,Html,Sql,假设我有一张桌子在里面。我想远程通知html页面,表中的另一行已经更新。这在Html中可能吗 我将只做测试的目的,并将在我发送通知的同一台计算机上查看该网站,因此,这不是我们正在处理的“安全”问题 <html> <head> </head> <body> <div id="test"> <table> <tr> <td id="
<html>
<head>
</head>
<body>
<div id="test">
<table>
<tr>
<td id="name">Harry</td>
</tr>
</table>
</div>
</body>
</html>
我知道这是一个奇怪的问题,它是相当不具体的,我为此道歉。我想做的是拥有一个SQL数据库,一旦数据库更新,它就会通知html页面进行自我更新,但正如我所说的,我不知道这是否可行。您可以使用AngularJs或KnockoutJs,这是两个javascript框架,根据viewmodel中的更改自动更新dom元素
var interval = setInterval(function() { updateTestData(); }, 10000);
function upateTestData() {
//use ajax to poll for new data and update DOM tree
}
或者,您只能在必要时请求再次更新:
var timer = setTimeout(function() { updateTestData(); }, 10000);
function upateTestData() {
//use ajax to poll for new data and update DOM tree
...
if(need to refresh again after some time) {
timer = setTimeout(function() { updateTestData(); }, 1000);
}
}
您可以使用一种称为Ajax的技术来实现这一点 您需要做的是每隔一定时间设置一个超时,并使用ajax向服务器发送一个查询,并检查表中是否有更多的行要添加
互联网上有很多与Ajax相关的教程,本网站有一个,例如:最终的解决方案是
WebSocket
,但在您的案例中实现起来有点复杂。此外,只有上一代浏览器支持它
您应该在HTML页面中创建一个setInterval函数,并检查存储在数据库中的时间戳,例如,以了解页面是否是最新的
例如:
在HTML页面中:
var now = new Date();
var timestamp = now.getTime();
setInterval(function(){
$.post('retrieveLastTimestamp.php',{},function(data){
if(intval(data) > timestamp)
{
//The page is no longer up to date
document.location.reload(true);
}
});
},5000);
//Call this function to update the last timestamp dta of your page after row insertion
function updateTimestamp()
{
var now = new Date();
var timestamp = now.getTime();
$.post('updateTimestamp.php',{timestamp : timestamp },function(data){
alert('timestamp update done');
});
}
retrieveLastTimestamp.php
<?php
//SQL request to retrieve the last refresh timestamp
echo timestamp;
?>
<?php
//SQL request updtae the last timestamp
$timestamp = $_POST['timestamp'];
?>
updateTimestamp.php
<?php
//SQL request to retrieve the last refresh timestamp
echo timestamp;
?>
<?php
//SQL request updtae the last timestamp
$timestamp = $_POST['timestamp'];
?>
正如@aleks-g所解释的,您不能将信息推送到html 然而,您可能会使用大量免费或廉价的推送服务。它们带有简单的javascript配置,其思想是服务器发送一些信号,并在发送该信号时触发javascript侦听器。
通过这种方式,您可以获得实时行为,而无需触发过多的ajax调用
您可以使用或使用某些现有服务来实现它。@DanielHilgarth Fair。我个人并不喜欢
setInterval
,而是更喜欢setTimeout
。然而,为了简单起见,我在本例中展示了它。我还用setTimeout
更新了答案。我刚刚添加了一个包含Ajax相关教程的网站示例。w3schools对于初学者来说是非常好的,尽管它可能存在缺陷。请查看COMET解决方案,如Meteor或DerbyJS:。两者都将为您提供所需的解决方案—数据库更新后,前端将立即更新。但是(对于Meteor),您需要使用MongoDB,而不是传统的RDBMS,除非您使用类似Meteor的脚本-