Web Design Leaves

const xhr = new XMLHttpRequest();

//古い IE に対応するための機能検出を使った書き方
var xhr;
if(window.ActiveXObject){  // ActiveXが存在するかをテスト
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){  // XHRが定義されているかをテスト
  xhr = new XMLHttpRequest();
}
else{  // Ajaxのサポートがなければエラーを送出
  throw new Error("Ajax is not supported by this browser");
}

.
├── sample.html // AJAX のコードを記述するファイル
└── hello.txt // Hello AJAX! というテキストが記述されているファイル

// XMLHttpRequest オブジェクトのインスタンスを生成
const xhr = new XMLHttpRequest();

// XMLHttpRequest オブジェクトの onreadystatechange イベントハンドラで処理を定義
xhr.onreadystatechange = function() {
  // 取得操作が完了していれば（readyState の値が 4 になると取得操作完了）
  if (this.readyState === 4) {
    // 取得操作が成功していれば（status の値が200番台なら成功）
    if (this.status >= 200 && this.status < 300) {
      // 取得したテキスト（responseText プロパティの値）をコンソールに出力
      console.log(this.responseText);  // Hello AJAX! と出力される
    }else{
      // status の値が200番台でなければ失敗
      console.log(`リクエスト失敗: ${this.status}`);
    }
  }
}

// HTTP のメソッド（GET）とアクセスするファイル（hello.txt）を指定
xhr.open('GET', 'hello.txt', true);

// HTTP リクエストを送信
xhr.send(); // または xhr.send(null); でも同じ

// XMLHttpRequest オブジェクトの readystatechange イベントにリスナーを設定
xhr.addEventListener('readystatechange', () => {
  if(xhr.readyState === 4){
    if(xhr.status >= 200 && xhr.status < 300){
      console.log(xhr.responseText);
    }else{
      console.log(`リクエスト失敗: ${this.status}`);
    }
  }
});

fetch('hello.txt')
.then( (response) => {
  if(response.ok) {
    return response.text();
  }else {
    return `リクエスト失敗: ${response.status}`;
  }
})
.then( (data) => {
  console.log(data); // Hello AJAX! と出力される
});

(async () => {
  const response = await fetch('hello.txt');
  if(response.ok) {
    const data =  await response.text();
    console.log(data);  // Hello AJAX! と出力される
  }else {
    console.log(`リクエスト失敗: ${response.status}`);
  }
})();

.
├── sample.html // フォームと AJAX が記述されているファイル
└── hello-post.php // 名前を加工して返す PHP ファイル

<form name="fmx">
  <label for="name">名前: </label>
  <input id="name" name="name" value="" size="20">
  <button id="send">送信</button>
</form>
<div id="target"></div>

<?php
// 送信された値をサニタイズ
$name = filter_input( INPUT_POST, 'name', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
// 名前を加工して出力
print 'Hello '.$name .'!';

// フォーム要素
const fmx = document.fmx;
// 出力先 div 要素
const target = document.getElementById('target');

// フォームの submit イベントのリスナー
fmx.addEventListener('submit', (e) => {
  // デフォルトのフォームの送信をキャンセル（AJAX で送信）
  e.preventDefault();

  // XMLHttpRequest オブジェクトのインスタンスを生成
  const xhr = new XMLHttpRequest();
  xhr.addEventListener('readystatechange', () => {
    if (xhr.readyState === 4) { // 取得操作が完了していれば
      if (xhr.status >= 200 && xhr.status < 300) { // 取得操作が成功していれば
        // 取得したテキストを出力
        target.textContent = xhr.responseText;
        // 入力欄をクリア
        fmx.name.value = '';
      } else {
        // 通信でエラーの場合はエラーメッセージを表示
        console.warn('Request Failed.')
      }
    } else {
      // 取得操作が完了するまでは Connecting... と表示
      target.textContent = 'Connecting...';
    }
  });

  // HTTP のメソッド（POST）と送信先ファイルを指定
  xhr.open('POST', 'hello-post.php', true);
  // POST する場合はリクエストの MIME タイプを Content-Type に設定
  xhr.setRequestHeader(
    "Content-Type",
    "application/x-www-form-urlencoded"
  );
  // POST する場合は引数にリクエストボディを指定して送信
  xhr.send('name=' + encodeURIComponent(fmx.name.value));
});

// リクエストヘッダーの Content-Type の設定
xhr.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded"
);

// キー名=値&キー名=値 で指定
xhr.send('name=' + encodeURIComponent(fmx.name.value) + '&email=' + encodeURIComponent(fmx.email.value) );

<form name="fmx" action="register.php">
  <label for="name">名前: </label>
  <input id="name" name="name" value="" size="20">
  <label for="email">Email: </label>
  <input id="email" name="email" value="" size="20">
  <button id="send">送信</button>
</form>
<div id="target"></div>

// フォーム
const fmx = document.fmx;
// 出力先
const target = document.getElementById('target');

fmx.addEventListener('submit', (e) => {
  e.preventDefault();

  const xhr = new XMLHttpRequest();

  xhr.addEventListener('readystatechange', () => {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        target.textContent = xhr.responseText;
        // フォームをリセット
        fmx.reset();
      } else {
        console.warn('Request Failed.')
      }
    } else {
      target.textContent = 'Connecting...';
    }
  });
  // 送信先の URL はフォームの action 属性を参照
  xhr.open('POST', fmx.action, true);

  // new FormData() にフォームを指定
  xhr.send(new FormData(fmx));
});

<?php
$name = filter_input( INPUT_POST, 'name', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$email = filter_input( INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
if(!$email) {
$email = 'Not valid.';
}
print 'Name: '.$name .' Email: ' .$email;

// URLSearchParams オブジェクトのインスタンスを生成
const params = new URLSearchParams();
// キー/値のペアでデータを追加
params.append('name', 'Foo');
params.append('email', 'foo@example.com');

// URLSearchParams オブジェクトをコンソールに出力
console.log(params);
// 出力： URLSearchParams {size: 2}

// URLSearchParams オブジェクトを文字列に変換してコンソールに出力
console.log(params.toString());
// 出力： name=Foo&email=foo%40example.com

// コンストラクタに値を渡す
const params = new URLSearchParams([
  ['name', 'Foo'], ['email', 'foo@example.com']
]);

// URLSearchParams オブジェクト
console.log(params);
// 出力 URLSearchParams {size: 2}

// URLSearchParams オブジェクトを文字列に変換
console.log(params.toString());
// 出力 name=Foo&email=foo%40example.com

//オブジェクト（パラメータとするデータ）
const data = {
  name: 'Foo',
  email: 'foo@example.com',
}

// オブジェクトをコンストラクタに渡す
const params = new URLSearchParams(data);

// URLSearchParams オブジェクト
console.log(params);
// 出力 URLSearchParams {size: 2}

// URLSearchParams オブジェクトを文字列に変換
console.log(params.toString());
// 出力 name=Foo&email=foo%40example.com

<div>
  Name: <input id="name" value="" size="20">
  Email: <input id="email" value="" size="20">
  <button id="send">送信</button>
</div>

<div id="target"></div>

<?php
$name = filter_input( INPUT_POST, 'name', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$email = filter_input( INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
if(!$email) {
  $email = 'Not valid.';
}
print 'Name: '.$name .' Email: ' .$email;

const btn = document.getElementById('send');
const name = document.getElementById('name');
const email = document.getElementById('email');

btn.addEventListener('click', (e) => {

  // URLSearchParams オブジェクトを生成（オブジェクト形式のパラメータを渡す）
  const params = new URLSearchParams({
    name: name.value,
    email: email.value
  });

  const xhr = new XMLHttpRequest();

  xhr.addEventListener('readystatechange', () => {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        target.textContent = xhr.responseText;
        name.value = '';
        email.value = '';
      } else {
        console.warn('Request Failed.')
      }
    }
  });
  xhr.open('POST', 'register.php', true);

  // リクエストボディに URLSearchParams オブジェクトを指定
  xhr.send(params);
});

const btn = document.getElementById('send');
const name = document.getElementById('name');
const email = document.getElementById('email');

btn.addEventListener('click', (e) => {

  // パラメータを「キー名=値&キー名=値...」形式で指定
  const params =
    'name=' + encodeURIComponent(name.value) +
    '&email=' + encodeURIComponent(email.value);

  const xhr = new XMLHttpRequest();

  xhr.addEventListener('readystatechange', () => {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        target.textContent = xhr.responseText;
        name.value = '';
        email.value = '';
      } else {
        console.warn('Request Failed.')
      }
    }
  });
  xhr.open('POST', 'register.php', true);

  // Content-Type に application/x-www-form-urlencoded を設定
  xhr.setRequestHeader(
    "Content-Type",
    "application/x-www-form-urlencoded"
  );

  // パラメータをリクエストボディに指定
  xhr.send(params);
});

.
├── sample.html // AJAX のコードを記述して取得した要素を表示するファイル
└── hello.html  // 取得する HTML  ファイル 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello</title>
</head>
<body>
  <div id="hello">
    <h3>Hello</h3>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
  </div>
</body>
</html>

<div id="target"></div>

// 取得した HTML を挿入する要素
const target = document.getElementById('target');

// XMLHttpRequest インスタンスを生成
const xhr = new XMLHttpRequest();

xhr.addEventListener('readystatechange', () => {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300) {
      // レスポンス（HTML Document）を取得
      const dom = xhr.response; // または const dom = xhr.responseXML
      console.log(dom);  // 確認用
      // レスポンスの Document オブジェクトから id が hello の要素を取得
      const helloDiv = dom.querySelector('#hello');
      // id が hello の要素を target に追加
      target.appendChild(helloDiv);
    } else {
      console.warn('Error');
    }
  }
});

// 初期化
xhr.open('GET', 'hello.html', true);

// responseType プロパティに文字列 document を設定
xhr.responseType = 'document';

// リクエストを送信
xhr.send();

.
├── sample.html // AJAX のコードを記述して取得した要素を表示するファイル
└── lorem.html //  取得する HTML  ファイル 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lorem ipsum</title>
</head>
<body>
  <div class="lorem">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="lorem">
    <p>Et illum ipsum eius est hic suscipit.</p>
  </div>
  <div class="lorem">
    <p>Reprehenderit tempore laborum quasi nisi tempora.</p>
  </div>
</body>
</html>

<div id="target"></div>

const target = document.getElementById('target');
const xhr = new XMLHttpRequest();
// responseType プロパティに文字列 document を設定
xhr.responseType = 'document';

xhr.addEventListener('readystatechange', () => {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300) {
      // レスポンス（HTML Document）を response プロパティで取得
      const dom = xhr.response;
      // .lorem の要素を全て取得（lorems は NodeList）
      const lorems = dom.querySelectorAll('.lorem');
      // タイトルを取得
      const titleText = dom.title;
      // h3 要素を生成して上記で取得したタイトルをテキストに設定
      const title = document.createElement('h3');
      title.textContent = titleText;
      // 表示する HTML を初期化
      let loremsHtml = '';
      // 全ての .lorem の要素が入った NodeList の各要素から HTML を取得
      lorems.forEach(elem => {
        loremsHtml += elem.innerHTML;
      });
      // HTML を表示
      target.innerHTML = loremsHtml;
      // タイトルの要素を追加
      target.prepend(title);
    } else {
      console.warn('Error');
    }
  }
});

xhr.open('GET', 'lorem.html', true);
xhr.send();

.
├── sample.html // AJAX のコードを記述して取得した要素を表示するファイル
└── register.php //  名前とメールアドレスを加工して HTML で返す PHP ファイル

<?php
$name = filter_input( INPUT_POST, 'name', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$email = filter_input( INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
if(!$email) {
  $email = 'Not valid email address.';
}
// HTML を出力
print '<p class="response">Hello '.$name .'!<br>Email: '.$email .'</p>';

<form name="fmx" action="register.php">
  <div>
    <label for="name">名前: </label>
    <input id="name" name="name" value="" size="20">
  </div>
  <div>
    <label for="email">Email: </label>
    <input id="email" name="email" value="" size="30">
  </div>
  <button id="send">送信</button>
</form>

<div id="target"></div>

// フォーム要素
const fmx = document.fmx;
// 取得した HTML を表示する要素
const target = document.getElementById('target');

fmx.addEventListener('submit', (e) => {
  e.preventDefault();
  // 表示する領域をクリア
  target.innerHTML = '';

  const xhr = new XMLHttpRequest();

  // responseType プロパティに "document" を設定
  xhr.responseType = 'document';

  xhr.addEventListener('readystatechange', () => {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        // レスポンスの Document オブジェクトから .response の要素を抽出
        const responseHTML = xhr.response.querySelector('.response');
        // 抽出した要素を挿入
        target.insertAdjacentElement('afterbegin', responseHTML);
        // フォームをリセット
        fmx.reset();
      } else {
        console.warn('Request Failed.')
      }
    }
  });

  xhr.open('POST', fmx.action, true);
  // FormData を利用
  xhr.send(new FormData(fmx));
});

{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

const target = document.getElementById('target');

const xhr = new XMLHttpRequest();

// responseType プロパティに 'json' を設定
xhr.responseType = 'json';

xhr.addEventListener('readystatechange', () => {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300) {
      // JSON として解析された受信データ（JSON オブジェクト）
      const json = xhr.response;
      // JSON オブジェクトを使って HTML に出力
      target.innerHTML = `<p>name: ${json.name}</p>
      <p>email: ${json.email}</p>`;
    } else {
      console.warn('Error');
    }
  }
});

xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1', true);
xhr.send();