Why is this GET request returning undefined and what is it's purpose?


update: I am changing this from the original question to make it more applicable. It is still a JS exercise.

// Include data for accessing Google APIs

const apiKey = 'I. AIzaSyB2sfWuybVQXFLw3x7YEq1HsIse6YR55Gw';
const url = 'https://www.googleapis.com/urlshortener/v1/url'
const projection = 'FULL';

// Some page elements

const $inputField = $('#input');
const $expandButton = $('#expand');
const $shortenButton = $('#shorten');
const $responseField = $('#responseField');

// AJAX functions

function expandUrl() { const urlToExpand = url + '?key=' + apiKey +
'&shortUrl=' + $inputField.val();
const xhr = new XMLHttpRequest;
xhr.onreadystatechange=function(){if (xhr.readyState === XMLHttpRequest.DONE) {
  $responseField.append('<p>Your expanded url is: </p><p>' + xhr.response.longUrl + '</p>');

AJAX GET Codeacademy lesson


Note: the API is my API and you may need to get your own. Here is the link.