Random Dog Pictures AJAX（练习了传统XMLHttpRequest的写法并了解XML的work flow）

index.html

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

script.js

var btn = document.querySelector("#btn");
var img = document.querySelector("#photo");
//listen for click
btn.addEventListener("click", function(){
//make the request
  var XHR = new XMLHttpRequest();
  XHR.onreadystatechange = function(){
      if (XHR.readyState == 4 && XHR.status == 200){
        var url = JSON.parse(XHR.responseText).message;
        img.src = url;
            
            
      }
  
  }
  
 XHR.open("GET","https://dog.ceo/api/breeds/image/random");
  XHR.send();
});

starter-random-dog-pictures-ajax.markdown

STARTER: Random Dog Pictures AJAX

A Pen by liuxiaomingskm on CodePen.

License.

style.css

img {
  height: 200px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  margin: 20px;
}