「Ajax」 readyStateでXMLHttpRequest クライアントの状態を返す

2021年9月4日

説明
XMLHttpRequest.readyState プロパティは XMLHttpRequest クライアントの状態を返します。
0: リクエストが初期化されない
1: サーバー接続が確立
2: リクエストを受け取る
3: リクエストの処理
4: 操作が完了
使用例

<!DOCTYPE html>

<html>

<body>

<h2>The XMLHttpRequestオブジェクト</h2>

</div>

function getDoc() {

// XMLHttpRequesrオブジェクトの宣言

const xhttp = new XMLHttpRequest();

//コールバック関数

xhttp.onreadystatechange = function() {

//4:操作が完了したステータス:OK 200

if (this.readyState == 4 && this.status == 200) {

//レスポンステキストを表示

document.getElementById("disp").innerHTML =

this.responseText;

}

};

//リストを初期化

xhttp.open("GET", "ajax_info.txt");

//リクエストを送信

xhttp.send();

}

</script>

</body>

</html>

<!DOCTYPE html> <html> <body> <div id="disp"> <h2>The XMLHttpRequestオブジェクト</h2> <button type="button" onclick="getDoc()">変更</button> </div> <script> function getDoc() { // XMLHttpRequesrオブジェクトの宣言 const xhttp = new XMLHttpRequest(); //コールバック関数 xhttp.onreadystatechange = function() { //4:操作が完了したステータス:OK 200 if (this.readyState == 4 && this.status == 200) { //レスポンステキストを表示 document.getElementById("disp").innerHTML = this.responseText; } }; //リストを初期化 xhttp.open("GET", "ajax_info.txt"); //リクエストを送信 xhttp.send(); } </script> </body> </html>

<!DOCTYPE html>
<html>
<body>

<div id="disp">
<h2>The XMLHttpRequestオブジェクト</h2>
<button type="button" onclick="getDoc()">変更</button>
</div>

<script>
function getDoc() {
  // XMLHttpRequesrオブジェクトの宣言
  const xhttp = new XMLHttpRequest();
   //コールバック関数
  xhttp.onreadystatechange = function() {
    //4:操作が完了した ステータス:OK 200
    if (this.readyState == 4 && this.status == 200) {
    //レスポンステキストを表示
      document.getElementById("disp").innerHTML =
      this.responseText;
    }
  };
  //リストを初期化
  xhttp.open("GET", "ajax_info.txt");
  //リクエストを送信
  xhttp.send();
}
</script>

</body>
</html>

CSS

Posted by arkgame

関連投稿: