HTML文件：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="jquery.js"></script>-->
<script>
//$(function(){}) //阻塞 -> 同步
//非阻塞 - 异步
/*setTimeout(function() {
alert(1);
}, 2000);
alert(2);*/
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('get','getNews.php',true);
xhr.send();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
//alert( xhr.responseText );
var data = JSON.parse( xhr.responseText );
var oUl = document.getElementById('ul1');
var html = '';
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn" />
<ul id="ul1"></ul>
</body>
</html>
扫一扫手机访问
