ajax using xhr

ajax-using-xhr.markdown

ajax using xhr

A Pen by Devyendu Shekhar Choudhary on CodePen.

License.

index.html

<div class="container">
  <h1>Welcome to dog pictures</h1>
  <image id="photo" src="https://\/\/dog.ceo\/api\/img\/deerhound-scottish\/n02092002_6780.jpg" alt="dog"></image>
  <button id="btn">get Random Dog!</button>
</div>

script.js

var btn = document.querySelector("#btn");
var photo = document.querySelector("#photo");

btn.addEventListener("click", function(){
  var xhr =new XMLHttpRequest() ;
  
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200 )
      {
        var url = JSON.parse(xhr.responseText).message;
        photo.src = url ;  
      }
  }
  xhr.open("GET","https://dog.ceo/api/breeds/image/random");
  xhr.send();
});

style.css

.container{
  display: flex ;
  flex-direction : column ;
  align-items : center ;
  justify-content : center ;
}
#photo{
  height : 200px ;
}