XML数据格式
1、首行必须是版本号和格式等信息
<?xml version="1.0" encoding="utf-8" ?>
2、最外层需要一个根节点进行包裹
3、标签有开头有结尾，效率低下
4、php中设置header需要将content-type设置成text/xml
header("content-type:text/xml;charset=utf-8");3、浏览器读取XML文件是用ajax.responseXML
4、浏览器接收到的是文档树，可以用访问节点的方式获取值
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????body{ ???????????text-align: center; ???????} ???????div{ ???????????width: 500px; ???????????height: 100px; ???????????margin: 0 auto; ???????????text-align: center; ???????} ???????td{ ???????????border: 1px solid #000; ???????} ???????table{ ???????????text-align: center; ???????????width: 500px; ???????????border-collapse: collapse; ???????} ???</style></head><body><div></div><button>获取xml文件数据</button><script> ???var btn = document.getElementsByTagName("button")[0]; ???btn.onclick = function () { ???????var ajax = new XMLHttpRequest(); ???????ajax.open(‘get‘, ‘03.php‘); ???????ajax.send(); ???????ajax.onreadystatechange = function (ev) { ???????????if (ajax.readyState=4&&ajax.status==200) { ???????????????var msg=ajax.responseXML; ???????????????console.log(msg); ???????????????var str=""; ???????????????str+="<table>"; ???????????????var persons=msg.querySelectorAll(‘person‘); ???????????????for (var i = 0; i < persons.length; i++) { ???????????????????str+="<tr>"; ???????????????????str+="<td>"+persons[i].children[0].innerHTML+"</td>"; ???????????????????str+="<td>"+persons[i].children[1].innerHTML+"</td>"; ???????????????????str+="<td>"+persons[i].children[2].innerHTML+"</td>"; ???????????????????str+="</tr>"; ???????????????} ???????????????str+="</table>" ???????????????var div=document.getElementsByTagName("div")[0]; ???????????????div.innerHTML=str; ???????????} ???????} ???}</script></body></html><?php ?header("content-type:text/xml;charset=utf-8"); ?echo file_get_contents(‘files/01.xml‘);?><?xml version="1.0" encoding="utf-8" ?><personXML> ???<person> ???????<name>zs1</name> ???????<age>17</age> ???????<sex>nan</sex> ???</person> ???<person> ???????<name>zs2</name> ???????<age>18</age> ???????<sex>nan</sex> ???</person> ???<person> ???????<name>zs3</name> ???????<age>19</age> ???????<sex>nan</sex> ???</person></personXML>
JSON数据格式
1、格式上可以是标准的json字符串，也可以组成数组
[ ?{"name":"zs1","age":17,"sex":"nan"}, ?{"name":"zs2","age":17,"sex":"nan"}, ?{"name":"zs3","age":17,"sex":"nan"}]2、基本上所有语言都可以将JSON字符串转化为该语言的对象进行访问
var msg = JSON.parse(ajax.responseText);//将json字符串转化为js对象
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????body { ???????????text-align: center; ???????} ???????div { ???????????width: 500px; ???????????height: 100px; ???????????margin: 0 auto; ???????????text-align: center; ???????} ???????td { ???????????border: 1px solid #000; ???????} ???????table { ???????????text-align: center; ???????????width: 500px; ???????????border-collapse: collapse; ???????} ???</style></head><body><div></div><button>点击获取json数据</button><script> ???var btn = document.getElementsByTagName("button")[0]; ???btn.onclick = function () { ???????var ajax = new XMLHttpRequest(); ???????ajax.open(‘post‘, ‘04.php‘); ???????ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); ???????ajax.send(); ???????ajax.onreadystatechange = function (ev) { ???????????if (ajax.readyState == 4 && ajax.status == 200) { ???????????????console.log(ajax.responseText); ???????????????var msg = JSON.parse(ajax.responseText); ???????????????var str = ""; ???????????????str += "<table>"; ???????????????for (var i = 0; i < msg.length; i++) { ???????????????????str += "<tr>"; ???????????????????str += "<td>" + msg[i]["name"] + "</td>"; ???????????????????str += "<td>" + msg[i]["age"] + "</td>"; ???????????????????str += "<td>" + msg[i]["sex"] + "</td>"; ???????????????????str + "</tr>"; ???????????????} ???????????????str += "</table>"; ???????????????var div = document.getElementsByTagName("div")[0]; ???????????????div.innerHTML = str; ???????????} ???????} ???}</script></body></html><?php ?header("content-type:text/html;charset=utf-8"); ?echo file_get_contents(‘files/02.json‘);?>[ ?{"name":"zs1","age":17,"sex":"nan"}, ?{"name":"zs2","age":17,"sex":"nan"}, ?{"name":"zs3","age":17,"sex":"nan"}]Ajax——异步基础知识（二）
原文地址：https://www.cnblogs.com/wuqiuxue/p/8143041.html