Question

我编写了下面的脚本来从存储在工业自动化设备中的Json文件中获取值。该脚本位于存储在PC中的HTML页面内，并根据其ID替换Div内容。注意：我无法在工业设备上运行任何代码。这不是真正的服务器＆＃34;。它只存储Json文件并基于真实传感器更新其值。

index.html内的脚本

<script>
    function callback(json)
    {
        document.getElementById("Nro_Ensaio").innerHTML = json.Nro_Ensaio;
        document.getElementById("SP_Pelotas1").innerHTML = json.SP_Pelotas;
        document.getElementById("SP_Pelotas2").innerHTML = json.SP_Pelotas;
        document.getElementById("PV_Pelotas1").innerHTML = json.PV_Pelotas;
        document.getElementById("Status").innerHTML = json.Status;
    }
</script>
<script type="text/javascript" src="http://192.168.0.103/awp/VAR_PRENSAS/ensaio.json"></script>

ensaio.json文件

callback({
    'Inicia': ':="ENSAIO".CMDS.LIBERA:',
    'Rearme': ':="ENSAIO".CMDS.RESET:',
    'Nro_Serie': ':="ENSAIO".Nro_Serie:',
    'Modelo': ':="ENSAIO".Modelo:',
    'Nro_Ensaio': ':="ENSAIO".Nro_Ensaio:',
    'Pronto': ':="ENSAIO".Pronto:',
    'Data': ':="ENSAIO".Data:',
    'Hora': ':="ENSAIO".Hora:',
    'SP_Pelotas': ':="ENSAIO".SP_Pelotas:',
    'PV_Pelotas': ':="ENSAIO".PV_Pelotas:',
    'Status': ':="ENSAIO".Status:'
});

当我在浏览器中打开index.html时，我可以查看我真正想要的地方的所有值，但我需要一种方法来刷新这些值。我尝试使用下面的脚本刷新页面，但div值每次都会闪烁。

<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
    setTimeout("location.reload(true);",timeoutPeriod);
}
//   -->
</script>
</head>
<body onload="JavaScript:timedRefresh(5000);">

如何在不闪烁页面的情况下每秒更新Json文件中的div内容？ 非常重要的信息：我无法在此服务器＆＃34;上启用跨域请求。

有关在此处为此设备创建页面的详细信息！ http://www.dmcinfo.com/latest-thinking/blog/articletype/articleview/articleid/8567/siemens-s7-1200-web-server-tutorial--from-getting-started-to-html5-user-defined-pages 谢谢！

我尝试在下面执行此脚本。

    <script> 
    function callback(json)
    { 
    document.getElementById("Nro_Ensaio").innerHTML = json.Nro_Ensaio;
document.getElementById("SP_Pelotas1").innerHTML = json.SP_Pelotas;
document.getElementById("SP_Pelotas2").innerHTML = json.SP_Pelotas;
document.getElementById("PV_Pelotas1").innerHTML = json.PV_Pelotas;
document.getElementById("Status").innerHTML = json.Status; 
    }
    setInterval(callback,1000); 
    </script>
    <script type="text/javascript" src="192.168.0.103/awp/VAR_PRENSAS/ensaio.json"></script>

Ensaio.json内容

callback({
    'Inicia': '0',
    'Rearme': '0',
    'Nro_Serie': '010',
    'Modelo': 'CPT001',
    'Nro_Ensaio': '138',
    'Pronto': '0',
    'Data': '18-07-2014',
    'Hora': '10-02',
    'SP_Pelotas': '40',
    'PV_Pelotas': '1',
    'Status': 'ENSAIO',
    'Nome': 'Test',
    'Descricao': 'Test1'    
});

Answer 1

我尝试在Javascript中更改脚本标记的src属性，但似乎需要替换脚本标记才能加载脚本。这是一个函数，它接受脚本URI和间隔，然后无限期地重新加载脚本，而不会堆积一堆脚本标记：

var scriptLoader = (function () {
    var head = document.getElementsByTagName("head")[0];

    return function (scriptURI, interval) {
        var scriptElement = null;

        setInterval(function () {
            var newScriptElement = document.createElement('script');
            newScriptElement.type = 'text/javascript';
            newScriptElement.onerror = function (error) {
                throw new URIError('Could not load script ' + error.target.src);
            };

            if (scriptElement) {
                head.replaceChild(newScriptElement, scriptElement);
            } else {
                head.appendChild(newScriptElement);
            }
            newScriptElement.src = scriptURI;

            scriptElement = newScriptElement;
        }, interval);
    }
}());

它的使用方式如下：

window.onload = function () {
    scriptLoader("http://192.168.0.103/awp/VAR_PRENSAS/ensaio.json", 10000);
};

Answer 2

[编辑：此答案仅在您可以在服务器上设置Access-Control-Allow-Origin标头时有效。另外，我的回答是 sans jquery。] 如果我理解正确的话，你要做的是 asyncronous http请求。这意味着您希望从服务器获取更多信息而无需重新加载整个页面。用于执行此操作的javascript技术称为ajax或XHR。 here is an example如何使用ajax。您需要将xmlhttp.open("GET","ajax_info.txt",true);中的网址替换为您要访问的服务器上文件的（完整）网址，即http://....。您的请求从服务器获得的响应存储在xmlhttp.responseText中，其中xmlhttp是分配给ajax请求的变量的名称。

[编辑：根据新信息，您可能更喜欢重新加载iframe而不是整页？这不是一个很棒的解决方案，但是iframe不需要跨站点请求。]

每秒从json文件更新多个div而不会出现页面闪烁

2 个答案: