趣旨

　タイトルの通りですが、最低限の説明しかいれてません。とりあえずこう書いておけばできるというメモ的なものですので、例えば onreadystatechange イベントの説明などは記載していません。

　phpからデータを取得する事を前提として、XML、JSON それぞれの形式で脱jQueryのAjaxを実現する最低限の記述を掲載しています。
　なんらかのきっかけでこのページにたどり着いた方は、とりあえず以下の3ファイルを作成して試してください。

　書いておいたほうが良いエラーフローなど、見落としているところはあると思いますので、判明次第補足していこうと考えています。

コード

index.html

<html jang="jp">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="./ajax.js"></script>
</head>
<body>
  <div><span id="no_0">A</span> : <span id="name_0">なまえ1</span>／<span id="word_0">囲碁</span></div>
  <div><span id="no_1">B</span> : <span id="name_1">名前２</span>／<span id="word_1">将棋</span></div>
  <form>
    <button type="button" onClick="getXML();">XMLで取得</button>
    <button type="button" onClick="getJSON();">JSONで取得</button>
  </form>
</body>
</html>

ajax.php

<?php

if (isset($_POST['format']))
{
  if ($_POST['format'] == 'XML')
  {
    returnXML();
  }
  elseif ($_POST['format'] == 'JSON')
  {
    returnJSON();
  }
}

if (isset($_GET['format']))
{
  if ($_GET['format'] == 'XML')
  {
    returnXML();
  }
  elseif ($_GET['format'] == 'JSON')
  {
    returnJSON();
  }
}


function returnXML()
{
  // とりあえずベタ打ちで XML作成
  $sXML  = '<?xml version="1.0" encoding="UTF-8"?>';
  $sXML .= '<datas>';
  $sXML .= '  <data>';
  $sXML .= '    <no>3</no>';
  $sXML .= '    <name>長嶋茂雄</name>';
  $sXML .= '    <word>野球</word>';
  $sXML .= '  </data>';
  $sXML .= '  <data>';
  $sXML .= '    <no>10</no>';
  $sXML .= '    <name>ペレ</name>';
  $sXML .= '    <word>サッカー</word>';
  $sXML .= '  </data>';
  $sXML .= '</datas>';
  // xmlであることを示す HTTPヘッダ
  header('Content-Type: text/xml; charset="UTF-8"', true);
  echo $sXML;
}

function returnJSON()
{
  // とりあえずベタ打ちで JSONデータ（の元となる連想配列）を作成
  $aJSON[0]=array('no'=>'1' , 'name'=>'NHK総合' , 'word'=>'NHK G');
  $aJSON[1]=array('no'=>'2' , 'name'=>'NHK教育' , 'word'=>'Eテレ');
  // jsonであることを示す HTTPヘッダ
  header('Content-type: application/json; charset="UTF-8"');
  echo json_encode($aJSON);
}

?>

ajax.js

// XMLでの取得
function getXML() {

  let xmlhttp = new XMLHttpRequest();

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4) {
      if (xmlhttp.status == 200) {
        //通信成功時の処理
        let datas = xmlhttp.responseXML.documentElement;
        let dataNo   = datas.getElementsByTagName("no");
        let dataName = datas.getElementsByTagName("name");
        let dataWord = datas.getElementsByTagName("word");

        let count = dataNo.length;
        for (i = 0 ; i < count ; i++){
          let no   = document.getElementById("no_"+i);
          let name = document.getElementById("name_"+i);
          let word = document.getElementById("word_"+i);

          no.innerHTML   = dataNo[i].innerHTML;
          name.innerHTML = dataName[i].innerHTML;
          word.innerHTML = dataWord[i].innerHTML;
        }
      } else {
        alert("ステータス :" + jsonhttp.status); //通信失敗時の処理
      }
    }
  }

  xmlhttp.onload = function() {
    // console.log("XML Get"); //通信完了時の処理
  }

  xmlhttp.open("POST", "./ajax.php", true);
  xmlhttp.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=UTF-8');
  xmlhttp.send("format=XML");

}

// JSONでの取得
function getJSON() {
  let jsonhttp = new XMLHttpRequest();

  jsonhttp.onreadystatechange = function() {
    if (jsonhttp.readyState === 4) {
      if (jsonhttp.status == 200) {
        //通信成功時の処理
        let datas = JSON.parse(jsonhttp.responseText);

        let count = datas.length;
        for (i = 0 ; i < count ; i++){
          let no   = document.getElementById("no_"+i);
          let name = document.getElementById("name_"+i);
          let word = document.getElementById("word_"+i);

          no.innerHTML   = datas[i].no;
          name.innerHTML = datas[i].name;
          word.innerHTML = datas[i].word;
        }
      } else {
          alert("ステータス :" + jsonhttp.status); //通信失敗時の処理
      }
    }
  }

  jsonhttp.onload = function() {
    // console.log("JSON Get"); //通信完了時の処理
  }

  jsonhttp.open("POST", "./ajax.php", true);
  jsonhttp.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=UTF-8');
  jsonhttp.send("format=JSON");

}

　上記コードでは POST での説明ですが、GETの場合は以下のようになり、setRequestHeader の記述は不要になります。

  jsonhttp.open("GET", "ajax.php?format=JSON", true);
  jsonhttp.send(null);

　また、以下は不要です。（ここでハマりました）

  // ↓↓↓ 不要です。↓↓↓
  XMLHttpRequest.responseType = 'json';
  // サンプルコードに合わせれば
  // jsonhttp.responseType = 'json'; と書くことになりますが、不要です。

　各メソッド等の説明については下記参考に譲ります。

参考

JavascriptのAjaxについての基本まとめ
https://qiita.com/katsunory/items/9bf9ee49ee5c08bf2b3d

まとめた動機

　Ajax JSON と検索しても、ほとんどがjQueryを使う前提の説明ページというのが現状です。Ajaxは関係なく、JSONだけを扱う場合の説明などであれば jQuery を使わない説明も見つかるのですが、脱jQuery として、ひとまとめの資料が欲しかったのです。

　もっとも、うちの会社ではXMLをまだ多く使ってるだけでなく、そもそもjQuery自体、まったく脱する気がなさげなので、実際ボクにとって、このまとめも必要になるかどうか……
jQueryは捨てなくて良いかもですが、せめて JSON にはしていきましょうよ、ご同僚。