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

こんにちは！ProgRiroです。

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

コード

<!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>

<!DOCTYPE html>

<head>

<title>Ajax Sample</title>

</head>

<body>

<h1>Ajax Sample</h1>

<button type="button" onclick="demoAjax()">Ajax Start</button>

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(非同期通信)をしてみましょう。

コード

実行結果

【HTML】簡単！HTMLの環境構築！

【CSS】スマホでスーパーリロードをして、確実にCSSを反映させる

【プログラミング】プログラミングスクールに向いている人の特徴