Javascript 如何实时更新，而不是一次又一次地重新加载浏览器？_Javascript_Xmlhttprequest

Javascript 如何实时更新，而不是一次又一次地重新加载浏览器？

javascript

Javascript 如何实时更新，而不是一次又一次地重新加载浏览器？,javascript,xmlhttprequest,Javascript,Xmlhttprequest,我正在学习xhr，如何在浏览器上实时加载价格？当我们向api发送GET请求时，我们会收到一个json响应，该响应有价格，我不想一次又一次地重新加载浏览器选项卡来检查价格，我希望它实时更新，怎么办 <!DOCTYPE html> <html> <head> <title>TEST</title> </head> <body> <script type="text/javascript"> var xhr

我正在学习xhr，如何在浏览器上实时加载价格？当我们向api发送GET请求时，我们会收到一个json响应，该响应有价格，我不想一次又一次地重新加载浏览器选项卡来检查价格，我希望它实时更新，怎么办

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
</head>
<body>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.onload  = function(){
    document.write(this.responseText)
};
xhr.open("GET","https://api.coindesk.com/v1/bpi/currentprice/USD.json",true);
xhr.send();
</script>
</body>
</html>


试验
var xhr=new XMLHttpRequest（）；
xhr.onload=函数（）{
document.write（this.responseText）
};
xhr.open（“GET”https://api.coindesk.com/v1/bpi/currentprice/USD.json“，对）；
xhr.send（）；

您要问的基本上是如何安排代码在将来运行。内置的机制有

setTimeout（）

，它运行一次，和

setInterval（）

，它运行多次。例如，您可以：

setInterval(function () {
  var xhr = new XMLHttpRequest();
  xhr.onload  = function(){
    document.write(this.responseText)
  };
  xhr.open("GET","https://api.coindesk.com/v1/bpi/currentprice/USD.json",true);
  xhr.send();
}, 10 * 1000);

这将每10秒运行一次代码。（

乘以

毫秒。）但有一个问题，即GET请求可能需要超过10秒才能完成。在恶劣的移动连接和高延迟链路（如卫星用户的链路）上尤其如此。要解决这个问题，您需要改用

setTimeout（）

，并在第一个请求完成后触发代码运行。您应该确保还包括错误案例，因为如果只有一个错误，您不希望循环停止。为了简化所有这些，我将切换到使用。（Fetch是您现在应该使用的功能。它比XHR更健壮，并且受到浏览器的良好支持。）

现在，您每10秒更新一次。但是，你要求实时。为此，你需要一个不同的工具

如果您控制服务器，则可以选择支持此简单的基于文本的协议。这允许服务器在数据更新时立即向您推送数据。在客户端上设置事件源非常简单：

const eventSource = new EventSource('https://example.com/bitcoin-prices');
eventSource.addEventListener('message', (e) => {
  console.log(e.data);
});

如果连接丢失，EventSource甚至会重新连接

我希望这能帮助你开始