XML与JSON比较，并用AJAX传输XML/JSON数据

最新推荐文章于 2024-01-24 11:21:33 发布

diligentkong

最新推荐文章于 2024-01-24 11:21:33 发布

阅读量1.5k

点赞数

分类专栏： Ajax 文章标签： ajax json xml

本文链接：https://blog.csdn.net/diligentkong/article/details/72845872

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

为实现数据与逻辑代码的分离，可以把数据单独存放，一般用xml 和json格式来存储数据。

XML介绍

XML 指可扩展标记语言（EXtensible Markup Language），很类似 HTML。XML 的设计宗旨是传输数据，而非显示数据。

来个xml示例：

<?xml version ="1.0" encoding ="UTF-8"?>
<singer>
    <name>张信哲</name>
    <skill>唱歌</skill>
    <nick>情歌王子</nick>
</singer>

XML是纯文本，这点跟HTML很像，可以用任何的文本编辑软件去编辑它。
（这里为什么多次提到xml和HTML很像，后面会演示给大家看。）

XML语法：

虽然xml看起来跟HTML类似，但是xml语法有些还是需要注意的：

XML声明 第一行是XML的声明,指定XML版本(1.0)以及使用的编码(UTF-8)

<?xml version="1.0" encoding="UTF-8"?>

自定义标签 XML中没有默认的标签,所有的标签都是我们定义者自定义的。标签的名字是可以随意编写的，但是不要使用数字开头，不要使用中文。
双标签 XML中没有单标签,都是双标签
根节点 XML中必须有一个根节点,所有的子节点都放置在根节点下
XML属性跟HTML一样,XML的标签里面也能够添加属性type = ‘text’,但是不建议这样用,而是使用标签的方式来表述内容。
XML解析因为XML就是标签,所以直接用解析Dom元素的方法解析即可。
PHP中设置Header 如果使用php读取xml文件的时候，要修改header()中的内容，告诉浏览器返回的是xml文件。

header('content-type:text/xml;charset=utf-8');

现在用我演示的一个例子解释一下xml与html的类似关系，如图片：
这里写图片描述

AJAX获取XML数据

xmldata.xml

<?xml version = "1.0" encoding="UTF-8"?>
<hayao>
    <movie>
        <name>千与千寻</name>
        <img>images/qianyuqianxun.jpg</img>
        <introduce>不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比站在原地更接近幸福。</introduce>
    </movie>
    <movie>
        <name>龙猫</name>
        <img>images/longmao.jpg</img>
        <introduce>生活坏到一定程度就会好起来，因为它无法更坏。努力过后，才知道许多事情，坚持坚持，就过来了。</introduce>
    </movie>
    <movie>
        <name>侧耳倾听</name>
        <img>images/ceerqingting.jpg</img>
        <introduce>因为你，我想要变成一个更好的人，不想成为你的负担，因此发奋，只是想证明我足以与你相配。</introduce>
    </movie>
    <movie>
        <name>魔女宅急便</name>
        <img>images/monvzhaijibian.jpg</img>
        <introduce>只有一个人在旅行时，才听得到自己的声音，它会告诉你，这世界比想象中的宽阔。</introduce>
    </movie>
    <movie>
        <name>悬崖上的金鱼姬</name>
        <img>images/jinyuji.jpg</img>
        <introduce>成长，是每个孩子的权力，也是他们必经的征程，或平坦、或崎岖，有悲欢，有离合</introduce>
    </movie>
    <movie>
        <name>天空之城</name>
        <img>images/tiankongzhicheng.jpg</img>
        <introduce>有时候，坚持了你最不想干的事情之后，便可得到你最想要的东西。
</introduce>
    </movie>
    <movie>
        <name>哈尔移动城堡</name>
        <img>images/haerchengbao.jpg</img>
        <introduce>世界这么大，人生这么长，总会有这么一个人，让你想要温柔的对待。</introduce>
    </movie>
</hayao>

xmldata.html

<script type="text/javascript">
    document.querySelector('#getMovies').onclick=function(){
        var ajax = new XMLHttpRequest();
        ajax.open('post','xmldata.php');
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        ajax.send();
        ajax.onreadystatechange=function(){
            if (ajax.readyState==4&&ajax.status==200) {
                console.log(ajax.responseXML);
                // ajax.responseXML是一个document对象
                var movies = ajax.responseXML.querySelectorAll('movie');
                console.log(movies);
                // table拼出来
                var str ='';
                //table
                str +='<table>';
                // 循环遍历每一个
                for(var i =0;i<movies.length;i++){
                    var currMovie = movies[i];
                    str +='<tr>';
                    str+='<td>'+currMovie.querySelector('name').innerHTML+'</td>';
                    str+='<td><img src="'+currMovie.querySelector('img').innerHTML+'"></td>';
                    str+='<td>'+currMovie.querySelector('introduce').innerHTML+'</td>';
                    str+='<td> <a href="#">更多>>'+currMovie.querySelector('name').innerHTML+'</a></td>';
                    str +='</tr>';
                }

                str+='</table>';
                console.log(str);
                document.body.innerHTML=str;

            };
        }
    }
</script>

xmldata.php

<?php
    header('content-type:text/xml;charset=utf-8');
    // 读取xml文件
    echo file_get_contents('datas/xmldata.xml');
?>

界面展示：
这里写图片描述

JSON与XML的区别

JSON: JavaScript Object Notation(JavaScript 对象表示法)，JSON 是存储和交换文本信息的语法，类似 XML。JSON 比 XML 更小、更快，更易解析。

与 XML 相同之处

• JSON 是纯文本
• JSON 具有”自我描述性”（人类可读）
• JSON 具有层级结构（值中存在值）
• JSON 可通过 JavaScript 进行解析
• JSON 数据可使用 AJAX 进行传输

与 XML 不同之处
• 没有结束标签
• 更短
• 读写的速度更快
• 能够使用内建的 JavaScript eval() 方法进行解析
• 使用数组
• 不使用保留字

为什么使用 JSON？
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
使用 XML
• 读取 XML 文档
• 使用 XML DOM 来循环遍历文档
• 读取值并存储在变量中
使用 JSON
• 读取 JSON 字符串
• 用 eval() 处理 JSON 字符串

JSON介绍

JSON 语法是 JavaScript 对象表示法语法的子集。
JSON使用键值对的书写格式
属性名必须使用双引号包裹
属性名与属性值之间使用冒号
属性值也必须使用双引号包裹，数字*/可以不包裹
Json的值可以是数字、字符串、逻辑值(true/false)、数组（在中括号中）对象（在大括号中） null
举个json例子：

{
        "name":"网站",
        "num":3,
        "sites":[ "Google", "Runoob", "Taobao" ]
    }

JSON 文件
• JSON 文件的文件类型是 “.json”
• JSON 文本的 MIME 类型是 “application/json”

JSON通常与服务端交换数据，在接收服务器数据时一般是字符串，可以利用JSON.parse()方法将数据转换为JavaScript对象。

看输出内容:
这里写图片描述

AJAX获取JSON数据

jsondata.json

[
    {
        "name":"张信哲",
        "song":"白月光",
        "character":"情歌王子"

    },
    {
        "name":"王菲",
        "song":"传奇",
        "character":"神奇的嗓子"

    },
    {
       "name":"那英",
       "song":"默",
       "character":"那姐"
    }

]

jsondata.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
    </style>

</head>
<body>
    <input type="button" value="获取歌手" id="getSinger">
</body>
</html>
<script type="text/javascript">
    document.querySelector("#getSinger").onclick=function(){
        // ajax 的5个步骤
        var ajax = new XMLHttpRequest();
        ajax.open('get','jsondata.php');
        ajax.send();
        ajax.onreadystatechange=function(){
            if (ajax.readyState==4&&ajax.status==200) {
                // json接收服务器数据时一般是字符串，因此用responseText获取
                console.log(ajax.responseText);
                // 将json字符串转换为js对象
                var jsObjArr = JSON.parse(ajax.responseText);
                // 拼接ul
                var str ='';
                for(var i =0;i<jsObjArr.length;i++){
                    var curSinger = jsObjArr[i];
                    str +='<ul>';
                    str +='<li>'+curSinger.name+'</li>';
                    str +='<li>'+curSinger.song+'</li>';
                    str +='<li>'+curSinger.character+'</li>';
                    str+='</ul>';
                }

                //设置到页面上
                document.body.innerHTML =str;
            }
        }
    }
</script>

jsondata.php

<?php
    header('content-type:text/html;charset=utf-8');
    echo file_get_contents('../datas/jsondata.json');
?>

点击按钮后，输出结果为：
这里写图片描述

有关json与xml的区别，先介绍到这里。有关ajax获取json、xml格式的数据还将继续学习。

diligentkong

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
XML与JSON比较，并用AJAX传输XML/JSON数据

为实现数据与逻辑代码的分离，可以把数据单独存放，一般用xml 和json格式来存储数据。XML介绍 XML 指可扩展标记语言（EXtensible Markup Language），很类似 HTML。XML 的设计宗旨是传输数据，而非显示数据。来个xml示例：<?xml version ="1.0" encoding ="UTF-8"?><singer> <name>张信哲<
复制链接

扫一扫