1，了解json, 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数据格式他类似于js对象的组装方式，具有体积小，传输快的特点，这里我们拿常见的数据格式对象数组的形式来举例
[
{
"title":"Js学习",
"author":["张三","李四"]
},
{
"title":"ajax学习",
"author":["王五","赵六"]
}
]
2，Ajax如何对这俩种数据进行解析
- 首先弄清楚ajax使用步骤（4步,get,还是post 检测数据是什么，数据格式是什么，这要看后端人员给我们的接口文档，文档内会有详细的说明在，这里我也嫖了一份简单的接口文档供大家学习了解）
get方法：
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} //1，创建对象 并对IE6做兼容性处理
xhr.open("get", 'check.php?uname=' + uname, true); //2，准备发送，true代表异步
//模拟地址栏请求，得到check.php页面的数据
xhr.send(null); //3，开始发送
xhr.onreadystatechange = function() {//4，回调函数
if (xhr.readyState == 4) { //xhr状态正常
if (xhr.status == 200) { //服务器状态正常
var result = xhr.responseText;
console.log(result);
}
}
};
post方法 ：
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} //1，创建对象 并对IE6做兼容性处理
xhr.open("post", 'check.php', true); //2，准备发送，true代表异步
//模拟地址栏请求，得到check.php页面的数据
xhr.setRequestHeader("content-Type", 'application/x-www-form-urlencoded');
var param = 'uname=' + uname;
//注意uname一点都不能动，这是接口文档定义好的，服务器根据这个来判别用户输入是否合法
xhr.send(param); //3，开始发送
xhr.onreadystatechange = function() {//4，回调函数
if (xhr.readyState == 4) { //xhr状态正常
if (xhr.status == 200) { //服务器状态正常
var result = xhr.responseText;
console.log(result);
}
}
};
3,Ajax对xml, json数据解析
- 对xml数据解析渲染
//getBooks.php
<?php
header("Content-Type:text/xml;");//这里设置响应头信息，保证浏览器可以把相应内容识别为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>
<script>
window.onload = function() {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open('get', './server/getBooks.php', true);
xhr.send(null);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var result = xhr.responseXML;
var books = result.getElementsByTagName("booklist")[0].getElementsByTagName('book');
var newHtml = '';
for (var i = 0; i < books.length; i++) {
var itemBook = books[i];
var name = itemBook.getElementsByTagName('name')[0].textContent;
var author = itemBook.getElementsByTagName('author')[0].textContent;
var desc = itemBook.getElementsByTagName('desc')[0].textContent;
var table = document.getElementsByTagName('table')[0];
// table.insertAdjacentHTML("beforeend", '<tr><td>' + name + '</td><td>' + author + '</td><td>' + desc + '</td></tr>') 第一种方法
var Html = '<tr><td>' + name + '</td><td>' + author + '</td><td>' + desc + '</td></tr>';
newHtml += Html;
}
table.innerHTML += newHtml;
}
}
}
}
</script>
<body>
<div>
<table>
<tr>
<th>书名</th>
<th>作者</th>
<th>描述</th>
</tr>
</table>
</div>
</body>
这样就将xml格式的数据渲染到页面上了
- 对json数据解析渲染
//getStudent.php
<?php
$arr = array();
$arr[0] = array("name"=>"张三","age"=>"19","sex"=>"男");
$arr[1] = array("name"=>"李四","age"=>"23","sex"=>"男");
$arr[2] = array("name"=>"王五","age"=>"30","sex"=>"女");
echo json_encode($arr);
?>
<script>
//json数据格式的数据获取
window.onload = function() {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open('get', './server/getStudents.php', true);
xhr.send(null);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var result = xhr.responseText;
var Html = '';
result = JSON.parse(result); //得到的是数组对象
var table = document.querySelector('table');
for (var i = 0, l = result.length; i < l; i++) {
var item = result[i];
var name = item.name;
var sex = item.sex;
var age = item.age;
// Html += '<tr><td>' + name + '</td><td>' + sex + '</td><td>' + age + '</td></tr>'
table.insertAdjacentHTML('beforeend', '<tr><td>' + name + '</td><td>' + sex + '</td><td>' + age + '</td></tr>'); //方法二
}
// table.innerHTML += Html; 方法一：字符串连接
}
}
}
}
</script>
<body>
<div>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</table>
</div>
</body>
这样就可以渲染到页面上去了
