为实现数据与逻辑代码的分离,可以把数据单独存放,一般用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格式的数据还将继续学习。