Ajax 异步的JavaScript and XML
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
// 1.创建一个ajax对象
// ie6以下 ActiveXObject('Microsoft.XMLHTTP')
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('get','getlist.php','true');
xhr.send();
/*
如果是post方法要给send传参数data,并且要设置请求头;
xhr.open('post','getlist.php','true');
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(data);
*/
//等待服务器返回的内容
/*
readyState: ajax工作状态 0初始化 1正在发送 2发送完成 3正在解析 4完成
responseText: ajax请求返回的内容就被存放在这个属性下面
onreadystatechange：当readyState状态值发生改变的时候触发
status：服务器状态 http状态码
*/
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
if (xhr.status == 200) {
//alert(xhr.responseText);
var data = JSON.parse(xhr.responseText); //将获取到的数据转换成对象
var list = document.getElementById('list');
var html = '';
for(var i = 0; i < data.length;i++){ //循环获得到的新闻数组
html +='<li><a href="">' + data[i].title + '</a> [<span>' + data[i].date + '</span>]</li>'
}
list.innerHTML = html;//innerHTML改变元素里的内容
}else{
alert("出错了，error:" + xhr.status);
};
};
}
}
}
补充
<!--
JSON对象的两种内置方法
stringify 可以把对象转换成对应字符串
parse 把字符串转换成对象
-->
//JSON.stringify()将对象转换成字符串
var arr = [1,2,3];
alert(JSON.stringify(arr));
var arr = {left:100};
alert(JSON.stringify(arr));
//JSON.parse() 将数组字符串转换成对象
var string = '[100,200,300]';
var date = JSON.parse(string);
alert(date[0]);
var string = '{"left":100}';//★JSON的键名必须用双引号★
var date = JSON.parse(string);
alert(date.left);
