Как реорганизовать API или сделать этот код проще?

Question

Я изучаю ajax json, я просто тестирую, как извлекать данные, поэтому идея при наведении курсора на число тянет данные и показывает содержимое для имени и электронной почты. Номер 1 - это имя, а номер 2 - адрес электронной почты.

API работает, но я не совсем уверен, как реорганизовать или упростить код.

Сейчас япросто дублирую код от одного к другому, я пытаюсь добавить функцию обратного вызова, но я чувствую, что я делаю это неправильно,

как реорганизовать или упростить мой код без дублирования кода?

const button = document.querySelector(".testName");
const buttonTest = document.querySelector(".testLastName");

const wrapper = document.querySelector(".wrapper");

const randomPerson = document.querySelector("random-person");



button.addEventListener("mouseover", function () {
    getData("https://randomuser.me/api/");
    console.log("first name");
})

buttonTest.addEventListener("mouseover", function () {
    getDataTest("https://randomuser.me/api/");
    console.log("last name");
})

function getData(url) {
    const request = new XMLHttpRequest();

    request.open("GET", url, true);
    //console.log(request);

    request.onload = function () {
        if (this.status === 200) {
            const data = JSON.parse(this.responseText);
            console.log(data);

            let display = "";

            data.results.forEach(function (person) {
                display += `
                    <div class="person">
                        <img class="random-image-js" src=${person.picture.large}></img>
                        <div class="person-category">
                            <p>Name: <br> ${person.name.first}</p>
                        </div>
                        
                        
                    </div>`
            });

   

            wrapper.innerHTML = display;

        }
        else {
            console.log(this.statusText);
        }
    }

    request.onerror = function () {
        console.log("There was a mistake");
    }

    request.send();
}

function getDataTest(url) {
    const request = new XMLHttpRequest();

    request.open("GET", url, true);
    //console.log(request);

    request.onload = function () {
        if (this.status === 200) {
            const data = JSON.parse(this.responseText);
            console.log(data);

            let display = "";

            data.results.forEach(function (person) {
                display += `
                    <div class="person">
                        <img class="random-image-js" src=${person.picture.large}></img>
                        <div class="person-category">
                            <p>Email: <br> ${person.email}</p>
                        </div>
                    </div>`
            });

            wrapper.innerHTML = display;

        }
        else {
            console.log(this.statusText);
        }
    }

    request.onerror = function () {
        console.log("There was a mistake");
    }

    request.send();
}

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.random-wrapper {
  border: 1px solid green;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.random-image-js {
  width: 150px;
  border-radius: 50%;
}

.random-button:focus {
  outline: none;
}

.wrapper {
  border: 1px solid green;
  width: 100%;
  margin-top: 50px;
}

.person {
  width: 1000px;
  border: 1px solid green;
  margin: auto;
  text-align: center;
}

.person-category {
  display: flex;
  justify-content: center;
}

.person-category p {
  display: flex;
  flex-direction: column;
  margin: 15px;
}

.test {
  display: flex;
}

.test p {
  padding: 20px;
  border: 1px solid green;
}

<div class="random-wrapper">
  <div class="wrapper"></div>

  <div class="test">
       <p class="testName">1</p>
       <p class="testLastName">2</p>
  </div>
</div>