AJAX 4 Ways Exercise

FEATURED

In this example below you will see how to do a AJAX 4 Ways Exercise with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by boldstar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright boldstar ©
  • HTML
  • CSS
  • JavaScript
    <!-- this is the axios cdn, found link in github repository -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<h1>Ron Swanson Quote Generator</h1>
<p>(4 ways of writing AJAX requests)</p>
<section class="container">
  <button id="xhr">XHR</button>
  <button id="fetch">Fetch</button>
  <button id="jquery">jQuery</button>
  <button id="axios">Axios</button>
</section>


<p id="quote">Quote Goes Here...</p>

/*Downloaded from https://www.codeseek.co/boldstar/ajax-4-ways-exercise-pKPoZX */
    @import url('https://fonts.googleapis.com/css?family=Roboto');

body {
  font-family: 'Roboto';
  color: #2c3e50;
  text-align: center;
}

#quote {
  font-size: 20px;
}

.container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}


button {
  margin-top: 20px;
  background: red;
  border: none;
  outline: none;
  height: 40px;
  text-align: center;
  width: 130px;
  border-radius: 40px;
  background: #fff;
  border: 2px solid #1abc9c;
  color: #1abc9c;
  letter-spacing: 1px;
  text-shadow: 0;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
      font-family: 'Roboto', sans-serif;


}

button:hover {
  color: white;
  background: #1abc9c;
}


/*Downloaded from https://www.codeseek.co/boldstar/ajax-4-ways-exercise-pKPoZX */
    var url = 'https://ron-swanson-quotes.herokuapp.com/v2/quotes';

//xhr version
var xhr = document.querySelector("#xhr");
var ronXhr = document.querySelector("#quote");
xhr.addEventListener("click", function(){
  var XHR = new XMLHttpRequest();
  
  XHR.onreadystatechange = function(){
    if(XHR.readyState == 4 && 200 ) {
      var quote = JSON.parse(XHR.responseText);
      ronXhr.innerText = quote;
    }
  }
  XHR.open("GET", url)
  XHR.send();
})

//fetch version
var fetchbtn = document.querySelector("#fetch");
var ronFetch = document.querySelector("#quote");
fetchbtn.addEventListener("click", function(){
  fetch(url)
    .then(function(req){
      req.json().then(function(data){
        ronFetch.innerText = data[0];
      })
  })
    .catch(function(){
    console.log("err");
  })
});

//jquery version
var jquery = document.querySelector("#jquery");
// var ronJquery = document.querySelector("#quote");
$('#jquery').click(function(){
  $.getJSON(url)
  .done(function(data){
    $('#quote').text(data[0]);
  });
})


//axios version
var axiosbtn = document.querySelector("#axios");
var ronAxios = document.querySelector("#quote");
axiosbtn.addEventListener("click", function(){
  axios.get(url)
  .then(function(res){
    ronAxios.innerText = res.data[0];
  })
  .catch(function(){
    alert("error");
  })
})

Comments