プログラミング

【Ajax】非同期通信ができているか簡単なコードで確認する

 

こんにちは！ProgRiroです。

非同期通信ができているかを確認するための簡単なコードです。参考までに。

コード

Ajax Sample
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="ja">
 
<head>
    <meta charset="UTF-8">
    <title>Ajax Sample</title>
</head>
 
<body>
    <h1>Ajax Sample</h1>
    <p id="demo"></p>
    <button type="button" onclick="demoAjax()">Ajax Start</button>
 
    <script type="text/javascript">
        function demoAjax() {
            // オブジェクト生成
            var xhttp = new XMLHttpRequest();
 
            // 状態変化した時に実行する関数の定義
            xhttp.onreadystatechange = function () {
                // readyState == 4 : レスポンス準備完了
                // status == 200 : ステータス "OK"
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("demo").innerHTML = this.responseText;
                }
            }
 
            // リクエスト送信
            xhttp.open("GET", "ajax.txt", true);
            xhttp.send();
        }
    </script>
</body>
 
</html>

実行結果


これはAjaxの基本です。

ここから自分で色々処理を追加して、本格的なAjax(非同期通信)をしてみましょう。

Ajax Javascript Programming 非同期通信
ABOUT ME
ProgRiro
エンジニアとして働きながら、プログラミングスクールの講師も務めています。 趣味はプログラミング、映画鑑賞、読書、ギター。 将来、フルスタックエンジニアとなり起業を目指して勉強中。 発信力をつけるためにブログやってます。 プログラミング初心者の方を全力でサポートします。
RELATED POST