「ajax」XMLHttpRequestオブジェクトのサンプル

2021年9月4日

説明
XMLHttpRequest (XHR) オブジェクトは、サーバーと対話するために使用されます。
ページ全体を更新する必要なしに、データを受け取ることができます。
書式
XMLHttpRequest変数名.open(“GET", ファイル名);
XMLHttpRequest変数名.send();
使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<body>
<h2>XMLHttpRequestオブジェクトのサンプル</h2>
<div id="show">
<p>ajaxでテキストを変更.</p>
<button type="button" onclick="getDoc()">変更</button>
</div>
<script>
function getDoc() {
const xhttp = new XMLHttpRequest();
// Callback 関数
xhttp.onload = function() {
//セレクタdivの"show"にレスポンステキストを表示
document.getElementById("show").innerHTML = this.responseText;
}
//サーバーにリクエストを送信する
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
</script>
</body>
</html>
<!DOCTYPE html> <html> <body> <h2>XMLHttpRequestオブジェクトのサンプル</h2> <div id="show"> <p>ajaxでテキストを変更.</p> <button type="button" onclick="getDoc()">変更</button> </div> <script> function getDoc() { const xhttp = new XMLHttpRequest(); // Callback 関数 xhttp.onload = function() { //セレクタdivの"show"にレスポンステキストを表示 document.getElementById("show").innerHTML = this.responseText; } //サーバーにリクエストを送信する xhttp.open("GET", "ajax_info.txt"); xhttp.send(); } </script> </body> </html>
<!DOCTYPE html>
<html>
<body>

<h2>XMLHttpRequestオブジェクトのサンプル</h2>

<div id="show">
<p>ajaxでテキストを変更.</p>
<button type="button" onclick="getDoc()">変更</button>
</div>

<script>
function getDoc() {
  const xhttp = new XMLHttpRequest();
  // Callback 関数
  xhttp.onload = function() {
   //セレクタdivの"show"にレスポンステキストを表示
    document.getElementById("show").innerHTML = this.responseText;
  }
  //サーバーにリクエストを送信する
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

 

関連投稿:

  1. 「AJAX」XMLHttpRequestオブジェクトのサンプル
  2. 「AJAX」XMLHttpRequest.readyState プロパティのサンプル
  3. 「AJAX」コールバック(callback)関数のサンプル

Ajax

Posted by arkgame