zhensolid
/
Python-100-Days


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="ok">换一组</button>
		<div id="container"></div>
		<!-- HTML: Hyper-Text Markup Language -->
		<!-- XML: eXtensible Markup Language -->
		<!-- XML最为重要的用途是在两个异构的系统之间交换数据 -->
		<!-- 现在这项功能基本上被JSON和YAML格式替代了 -->
		<!-- Ajax: Asynchronous JavaScript and XML -->
		<!-- 通过JavaScript代码向服务器发起异步请求并获得数据 -->
		<!-- 异步请求：在不中断用户体验的前提下向服务器发出请求 -->
		<!-- 获得数据后可以通过DOM操作对页面进行局部刷新加载服务器返回的数据 -->
		<script>
			(function() {
				var page = 0;

				var div = document.getElementById('container');
				var button = document.getElementById('ok');
				button.addEventListener('click', function() {
					// 1. 创建异步请求对象
					var xhr = new XMLHttpRequest();
					if (xhr) {
						page += 1
						var url = 'http://api.tianapi.com/meinv/?key=772a81a51ae5c780251b1f98ea431b84&num=10&page=' + page;
						// 2. 配置异步请求
						xhr.open('get', url, true);
						// 3. 绑定事件回调函数（服务器成功响应后要干什么）
						xhr.onreadystatechange = function() {
							if (xhr.readyState == 4 && xhr.status == 200) {
								div.innerHTML = '';
								// 5. 解析服务器返回的JSON格式的数据
								var jsonObj = JSON.parse(xhr.responseText);
								var array = jsonObj.newslist;
								// 6. 通过DOM操作实现页面的局部刷新
								for (var i = 0; i < array.length; i += 1) {
									var img = document.createElement('img');
									img.src = array[i].picUrl;
									img.width = '250';
									div.appendChild(img);
								}
							}
						};
						// 4. 发出请求
						xhr.send();
					} else {
						alert('使用垃圾浏览器还想看美女，做梦！');
					}
				});
			})();
		</script>
	</body>
</html>