您的“objectoJSON.js”不是 JSON 文件...它是一个简单的 javascript object。
JSON 文件应该是这样的。
{
"rightFencer":{
"name":"Jorge ANZOLA",
"nacionality":"VEN",
"points":10
},
"leftFencer":{
"name":"John DOE",
"nacionality":"USA",
"points":5
}
}
你要找的是
Ajax、服务器发送事件或 webSockets
那些无需刷新页面或单击某些内容即可更新页面内容。
以下代码显示了如何与每种技术进行交互。
它们有很多优点和缺点……很多人现在就写。
问具体的，我可以将其添加到答案中。
以下所有示例都是纯 javascript，因此不需要任何类型的库。它们适用于几乎所有新的浏览器... ios、android、windows。
以下所有示例都可以适应您发布的格式不正确的 json 文件。看看底部。
阿贾克斯：
客户要求数据
这会每 30 秒更新一次客户端。
function $(a){
return document.getElementById(a)
}
function ajax(a,b,c){ // Url, Callback, just a placeholder
c=new XMLHttpRequest;
c.open('GET',a);
c.onload=b;
c.send()
}
function reloadData(){
ajax('database.js',updateText)
};
function updateText(){
var db=JSON.parse(this.response);
$("rightFencerName").innerHTML=db.rightFencer.name;
$("leftFencerName").innerHTML=db.leftFencer.name;
$("rightFencerPoints").innerHTML=db.rightFencer.points;
$("leftFencerPoints").innerHTML=db.leftFencer.points;
}
window.setInterval(reloadData,30000);//30 seconds
/*setinterval is a very bad way to update stuff ,
especially with ajax.. there are many other ways to do that.*/
如果你在本地读取 JS 文件，Ajax 不需要任何类型的服务器。
还要附加它...但是这两个示例都是基于时间的...如果您有很多在线用户，那就不好了。 WS 和 SSE 允许您根据需要单独更新每个用户。
上海证券交易所：
服务器在需要时发送数据
这使用php创建一个Server Sent Events Server
这也会每 30 秒更新一次客户端，但在这种情况下，服务器会更新客户端。客户端使用 Ajax 请求服务器进行更新。
php 文件“sse.php”
header('Content-Type: text/event-stream'); // specific sse mimetype
header('Cache-Control: no-cache'); // no cache
while(true) {
if(/*something changes*/){
echo "id: ".time().PHP_EOL;
echo "data: ".$data.PHP_EOL;
echo PHP_EOL;
}
ob_flush(); // clear memory
flush(); // clear memory
sleep(30);// seconds
}
javascript 文件
function $(a){
return document.getElementById(a)
}
function updateText(e){
var db=JSON.parse(e.data);
$("rightFencerName").innerHTML=db.rightFencer.name;
$("leftFencerName").innerHTML=db.leftFencer.name;
$("rightFencerPoints").innerHTML=db.rightFencer.points;
$("leftFencerPoints").innerHTML=db.leftFencer.points;
}
var sse=new EventSource("sse.php");
sse.onmessage=updateText;
WebSockets：
服务器在需要时发送数据，客户端在需要时请求数据
webSockets 很酷……通信是双向的。它很快。但是您需要像 nodejs 服务器这样的东西才能正确处理它。
function $(a){
return document.getElementById(a)
}
function updateText(e){
var db=JSON.parse(e.data);
$("rightFencerName").innerHTML=db.rightFencer.name;
$("leftFencerName").innerHTML=db.leftFencer.name;
$("rightFencerPoints").innerHTML=db.rightFencer.points;
$("leftFencerPoints").innerHTML=db.leftFencer.points;
}
var ws=new WebSocket('ws://YOURIP:YOURPORT');
/*ws.onopen=function(){ //those events are also aviable with sse
ws.send('WS open!');//sending data to the server
};
ws.onclose=function(){
console.log('WS closed!');
};*/
ws.onmessage=updateText;
适配js
Ajax..
使用 ajax 加载“objectoJSON.js”并对其进行评估......但不使用 eval()。评估是邪恶的。使用new Function()
function updateText(){
document.getElementById("rightFencerName").innerHTML = rightFencer.name;
document.getElementById("leftFencerName").innerHTML = leftFencer.name;
document.getElementById("rightFencerPoints").innerHTML = rightFencer.points;
document.getElementById("leftFencerPoints").innerHTML = leftFencer.points;
}
(new Function(this.response+'\n updateText()'))();
或每 30 秒或其他任何时间附加脚本......
我不写那个例子，因为它是最糟糕的方法。
对于 30 个客户端，这意味着您必须每秒钟从服务器读取文件。
使用 SSE 或 WS，您只需阅读一次即可将其广播给数百个客户端。
我建议修复你的 json 文件。
如果您有任何其他问题，请提出。