枯燥的ajax json

请求json数据

单个json
接口

<button id="button1">请求单个用户</button>
        <button id="button2">请求所有用户</button>
        <br><br>
        <h1>单个用户</h1>
        <div id="user"></div>
        <h1>所有用户</h1>
        <div id="users"></div>
        <script>
            document.getElementById('button1').addEventListener('click',loadUser);
            function loadUser(){
                var xhr = new XMLHttpRequest();
                xhr.open("GET","https://mock.yonyoucloud.com/mock/17427/css.txt",true);
                xhr.onload = function(){
                   if(this.status==200){
                       var user = JSON.parse(this.responseText);
                       var output =' ';
                       // es6写法
                       output+=`
                       <ul>
                            <li>${user.id}</li>
                            <li>${user.name}</li>
                            <li>${user.email}</li>
                        </ul>
                       `;
                       //
                       document.getElementById('user').innerHTML = output;
                   }
                }
                xhr.send();
            }
        </script>

多个json
接口

 <button id="button1">请求单个用户</button>
        <button id="button2">请求所有用户</button>
        <br><br>
        <h1>单个用户</h1>
        <div id="user"></div>
        <h1>所有用户</h1>
        <div id="users"></div>
        <script>
            document.getElementById('button2').addEventListener('click',loadUsers);
        
            function loadUsers(){
                var xhr = new XMLHttpRequest();
                xhr.open("GET","https://mock.yonyoucloud.com/mock/17427/demo.json",true);
                xhr.onload = function(){
                   if(this.status==200){
                       var users = JSON.parse(this.responseText);
                       var output =' ';
                       //遍历数组
                       for(var i in users){
                        output+=`
                       <ul>
                            <li>${users[i].id}</li>
                            <li>${users[i].name}</li>
                            <li>${users[i].email}</li>
                        </ul>
                       `;
                       }
                       
                       //
                       document.getElementById('users').innerHTML = output;
                   }
                }
                xhr.send();
            }
        </script>