Javascriptで非同期通信(ajax)

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

XMLHttpRequestを使った非同期通信

<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",true);
    xhr.responseType="text";
    xhr.send();
  });
});
</script>

fetchを使った非同期通信(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");
    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>