json其實是JavaScript對象表示法，數據可以使用json來表示。它看起來非常像對象字面量語法，但它並不是對象。

　　當json在服務和web瀏覽器之間傳輸的時候是以字符串形式來傳送的，在將json對象轉換成json字符串發送給服務器叫做序列化，在接受服務器發送過來的json字符串並且將其轉換成json對象叫做反序列化。

　　在JavaScript中有兩種轉換成json的方法：

　　第一　eval()方法

var json = ‘[ { "name" : "衛莊", "age" : 20},{ "name" : "蓋聶", "age" : 20},{ "name" : "譚慧東", "age" : 23}]‘;　
 
var box = eval(json);

　　第二 JSON內建對象，但IE並不兼容，不過有大佬寫了json2.js可以兼容IE，https://github.com/douglascrockford/JSON-js

　　序列化方法： stringify()

var json = [ { name : "衛莊", age : 20},{ name : "蓋聶", age : 20},{ name : "譚慧東", age : 23}];    //模擬json對象
var box = JSON.stringify(json);     //stringify 將JavaScript原生值轉換為json格式值
 

　　反序列化方法：parse()

var json = ‘[ { "name" : "衛莊", "age" : 20},{ "name" : "蓋聶", "age" : 20},{ "name" : "譚慧東", "age" : 23}]‘;  //模擬獲取json格式
var box = JSON.parse(json);      //parse 將json轉換為JavaScript原生值。

　　下面是ajax加載json

// json文件text.json
{
    "events"  : [
        {
            "location" : "San Francisco, CA",
            
 
"date" : "May 1",
            "map" : "img/001.jpg"
        },
        {
            "location" : "Austin, TX",
            "date" : "May 15",
            "map" : "img/002.jpg"
        },
        {
            "location" : "New York, NY",
            "date" : "May 30",
            "map" : "img/003.jpg"
        }
    ]
}

//js代碼
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);　　//獲取ajax對象
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200){　　//響應成功後
            var responseObject = JSON.parse(xhr.responseText);　　//獲取的json字符串轉換成json對象
            var content = ‘<div class="header">‘;　　//將對象結合標簽對 轉換HTML格式
            for (var i = 0; i < responseObject.events.length; i++){
                content += ‘<div class="date">‘;
                content += ‘<div class="image">‘;
                content += ‘<img src="‘ + responseObject.events[i].map + ‘" class="image‘ + (i+1) + ‘">‘;
                content += ‘</div>‘;
                content += ‘<p>‘ + responseObject.events[i].location + ‘</p>‘;
                content += ‘<span>‘ + responseObject.events[i].date + ‘</span>‘;
                content += ‘</div>‘;
            }
            content += ‘<div>‘;
            document.getElementById(‘container‘).innerHTML = content;　　//使用innerHTML的賦值方式，將其添加到頁面中。
        }
    }

    xhr.open(‘get‘,‘json/text.json‘,true);　　　　//準備請求
    xhr.send(null);　　//發送請求

Ajax加載json與序列化