Ajax请求github真实接口数据 

<body>
		<button>请求所以git信息</button>
		<h1>用户信息</h1>
		<div id="DI">
			
		</div>
		<script>
			document.getElementsByTagName('button')[0].addEventListener('click',function(){
				var XML = new XMLHttpRequest;
				XML.open('GET','https://api.github.com/users',true);
				XML.onload =function(e){
					//先进性转换
					e.preventDefault()//防止事件默认发生
					var users = JSON.parse(this.responseText)
					//转为了一个对象所以没有长度
					var newU = '';
					for (var i in users) {
						newU +=`
							<ul>
								<li>${users[i].id}</li>
								<li>${users[i].login}</li>
								<li>${users[i].url}</li>
								<li>${users[i].type}</li>
							</ul>
						`;
					}
					document.getElementById('DI').innerHTML =newU;
				}
				XML.send()
			});
		</script>
	</body>

https://api.github.com/users

这个网址有官方给定的api接口，测试数据总共有30条

//for in循环里的   ``  是es6中新增的目的为了方便html标签的拼接,位于tap键的上一个键，如果要引入数据需要加${}其他的和HTML一样

写的比较简单没有监听readystate和status的状态码

 

posted @ 2020-04-19 15:24  下冰雹的元气博客  阅读(172)  评论(0)    收藏  举报