為實現資料與邏輯程式碼的分離，可以把資料單獨存放，一般用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格式的資料還將繼續學習。