htmlにおいてmeta_refreshを用いてウェブページを自動更新しているんですが、更新の空白をなくす方法はないんでしょうか。
非同期通信もちいてなんとかする方法を思いついたのですが初習のため難航しております。
他の方法があるか、非同期通信についてアドバイスいただけないでしょうか。
htmlを更新するとどうしても更新の空白ができてしまいます。更新の空白をなくすためには、いわゆるAjax
と呼ばれる方法で、非同期通信しながら動的にページの一部を書き換えるようにします。
Ajax
の説明は長くなるし、いろいろ書き方があるので、ここではES2017でサンプルだけを書いておきます。data.jsonを変更すると、ページの表示も変わります。
index.html
<!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>
data.json
{
"item1":"Hello, everyone!"
}
なお、Internet Explorer 11
ではES6以降のJavaScriptはBabel等でES5にトランスパイルしないと動作しません。Internet Explorer 11
ですぐに動作するようにしたいのであればjQuery
を使ってください。