Ajax加載HTML、XML、JSON對比分析

    學習了HTML、XML、JSON發現它們有同有異，它們分别于Ajax互動時分别有什麼樣的表現呢？

    首先，無論伺服器傳回的是HTML、XML還是JSON，建立Ajax請求以及檢查檔案是否可用的過程是一樣的，唯一的不同是如何處理傳回的資料。

    當伺服器響應任何請求時，他會傳回一條狀态資訊來訓示是否完成了請求：

    Ajax加載HTML

    使用Ajax向頁面添加資料時，HTML是最簡單的資料類型，浏覽器會向渲染其他HTML一樣渲染它。頁面其餘部分的CSS規則同樣适用于新内容。

    DEMO

<span style="font-size:18px;"><strong>//xhr的變量中存儲了一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
//該對象的onload事件會在伺服器響應時觸發匿名函數
xhr.onload = function () {
    //檢查伺服器是否成功響應
    if (xhr.status === 200) {
        document.getElementById('content').innerHTML = xhr.responseText;
    }
};
/*
其open方法用來準備請求，它有三個參數
1、get或post來訓示如何發送請求
2、将要處理請求的頁面路徑
3、請求是否異步
*/
xhr.open('GET', 'data/data.html', true);
/*
聯系伺服器請求新的html，send方法需要一個參數，
如沒有資料需要發送，可以使用null
*/
xhr.send(null);</strong></span>
           

    Ajax加載XML

    請求XML資料和請求HTML非常相似，然而處理傳回的資料卻複雜很多，XML必須被轉換成HTML才能顯示在頁面上。

    DEMO

<span style="font-size:18px;"><strong>//xhr的變量中存儲了一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
//該對象的onload事件會在伺服器響應時觸發匿名函數
xhr.onload = function () {
    //檢查伺服器是否成功響應
    if (xhr.status === 200) {
        //将傳回的XML存儲到response變量中
        var response = xhr.responseXML;
        /*
        聲明events的新變量，來儲存XML中的所有
        <event>對象
        */
        var events = response.getElementsbyTagName('event');
        /*
        用for循環周遊所有的<event>元素，收集存儲在其子元素的資料
        并将它們添加到新的html元素中
        */
        for (var i = 0; i < events.length; i++) {
            var container, image, location, city, newline;
            container = document.createElement('div');
            container.className = 'event';

            image = document.createElement('img');
            image.setAttribute('src', getNodeValue(events[i], 'map'));
            image.appendChild(document.createTextNode(getNodeValue(events[i], 'map')));
            container.appendChild(image);

            location = document.createElement('p');
            city = document.createElement('b');
            newline = document.createElement('br');
            city.appendChild(document.createTextNode(getNodeValue(events[i], 'location')));

            location.appendChild(newline);
            location.insertBefore(city, newline);
            location.appendChild(document.createTextNode(getNodeValue(events[i], 'date')));
            container.appendChild(location);
            document.getElementById('content').appendChild(container);        }
    }
    /*
    擷取每個XML元素的内容，它有兩個參數：
    1、obj是一個XML的片段
    2、tag是想要進行資訊采集的标簽名稱
    */
        function getNodeValue(obj, tag) {
            return obj.getElementsbyTagName(tag)[0].firstChild.nodeValue;
    }
};
        
        xhr.open('GET', 'data/data.xml', true);
        xhr.send(null);
</strong></span>
           

    Ajax加載JSON

    請求JSON資料時會使用和請求HTML與XML資料時相同的文法，當伺服器響應時，JSON會被轉換成HTML

    DEMO

<span style="font-size:18px;"><strong>{
    "events":[
    { "location": "San Francisco, CA", "date": "May 1", "map": "img/map-ca.png"},
    {"location": "Austin, TX", "date": "May 15", "map": "img/map-tx.png"},
    {"location": "New York, NY", "date": "May 30", "map": "img/map-ny.png"}
    ]
}

var xhr = new XMLHttpRequest();
xhr.οnlοad=function() {
    if (xhr.status===200) {
        /*
        利用JSON對象的parse（）方法将字元串裝換為js對象，
        來自伺服器的JSON資料被存儲到變量中，它由XMLHttpRequest對象
        的responseText屬性轉換而來。
        */
        responseObject = Json.parse(xhr.responseText);
        //建立變量來存放HTML資料
        var newContent = '';
        /*
        利用循環将對象的内容整理成相應的HTML标記，然後添加到newContent變量中
        */
        for (var i = 0; i < responseObject.events.length; i++) {
            newContent += '<div class="event">';
            newContent += '<img src = "' +responseObject.events[i].map + '"';
            newContent += 'alt="' +responseObject.events[i].location+ '"/>';
            newContent += '<p><b>' + responseObject.events[i].location + '</b><br>';
            newContent += responseObject.events[i].date + '</p>';
            newContent += '</div>';
        }
        //使用innerHTML屬性來将新的HTML添加到頁面中
        document.getElementById('content').innerHTML = newContent;
    }
};
    xhr.open('GET','data/data,json',true);
    xhr.send(null);
</strong></span>
           

    通過執行個體，分别将Ajax加載HTML，XML，JSON的情況進行了對比，從中我們可以發現，Ajax加載他們的原理是相同的，隻是處理方法不同而已，就像各支流最後彙總到大海一樣，我們學習隻是也是一個這樣的過程，最後請大牛們多多指教，提出寶貴的意見。