数据格式（data format）是描述数据保存在文件或记录中的规则。即：将数据通过一定的规范组织起来，叫做数据格式。
xml数据格式
xml数据格式是将数据以标签的方式进行组装，必须是以<?xml version="1.0" encoding="utf-8"?>开头，标签必须成对出现，xml是一个通用标准。例如：
<?xml version="1.0" encoding="utf-8"?>
<students>
<student>
<name>张三</name>
<age>30</age>
<sex>男</sex>
</student>
<student>
<name>李四</name>
<age>25</age>
<sex>男</sex>
</student>
<student>
<name>王五</name>
<age>27</age>
<sex>女</sex>
</student>
</students>缺点：体积太大，传输慢，解析不方便，所以目前使用的比较少了。
json数据格式
json数据格式类似于JS中的对象方式，通过key-value的形式组装，是一个通用标准。例如：
{
"student":[
{
"name":"张三",
"age":"30",
"sex":"男"
}
{
"name":"李四",
"age":"25",
"sex":"男"
}
{
"name":"王五",
"age":"27",
"sex":"女"
}
]
}优点：体积小、传输快、解析方便。
getBooks.php
<?php
//设置响应头，保证浏览器可以把相应内容识别为xml文件类型
header("Content-Type:text/xml");
$arr = array();
$arr[0] = array("name"=>"三国演义","author"=>"罗贯中","desc"=>"一个杀伐纷争的年代");
$arr[1] = array("name"=>"水浒传","author"=>"施耐庵","desc"=>"108条好汉的故事");
$arr[2] = array("name"=>"红楼梦","author"=>"曹雪芹","desc"=>"一个封建王朝的缩影");
$arr[3] = array("name"=>"西游记","author"=>"吴承恩","desc"=>"佛教与道教的斗争");
?>
<?xml version="1.0" encoding="utf-8"?>
<booklist>
<?php
foreach($arr as $key => $value){
?>
<book>
<name><?php echo $value['name'] ?></name>
<author><?php echo $value['author'] ?></author>
<desc><?php echo $value['desc'] ?></desc>
</book>
<?php
}
?>
</booklist>html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 800px;
margin: 20px auto;
}
table{
width: 800px;
margin: 20px auto;
border-collapse: collapse;
}
th{
background-color: #0ec7ff;
color: #fff;
font-size: 16px;
padding: 5px;
text-align: center;
border: 1px solid black;
}
td{
padding: 5px;
text-align: center;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<table id="bookContainer">
<tr>
<th>书名</th>
<th>作者</th>
<th>描述</th>
</tr>
</table>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function(){
var obj = {
type:"get",
url:"getBooks.php",
dataType:"xml",
success:function(result){
console.log(result);
var books = result.querySelector("booklist").getElementsByTagName("book");
var newHtml = $("#bookContainer").html();
for(var i=0; i<books.length; i++){
var itemBook = books[i];
var name = itemBook.querySelector("name").textContent;
var author = itemBook.querySelector("author").textContent;
var desc = itemBook.querySelector("desc").textContent;
var tempHtml = "<tr><th>"+name+"</th><th>"+author+"</th><th>"+desc+"</th></tr>";
newHtml += tempHtml;
}
$("#bookContainer").html(newHtml);
}
};
$.ajax(obj);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 800px;
margin: 20px auto;
}
table{
width: 800px;
margin: 20px auto;
border-collapse: collapse;
}
th{
background-color: #0ec7ff;
color: #fff;
font-size: 16px;
padding: 5px;
text-align: center;
border: 1px solid black;
}
td{
padding: 5px;
text-align: center;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<table id="container">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</table>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function(){
var obj = {
type:"get",
url:"getStudents.php",
dataType:"json",
success:function(result){
console.log(result);
var newHtml = $("#container").html();
for(var i=0; i<result.length; i++){
var item = result[i];
var tempHtml = "<tr><th>"+item.name+"</th><th>"+item.age+"</th><th>"+item.sex+"</th></tr>";
newHtml += tempHtml;
}
$("#container").html(newHtml);
}
};
$.ajax(obj);
});
</script>
</body>
</html>