

htmlにおいてmeta_refreshを用いてウェブページを自動更新しているんですが、更新の空白をなくす方法はないんでしょうか。

非同期通信もちいてなんとかする方法を思いついたのですが初習のため難航しております。  
他の方法があるか、非同期通信についてアドバイスいただけないでしょうか。


CC BY-SA 4.0
2018-06-28T04:32:27.723
45115
2018-06-30T22:40:44.127
29097
question
javascript html
webページのリロード中における更新中の空白を避ける方法について


htmlを更新するとどうしても更新の空白ができてしまいます。更新の空白をなくすためには、いわゆる`Ajax`と呼ばれる方法で、非同期通信しながら動的にページの一部を書き換えるようにします。

`Ajax`の説明は長くなるし、いろいろ書き方があるので、ここではES2017でサンプルだけを書いておきます。data.jsonを変更すると、ページの表示も変わります。

index.html

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p id="hello">Hello, World!</p>
    </body>
    <script>
        var refresh = async() => {
            const response = await fetch('data.json', {"cache":"no-cache"});
            const json = await response.json();
            const element = document.getElementById("hello");
            element.innerText =json.item1;
        };
    
        setInterval(refresh, 1000);
    </script>
    </html>
    
[/code]

data.json

[code]

    {
      "item1":"Hello, everyone!"
    }
    
[/code]

なお、`Internet Explorer
11`ではES6以降のJavaScriptはBabel等でES5にトランスパイルしないと動作しません。`Internet Explorer
11`ですぐに動作するようにしたいのであれば`jQuery`を使ってください。


CC BY-SA 4.0
2018-06-30T12:45:05.983
45192
2018-06-30T22:40:44.127
2018-06-30T22:40:44.127
15171
15171
45115
answer