Как прервать несколько запросов ajax

При нажатии кнопки «Показать данные» мой вызов AJAX запускается снова, и снова одни и те же данные добавляются в таблицу. Во-первых, я хочу прекратить это, а во-вторых, есть ли способ обновить базу данных только новыми данными, если в базу данных добавлены какие-то новые данные?

var showdata = document.getElementById("showdata");
var btn = document.getElementById("getdata");
btn.addEventListener("click", function() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "<?php echo base_url() ?>Appconfig/get_masteradmin_data", false);
  xhttp.onload = function() {
    var ourData = JSON.parse(xhttp.responseText);
    renderHTML(ourData);
  };
  xhttp.send();
});

function renderHTML(data) {
  var html = '';
  var i;
  for (i = 0; i < data.length; i++) {
    html += '<tr>' +
      '<td>' + data[i].full_name + '</td>' +
      '<td>' + data[i].username + '</td>' +
      '<td>' + data[i].designation + '</td>' +
      '<td>' + data[i].department + '</td>' +
      '<td>' + data[i].official_mobile_no + '</td>' +
      '<td>' + data[i].official_email_id + '</td>' +
      '<td>' + data[i].select_user_type + '</td>' +
      '<td>' + data[i].permission + '</td>' +
      '</tr>';
  }
  showdata.insertAdjacentHTML('beforeend', html);
}