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

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格式的数据还将继续学习。

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值