XML基础应用

一、XML格式

<?xml version="1.0" encoding="UTF-8"?>
<products>
<tiger1>
<title>tiger1</title>
<pic>tiger1.jpg</pic>
<des>可爱的小老虎坐在草地上</des>
</tiger1>
<tiger2>
<title>tiger2</title>
<pic>tiger2.jpg</pic>
<des>可爱的小老虎坐在草地上,眼神坚毅</des>
</tiger2>
<film>
<title>film</title>
<pic>film.jpg</pic>
<des>电影蒂芙尼的早餐</des>
</film>
</products>

1、头部<?xml version="1.0" encoding="UTF-8"?>是必须写的
2、必须要有根标签，然后把内容写在根标签内。内容的标签名称可以自己设置

<dog>
<he>...</he>
<she>...</she>
<them>...</them>
</dog>

二、XML的引用
PHP

<?php
header("content-type:text/xml;charset=utf-8");
echo file_get_contents("01-get-xml.xml");  
//响应的数据保存在XML文件中

JS

var prodname = document.querySelector('.prodname');
            var prodpic = document.getElementById('pic');
            var proddes = document.querySelector('.proddes');
            var btn = document.querySelectorAll('button');
            btn[0].onclick = function () {
			var name=this.getAttribute("name");
                ajax({
                    type: "GET",
                    url: "01-get-xml.php",
                    timeout: "3000",
                    data: {
                        "name": this.getAttribute("name")
                    },
                    success: function (xhr) {
                        var res=xhr.responseXML;
                        //此时的res相当于一个document
						var title=res.querySelector(name+">title").innerHTML;
						//querySelector(name+">title")，+是js的拼接符号
						//>表示name第一个叫title的子元素
						var des=res.querySelector(name+">des").innerHTML;
						var pic=res.querySelector(name+">pic").innerHTML;
						prodname.innerHTML=title;
                        prodpic.setAttribute("src",pic);
						proddes.innerHTML=des;
                    },  
                    error: function (xhr) {
                        alert("请求失败");
                    }
                })