$.ajaxの使い所はたくさんありますよね。
スクロールしたらもっと読み込むやつとかね。
ページ遷移せずに、サーバからデータを取得して再表示させることができるんでいろいろ重宝すると思います。
ってなわけで今回は$.ajaxを使わずに非同期通信ってのですか？
それをやったのでそれのメモです。
ちなみにWordPressでやってるやつです。

$.ajax({
　　type: 'POST',
　　url: ajaxurl,
　　data: {
　　　　'action': 'ajax_get_posts',
　　　　'id' : id,
　　},
　　success: function(response){
　　　　var jsonData = JSON.parse( response );
　　　　var result_html = "";
　　　　$.each( jsonData, function( i, val ){
　　　　　　result_html += val;
　　　　});

　　　　let element = document.querySelector('.b-posts .e-posts');
　　　　element.innerHTML = result_html;

　　}
});

＄.ajax使うとこういう感じになるのかなと思います。

const params = new URLSearchParams();
params.append('action', "ajax_get_posts");
params.append('id', id);

fetch(
  ajaxurl,
  {
    method: 'POST',
    body: params
  }
).then(response => response.json()
).then(data => {
  let result_html = "";
  data.forEach(data => {
    result_html += data;
  });
  let element = document.querySelector('.b-posts .e-posts');
  element.innerHTML = result_html;
}).catch(error => {
  console.error(error);
});

＄.ajaxを使わずにするとこんな感じですね。
XMLHttpRequestとか使ったりとかもあるんですが、
fetchつかうのが一番わかりやすかったのでこれで説明

const params = new URLSearchParams();
params.append('action', "ajax_get_posts");
params.append('id', id);

fetch(ajaxurl,{
    method: 'POST', // HTTPメソッドを指定
    body: params    // 送信データを指定
})
  .then(response => response.json())　// レスポンスデータをJSON形式にして返す
  .then(data => console.log(data))　　　　　// 取得したデータの処理
  .catch(error => console.error(error)); // エラー情報

ざっくり、説明を書きましたが fetch を使って非同期通信をしていきます。
ajaxurl は取得したいデータとかですかね。
僕はWordPressを使ってるので

add_action( 'wp_head', 'add_demo_ajaxurl', 1 );
function add_demo_ajaxurl() {
$adminurl = admin_url( 'admin-ajax.php');
echo <<<EOM
<script>
  var ajaxurl = '{$adminurl}';
</script>
EOM;
}

このおまじないを書きます。
WordPressで非同期通信する場合はこれの ajaxurl を取得してます。
methodはGETでもPOSTでもOKです。僕は好みですがPOSTでやってます。
bodyは送信データです。

const params = new URLSearchParams();
params.append('action', "ajax_get_posts");
params.append('id', id);

actionは呼び出す関数の名前を指定する感じになります

function ajax_get_posts(){
}
add_action('wp_ajax_ajax_get_posts', 'ajax_get_posts');
add_action('wp_ajax_nopriv_ajax_get_posts', 'ajax_get_posts');

関数名とアクションフックの名前に使われます。
あと、appendでデータをぶっこんでください。
これで関数ないで処理したデータを .then(data => console.log(data))　の部分で処理して、javascriptで表示させていきます。
あとは、javascriptとかで、トリガーつくっていろいろ楽しんでください。