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,ロードをクリックする
以上で終わり
※コメント投稿者のブログIDはブログ作成者のみに通知されます