我有一个包含一些产品的购物车页面。为方便起见,我们将此页面称为 1。第 1 页上的每个产品都有一个按钮,可在新选项卡中打开编辑器,我们将此页面称为 2。
人们可以在第 2 页上编辑产品,然后单击按钮将更改保存在数据库中并关闭选项卡。此时,第 1 页应刷新并显示第 2 页中所做的更改。
目前我通过使用第 1 页上的 ajax 请求每 2 秒检查一次更改来做到这一点。就像这样:
<script>
function uuidv4() {
const a = crypto.getRandomValues(new Uint16Array(8));
let i = 0;
return '00-0-4-1-000'.replace(/[^-]/g,
s => (a[i++] + s * 0x10000 >> s).toString(16).padStart(4, '0')
);
}
var guidVariable = uuidv4();
function send1() {
...
xhttp.open("POST", "php/contact1.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name="+form_name+"&title="+form_title+"&email="+form_email+"&textarea="+form_textarea+"&guidVariable ="+guidVariable );
}
</script>
<!-- Part 2 -->
<script>
function send2() {
...
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("contact-form").innerHTML =
this.responseText;
}
};
xhttp.open("POST", "php/contact2.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("industry="+form_industry+"&academia="+form_academia+"&targeted="+form_targeted+"&discovery="+form_discovery+"&dunno="+form_dunno+"&samples="+form_samples+"&groups="+form_groups+"&groups2="+form_groups2+"&biological="+form_biological+"&technical="+form_technical+"&source="+form_source+"&origen="+form_origen+"&extraction="+form_extraction+"&aim="+form_aim+"&phone="+form_phone+"&affiliated="+form_affiliated+"&textarea="+form_textarea+"&guidVariable ="+guidVariable );
}
</script>
这意味着每 2 秒就会发出一次 HTTP 请求,即使有人什么都不做并离开了打开的第 1 页。当网站上有很多访问者时,这是一个坏主意。
必须有更好的方法来做到这一点。我发现了 websockets,但我的共享托管服务提供商没有给我足够的访问权限来完成这些工作,所以这些都被排除在外。
有没有一种方法可以在保存更改并关闭第 2 页时将信号/数据从第 2 页发送到第 1 页,而不是每 2 秒通过 ajax 调用在数据库中检查一次?
第 1 页在我的共享主机上,第 2 页在 VPS(我可以访问)上。所以它们不在同一台服务器上。
对此的最佳解决方案是什么?