プログラミング

【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
理系大学生です。ITベンチャーでエンジニアとして働きながら、プログラミングスクールの講師も務めています。 趣味はプログラミング。 設計からコーディング、テストまでを行い、個人開発していきたい。 研究分野はデータ分析。世の中になくてはならないようなプロダクトを作りたいと思っています。
RELATED POST