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>
这样就可以渲染到页面上去了
