Simple ajax call.

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>


<body>
  <h1>Hello <span id="firstname"></span> <span id="lastname"></span>!</h1>
  <button onclick="reload_user();">Reload!</button>
  <p id="loadingtext">LOADING....</p>
</body>

</html>

$(document).ready(function() {
  reload_user();
});

function reload_user(){
    $("#loadingtext").show();
    $.ajax({
    method: "get",
    url: "https://randomuser.me/api",
    datatype: "json",
    data: { results: 1 },
    success: function(r) {
      $("#firstname").text(r.results[0].name.first);
      $("#lastname").text(r.results[0].name.last);
    },
    error: function() {
      alert("error");
    },
    complete: function(){
      $("#loadingtext").fadeOut();
    }
  });  
}

/* Styles go here */

#firstname, #lastname{
  text-transform: capitalize;
  color: #555;
}