为实现数据与逻辑代码的分离，可以把数据单独存放，一般用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 ='';//tablestr +='<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
<?phpheader('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);// 拼接ulvar 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
<?phpheader('content-type:text/html;charset=utf-8');echo file_get_contents('../datas/jsondata.json');?>
点击按钮后，输出结果为：
有关json与xml的区别，先介绍到这里。有关ajax获取json、xml格式的数据还将继续学习。
