Как обновить DOM, когда у нас есть новые данные в БД через ajax

Я получаю электронные письма через Gmail API и сохраняю некоторые детали, такие как: фрагмент сообщения, дата, отправитель и т. д., И показываю список на странице с использованием этих данных. Я успешно получаю данные из API и сохраняю их в БД. Но данные появляются на странице только после завершения запроса и перезагрузки страницы. Я хочу сделать так, чтобы при вводе электронных писем в БД они появлялись на странице. Независимо от того, завершен запрос или нет, DOM должна обновляться по мере поступления данных в БД. Мой вызов Ajax выглядит примерно так.

$.ajax({
    method: 'post',
    url:'refreshMailBox.php',
    data:{userId:'<?php echo $email;?>'},
    beforeSend: function () {
        $("#refreshMsg").html("<img src='images/ajax-loader.gif' alt='...'>&nbsp;<b>Loading...</b>");
    },
    success: function (response) {
        res_obj = JSON.parse(response);
        $("#refreshMsg").html("");
        totalEmails = res_obj.totalEmails;
            var url = window.location.href;
            window.history.pushState("", "", url);
            location.href = url;
        },
        error: function (err) {
            console.info(err);
        },
});

Пожалуйста, дайте мне представление о том, как я могу обновлять DOM по мере поступления данных в БД. не имеет значения, завершен вызов ajax или нет. Мы должны видеть в данных БД, чтобы проверить, пришли ли новые электронные письма, а затем добавить их в листинг div. Спасибо