ajax实例——单纯获取信息例子

获取新闻标题和时间列表（后台PHP提供了标题和时间的字符串）

window.onload = function() {
    
    var oBtn = document.getElementById('btn'); //获取按钮
    
    
    oBtn.onclick = function() {  //点击按钮获取信息
        
        var xhr = null; //定义ajax变量
        try {
            xhr = new XMLHttpRequest();  //标准浏览器
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP'); //ie6
        }
        
        xhr.open('get','getNews.php',true);  //获取信息
        xhr.send();  //发送请求
        
        xhr.onreadystatechange = function() {  //readyState状态改变的时候执行
            
            if ( xhr.readyState == 4 ) {  //ajax完成的时候等于4
                if ( xhr.status == 200 ) {  //服务器状态码为200成功
                    var data = JSON.parse( xhr.responseText );  //把json数据转换成js对象
                    
                    var oUl = document.getElementById('ul1');  //创建ul
                    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>';  //ul的内容等于数组的名称和数组的时间
                    }
                    oUl.innerHTML = html;  //把内容赋值给html
                } else {
                    alert('出错了,Err：' + xhr.status);
                }
            }
            
        }
        
    }
}

<input type="button" value="按钮" id="btn" />
<ul id="ul1"></ul>