window.onload = function() {
var oBtn = document.getElementById('btn'); 
oBtn.onclick = function() {
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} 
xhr.open('get','getNews.php',true);
xhr.send();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) { //红色标识为成功后执行的任务
var data = JSON.parse( xhr.responseText ); // 将后台获取的内容转为json类型 每一个json里面有两个键：title和date
var oUl = document.getElementById('ul1'); // 获取显示新闻列表的节点
var html = '';
for (var i=0; i<data.length; i++) { // 循环所有的json数据，并把每一条添加到列表中
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html; //把内容放在页面里
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
}
</script> 

function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' && data) {
url += '"htmlcode">

ajax('get','getNews.php','',function(data) {
var data = JSON.parse( data ); 
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;
}); 


其实这个封装，还不是那么好，比如上面的data没有数据，我们还是得占位，像jquery里面用json格式传参，就方便一些，目前还未总结好，后期补充。