【JavaScript】ページを更新せず同期的に外部と通信する小ネタ

 いくらソースコードが書きやすくなっても行うべきでないですし、async, await を使ったコードをトランスパイルする方が良いのですが素の JavaScript で題の通りこのことができます。実際のコードが次です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    document.addEventListener('DOMContentLoaded', function () {

        // id="timer"要素の中身を 10ms 毎に変化させる
        const el = document.querySelector('#timer')
        let i = 0;
        setInterval(() => el.textContent = String(i++), 10)

        // 読み込まれて1秒後に動機リクエストを送信
        setTimeout(() => {
            const request = new XMLHttpRequest();
            request.open('GET', 'http://localhost:8090', false);  // `false` で同期リクエストになる
            request.send(null);

            if (request.status === 200) {
                console.log(request.responseText);
            }
            /**
             * https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#example_http_synchronous_request
             * より引用
             */
        }, 1000)
    })

    </script>
</head>
<body>
<div id="timer"></div>
<!-- input 要素に対するキーボード入力もできなくなります -->
<input type="text">
<!-- Ctrl+R によるキーボードショートカットの更新もできなくなります -->

</body>
</html>

同期と非同期のリクエスト – Web API | MDN#例: HTTP 同期リクエスト

 そんなことができたのかって感じです。もっとも Firefox では次の様に警告が現れ、実際どのブラウザでも通信中は様々な機能が動かなくなるので大変ユーザーに優しくない挙動です。

ユーザー体験に対して好ましくない影響があるため、メインスレッドでの同期 XMLHttpRequest は推奨されません。詳しくは http://xhr.spec.whatwg.org/ を参照してください。

 そういうこともできる、というぐらいで実際のプログラムには持ち込まない方が良いでしょう。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG