原生Ajax

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);