コピペで使えるXMLHttpRequestやfetchで非同期通信（ajax）

非同期通信を行うとURLを変更することなく他のURLを呼び出して通信し、結果を表示することが出来ます。

XMLHttpRequestを使った非同期通信GET

<input type="button" id="btn_XMLHttpRequest" value="XMLHttpRequestを使った非同期通信">
<div id="info"></div>
<script>
window.addEventListener("load",function(){
  //XMLHttpRequestを使った非同期通信
  document.getElementById("btn_XMLHttpRequest").addEventListener("click", async function () {
    let xhr=new XMLHttpRequest();
    xhr.onload=function(e){
      //readyState:4(通信完了) status:200(リクエスト成功)
      if(xhr.readyState==4 && xhr.status==200){
        // レスポンスで返ってきたデータをjson形式で取り出す
        let json = JSON.parse(xhr.response);
        document.getElementById("info").innerHTML=
          "XMLHttpRequest使用："+xhr.response+"<br>json[\"a\"]="+json["a"];
      }
    }
    xhr.open("GET","./js_ajax.php?a=GET(XMLHttpRequest)",true);
    xhr.responseType="text";
    xhr.send();
  });
});
</script>

fetchを使った非同期通信GET(IE不可)

<input type="button" id="btn_fetch" value="fetchを使った非同期通信(IE不可)">
<div id="info_fetch"></div>
<script>
window.addEventListener("load",function(){
  //fetchを使った非同期通信(IE不可)
  document.getElementById("btn_fetch").addEventListener("click", async function () {
    // URLを格納します。fetchを使うと外部との連携ができるようにになります。
    const res = await fetch("./js_ajax.php?a=GET(fetch)");
    if(res.status==200){
      console.log(res);
      // レスポンスで返ってきたデータをtext形式で取り出す場合
      //let text= await res.text();
      //document.getElementById("info_fetch").innerHTML=text;

      // レスポンスで返ってきたデータをjson形式で取り出す
      let json = await res.json();
      document.getElementById("info_fetch").innerHTML=
        "fetch使用："+JSON.stringify(json)+"<br>json[\"a\"]="+json["a"];
    }
  });
});
</script>

fetchを使った非同期通信POST(IE不可)

<input type="button" id="btn_fetch_post" value="fetchを使った非同期通信(IE不可)">
<div id="info_fetch_post"></div>
<script>
window.addEventListener("load",function(){
  //fetchを使ったPost非同期通信(IE不可)
  document.getElementById("btn_fetch_post").addEventListener("click", async function () {
    // URLを格納します。fetchを使うと外部との連携ができるようにになります。
    var data="a=Post(fetch)";
    const res = await fetch(
      "./js_ajax.php",
      {
        method: 'POST',
        mode: 'cors',
        cache: 'no-cache',
        credentials: 'same-origin',
        headers: {
           'Content-Type': 'application/x-www-form-urlencoded',
        },
        redirect: 'follow',
        referrerPolicy: 'no-referrer',
        body: data
      }
    );
    if(res.status==200){
      // レスポンスで返ってきたデータをtext形式で取り出す場合
      //let text= await res.text();
      //document.getElementById("info_fetch_post").innerHTML=text;

      // レスポンスで返ってきたデータをjson形式で取り出す
      let json=await res.json()
      document.getElementById("info_fetch_post").innerHTML=
        "fetch使用(POST)："+JSON.stringify(json)+"
json[\"a\"]="+json["a"];
    }
  });
});
</script>