它是按照某种既定的格式写的字符串，最开始要写版本号，全部使用双标签，最外层需要一个根节点，标签的名字只要不已数字和中文开头即可。
版问号作为第一行<?xml version=”1.0” encoding=”UTF-8”?>
如果使用php读取xml那么要设置header 3.异步 对象中 有另外一个属性 用来专门获取 xmlconsole.log(ajax.responseXML); 4.下面这个 页面文档对象 如果要获取某个标签console.log(window.document); getStars.html
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> table{ margin: 100px auto; border: 1px solid #0094ff; } td{ border: 1px solid #0094ff; } </style> </head> <body> <h1>ajax获取多个明星数据</h1> <input type="button" value="获取数据" id="getStars"> </body> </html> <script type="text/javascript"> var btn=document.querySelector("#getStars"); btn.onclick=function(){ var ajax=new XMLHttpRequest(); ajax.open('post','getStars.php'); ajax.send(); ajax.onreadystatechange=function(){ if(ajax.readyState==4&&ajax.status==200){ console.log(ajax.responseXML); var persons=ajax.responseXML.querySelectorAll('person'); //吧循环之前的table拼接出来 var str=""; str+='<table>'; //循环获取其中某一个 for (var i = 0;i<persons.length;i++){ var currentPerson=persons[i]; console.log(currentPerson.querySelector('name') .innerHTML); console.log(currentPerson.querySelector('path').innerHTML); console.log(currentPerson.querySelector('skill').innerHTML); //方法1：创建一个table /*document.creatElement("table").appendChild(); document.creatElement("tr"); document.creatElement("td");*/ //直接拼接出一个table的字符串，设置到页面上面 str+='<tr>'; str+='<td>'+currentPerson.querySelector('name') .innerHTML+'</td>'; /*str+='<td>'+currentPerson.querySelector('path') .innerHTML+'</td>';*/ str+='<td><img src="'+currentPerson.querySelector('path') .innerHTML+'"></td>'; str+='<td>'+currentPerson.querySelector('skill') .innerHTML+'</td>'; str+='<td><a href="#">点击了解更多'+currentPerson.querySelector('name') .innerHTML+'</a></td>'; str+='</tr>'; } //循环完毕table合并 str+='</table>'; console.log(str); //直接添加到页面 document.body.innerHTML=str; } } } </script>getStars.php
<?php // 设置返回的是 xml header('content-type:text/xml; charset= utf-8'); // 读取并返回 oh -yeah echo file_get_contents('info/starList.xml'); ?>info/.xml文件
<?xml version="1.0" encoding="UTF-8"?> <stars> <person> <name>黄子韬</name> <path>images/hzt.jpg</path> <skill>狗带</skill> </person> <person> <name>岳云鹏</name> <path>images/yyp.jpg</path> <skill>卖萌</skill> </person> <person> <name>韩红</name> <path>images/hh.jpg</path> <skill>唱歌</skill> </person> </stars>