XML基础应用

最新推荐文章于 2024-10-28 14:22:54 发布

jianOH

最新推荐文章于 2024-10-28 14:22:54 发布

阅读量385

点赞数

分类专栏： AJAX学习文章标签： xml html javascript

本文链接：https://blog.csdn.net/jianOH/article/details/122804984

版权

AJAX学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客介绍了XML的基本格式，包括头部定义和根标签的使用。同时，展示了PHP如何通过header函数设置响应类型，并读取XML文件内容。在JavaScript部分，文章讲解了如何利用XMLHttpRequest进行异步数据获取，通过querySelector方法获取XML中的特定节点信息，实现动态更新页面内容。

摘要由CSDN通过智能技术生成

一、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文件中

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("请求失败");
                    }
                })