它是按照某种既定的格式写的字符串,最开始要写版本号,全部使用双标签,最外层需要一个根节点,标签的名字只要不已数字和中文开头即可。
-
版问号作为第一行<?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>