Ajax请求github接口数据

一.实现步骤及原理：

用Ajax技术可以请求github接口数据，这里对用户信息的登录名、url和头像数据进行了请求，并将其放进了一个div中列表展示出来。

二.示例代码：

<button id="btn">请求github接口</button>
    <br>
    <h1>调用所有github的用户信息</h1>
    <div id="users"></div>

    <script>
        document.getElementById("btn").addEventListener("click",loadUsers);
        function loadUsers() {
            let xhr= new XMLHttpRequest();
            xhr.open("GET","https://api.github.com/users",true);
            xhr.onload = function () {
                let users = JSON.parse(this.responseText);
                let output ="";
                for (let i in users)
                output +=`
                    <div class="user">
                           <img src="${users[i].avatar_url}"  width="70px" height="70px" alt="">
                           <ul>
                                <li>LoginName:${users[i].login}</li>
                                <li>URL:${users[i].url}</li>
                            </ul>
                    </div>
                `;
                document.getElementById("users").innerHTML = output;
            };
            xhr.send();
        }
    </script>	

三.请求数据结果：