PHPで取得したRSSをjsを介してhtmlに反映し、その部分だけ15秒ごとに更新する。

Question

前提・実現したいこと

現在、webページ上の一部分に外部ブログの記事タイトルと更新日を表示させています。
今回その部分だけを15秒ごとに更新することで、新着記事があればすぐに表示されるようにしたいです。
しかし、中々その方法が編み出せずにいます。

発生している問題・エラーメッセージ

一部分を15秒ごとに更新し、新着記事があれば表示されるようにする

該当のソースコード

<?php
date_default_timezone_set('Asia/Tokyo');
$baseUrl = 'url';//外部ブログのurl
$feedUrl = '/?feed=rss2';
$max = 10;
if ($rss = simplexml_load_file($baseUrl . $feedUrl)) {
    $cnt = 0;
    $output = '';

    if (!isset($rss->channel) || !isset($rss->channel->item)) {
        echo $output;
        return;
    }
    if (is_array($rss->channel->item) || count($rss->channel->item) === 0) {
        echo $output;
        return;
    }
    foreach($rss->channel->item as $item) {
        if ($cnt >= $max) {
            break;
        }

        $date = date('Y.m.d', strtotime($item->pubDate));
        $output .= '<li class="c_list_type02">';
        $output .= $date;
        $output .= '　';
        $output .= htmlspecialchars($item->title, ENT_QUOTES, 'UTF-8');
        $output .= '</a></li>';
        $cnt++;
    }

    echo $output;
}

window.addEventListener('DOMContentLoaded', function() {
  var req = new XMLHttpRequest();
  req.onreadystatechange = function() {
      if( req.readyState == 4 && req.status == 200 ) {
          document.getElementById( 'l_rss' ).innerHTML = req.responseText;
      }
  }
  req.open( "GET", "common/php/output_rss.php" );//前述のphpです
  req.send();
})

<div id="l_rss"></div> 

試したこと

Ajaxを使用すればいいのかなと思い調べたコードを組み込もうと試みましたが、良い書き方が分かりませんでした。

Answer 1

自己解決しました

var req = new XMLHttpRequest();
  rss_loading();
  setInterval(() => {
    rss_loading();
  }, 15000);

  function rss_loading() {
    req.onreadystatechange = function () {
      if (req.readyState == 4 && req.status == 200 && document.getElementById('l_rss')) {
        document.getElementById('l_rss').innerHTML = req.responseText;
      }
    }
    req.open("GET", rssRead_common);
    req.send();
  }
})