Ajax加载HTML、XML、JSON对比分析

前端之家收集整理的这篇文章主要介绍了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加载他们的原理是相同的,只是处理方法不同而已,就像各支流最后汇总到大海一样,我们学习只是也是一个这样的过程,最后请大牛们多多指教,提出宝贵的意见。 原文链接:https://www.f2er.com/ajax/162074.html

猜你在找的Ajax相关文章