javascriptでページを一部だけ更新する方法 - Elsaの技術日記(徒然なるままに)

突然、htmlで表示したページの一部だけ定期的に更新する方法が気になりましたww。
確かにReact使ってしまえばこんなこと簡単に出来てしまうが、そういうの使わずに実装できないかな？と思い立ちました！！
f:id:Elsammit:20200828224818p:plain

さて、、、どうしたものか。。。
と思い、調べてみたところあっさり発見！！
www.sejuku.net

で、記事を見ながら実際に動かしてみましたので備忘録として残しておこうと思います。
こちらの記事を利用して、
今回はサーバサイドから得られる結果を元に表示する画像を切り替えていきたいと思います！！

■サーバサイド実装
■html実装
■javascript実装
■最後に
■参考

■サーバサイド実装

まずサーバサイドですが、node.jsでこちらのように作成しました。

const express = require('express');
const app = express();

app.use(express.static('./html'));
app.use(express.static('./js'));
app.use(express.static('./img'));


app.get('/aaa',(req,res)=>{
    var rand = Math.floor( Math.random() * 3 ) ;

    res.send(String(rand));
});

app.listen(3000,()=> 
    console.log('Listening on port 3000')
);

getリクエストを受けた際に1～3の中から1つをランダムでレスポンスする制御にしました。

■html実装

index.htmlはこちらのように作成。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>ランダム画像表示</title>
        <script type="text/javascript" src="ajax.js"></script>
    </head>
    <body>
        <div>
            <h1>ランダムに画像を切り替えていくよ</h1>
            <img id="testA" width="200" height="200" src="hamstar.png" />
        </div>
    </body>
</html>

id=testAのimgタグの画像を切り替えていきます。

■javascript実装

最後に今回重要となるjavascriptです！！

大きく分けて3つの機能で構成されます。
・定期的に特定処理を繰り返す
・サーバサイドにgetリクエストを発行
・レスポンス結果を元に画像を切り替え

まずは定期的に特定処理を繰り返すです。
ソースはこちら。

window.addEventListener('load', function () {
    setInterval(function () {
        Do_repetition();
    }, 500);

ページ表示時に定期的に特定の処理を行うsetIntervalが呼び出されます。
そして、特定の処理としてDo_repetition関数をコールします。
この定期処理は500msで実行されます。

次に、サーバサイドにgetリクエストを発行。
こちらはajaxを用いました。
ソースはこちら。

function Do_repetition() {
 
    // urlを加工し、キャッシュされないurlにする。
    url = "http://IPアドレス:3000/aaa"
 
    // ajaxオブジェクト生成
    var ajax = new XMLHttpRequest;
 
    // ajax通信open
    ajax.open('GET', url, true);
 
    // ajax返信時の処理
    ajax.onload = function (data) {
       var repos = data.currentTarget.response;
        // ここにgetレスポンス受け取り時の処理を記載.
    };
 
    // ajax開始
    ajax.send(null);
}

最後に、レスポンス結果を元に画像を切り替え。
処理はこちら。

var repos = data.currentTarget.response;

var div = document.getElementById('testA');

if(repos == "0"){
    div.src = "makewani.png";
}else if(repos == "1"){
    div.src="hamstar.png";
}else{
    div.src="mogura.png";
}

imgタグのidを用いて、画像のセットを行います。

■実装結果
実装したWebアプリを動作させた結果はこちらのようになります。
f:id:Elsammit:20200828231348g:plain