JS Bin

function logResponse(data) {

  // data coming back from giphy API is 

  // JSON represented as a string, so we need to parse

  // using JSON.parse() to convert it to an object

  console.log('response complete ====>', JSON.parse(data.response))

}

​

​

function get(url, callback) {

  console.log('step 2: declare request.')

  const request = new XMLHttpRequest()

​

  console.log('Step 3: open request.')

  request.open('GET', url, true);

​

  console.log(

    'Step 4: set the request state change handler to call the callback when status = 200',

  )

​

  request.onreadystatechange = function() {

    if (request.readyState === 4 && request.status === 200) {

      callback(request);

    }

  }

​

  console.log('Step 5: send request.')

  request.send()

}

​

console.log('Step 1: invoke AJAX function.')

get(

  'https://api.giphy.com/v1/gifs/search?q=smooth&api_key=2qqBvRkz56JiTUcMbOJbak5VRRLEbV84',

  logResponse,

)

​

console.log('Step 6: End of JS file.')

​

​