こんにちは！ProgRiroです。
非同期通信ができているかを確認するための簡単なコードです。参考までに。
コード
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(非同期通信)をしてみましょう。
ABOUT ME
