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.onload=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加载他们的原理是相同的，只是处理方法不同而已，就像各支流最后汇总到大海一样，我们学习只是也是一个这样的过程，最后请大牛们多多指教，提出宝贵的意见。