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>