Blogger Information
Blog 250
fans 3
comment 0
visits 321546
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS--Ajax等待特效
梁凯达的博客
Original
998 people have browsed it

实例

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style type="text/css">
		#box{
			width: 300px;
			height: 300px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div id="box">
		娱乐新闻(过时新闻)
		 狗哥前日和旺儒在小树林两个小时未出来一起嗨皮 被我报偷拍
	</div>
	<button onclick="update()">刷新</button>
</body>
<script type="text/javascript">
	var box = document.getElementById('box');
	function update(){
		//显示一个等待图片给用于用于操作
		box.innerHTML = '<img src="./3.gif" width="100%" height="100%">';
		//通过ajax请求得到新的新闻
		var ajax = new XMLHttpRequest();
		ajax.open('get','./news.php',true);
		ajax.send();
		ajax.onreadystatechange = function(){
			if(ajax.readyState ==4 && ajax.status == 200){
				var result = ajax.responseText;
				box.innerHTML = result;
			}
		}
	}
</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post