Ajaxを使った非同期通信の実践編2

Ajaxを使った非同期通信の実践編2

【開発環境】
OS：Win11（64ビット）
クロム
Brackets

【Bracketsを使用する】
1，Bracketsを起動する

2，作業用フォルダを作る---「work」

3，新規ファイルを作る--getText1.html

4,コードを書く 

＜!DOCTYPE html＞
＜html lang="ja"＞
＜head＞
＜meta charset="UTF-8"＞
＜title＞Ajax サンプル＜/title＞
＜/head＞
＜body＞

＜p＞
ボタンをクリックするとデータを取得します。
＜/p＞

＜form＞
＜input type="button" value="ロード" onClick="getData()"＞
＜/form＞
テキストデータが入る部分を下記のように書く
＜div id="result"＞＜/div＞

＜script＞
//データをロードする
function getData(){
  let request = new XMLHttpRequest();
  
  request.onreadystatechange = function(){
    if (request.readyState == 4){
      if (request.status == 200){
        let node = document.getElementById("result");
        node.innerHTML = request.responseText;
      }
    }
  }

  request.open('GET', './data.txt', true);
  request.send(null);
}
＜/script＞

＜/body＞
＜/html＞

5.呼び出される。「data.txt」を書く

これはAjaxによる非同期のテストです

6．Webを立ち上げる

7、クロームが立ち上がる

8，ロードをクリックする

以上で終わり