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