这里只粘贴了代码部分,如若不懂可以先看我的上一篇介绍ajax的文章
<body>
<button id="button">获取GitHub api接口的数据</button>
<div id="gituser"></div>
<script>
document.getElementById("button").addEventListener("click",git);
function git(){
var gitshu=new XMLHttpRequest();
gitshu.open("GET","https://api.github.com/users",true);
gitshu.onreadystatechange=function(){
if(gitshu.status==200 && gitshu.readyState==4){
var users=JSON.parse(this.responseText);//获取git的网络api接口的json格式的数据
//console.log(users);
var output="";
for(var i in users){
output+=`
<div class="user">
<img src="${users[i].avatar_url} width="50" height="50"/>
<ul>
<li>id:${users[i].id}</li>
<li>login:${users[i].login}</li>
</ul>
</div>
`;
}
document.getElementById("gituser").innerHTML=output;
}
}
gitshu.send();
}
</script>
</body>