4 Ways AJAX(xhr / fetch / jquery / axios)

var url = 'https://ron-swanson-quotes.herokuapp.com/v2/quotes';

var quote = document.querySelector("#quote");

var xhrbtn = document.querySelector("#xhr");

var fetchbtn = document.querySelector("#fetch");

//XHR

xhrbtn.addEventListener("click", function(){

  var XHR = new XMLHttpRequest();

  XHR.onreadystatechange =  function (){

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

      var data = JSON.parse(XHR.responseText)[0]; 

      quote.innerText= data;

    }

  }

  XHR.open("GET", url);

  XHR.send();

})

//Fetch

fetchbtn.addEventListener("click", function(){

  fetch(url)

  .then (function(req){

    return req.json()

    })

  .then (function(data){

      quote.innerText = data[0];

  });

});

//jQuery

$("#jquery").click(function(){

  $.getJSON(url)

  .done(function(data){

    quote.innerText = data[0];           >     $("#quote").text(data[0]);

  });

});

//axios

$("#axios").click(function(){

  axios.get(url)

  .then(function(res){

    var data = res.data;

    quote.innerText = data;             >        quote.innerText = res.data[0];

   })

});