programmable web

API Access with XMLHttpRequest

Search for: Click for a random GIF

function randomgif(){
  document.getElementById("loading").innerHTML = "Loading...";
  var request = new XMLHttpRequest();
  var search = document.getElementById("gifsearch").value;
  request.open('GET', 'https://api.giphy.com/v1/gifs/random?api_key=R4pV6yunHkOmlPGy9urmLteIrF6GbiS2&tag='+search+'&rating=g');
  request.onload = function() {
    var response = request.response;
    var parsedData = JSON.parse(response);
    var originalUrl = parsedData.data.images.original.url;
    document.getElementById("this_gif").setAttribute('src', originalUrl);
  }
  request.onerror = function(){
    document.getElementById("loading").innerHTML = "Something went wrong";
  }
  request.send(); // Actually send the request
  document.getElementById("this_gif").onload = function(){
    document.getElementById("loading").innerHTML = "Done!";
  }
}

Search for: <input type="text" id="gifsearch" name="gifsearch"> <button onclick="randomgif();">Click for a random GIF</button> <span id="loading"></span><br><br>
<img id="this_gif" height="200px" style="border-radius:10px;" src="/stock/icon_unknown.svg"/><br>