快速认识XML数据格式并对其进行解析！！！

最新推荐文章于 2022-07-13 11:37:01 发布

帅帅邬同学

最新推荐文章于 2022-07-13 11:37:01 发布

阅读量300

点赞数 4

分类专栏：学习笔记服务器与AJAX jQuery 文章标签： json ajax js javascript jquery

本文链接：https://blog.csdn.net/weixin_44586544/article/details/106023038

版权

学习笔记同时被 3 个专栏收录

111 篇文章 0 订阅

订阅专栏

服务器与AJAX

21 篇文章 0 订阅

订阅专栏

jQuery

12 篇文章 0 订阅

订阅专栏

什么是 XML?

XML 指可扩展标记语言（EXtensible Markup Language）

特点：

1. 没有任何行为的 XML --- XML 被设计用来结构化、存储以及传输信息。
2. XML 仅仅是纯文本
3. XML 没有预定义的标签 --- 通过 XML 您可以发明自己的标签
4. XML 是对 HTML 的补充 --- XML 用于传输数据，而 HTML 用于格式化并显示数据

对XML数据进行解析

前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>初识Ajax开发</title>
  <script type="text/javascript">
 
    window.onload = function () {
      var btn = document.getElementById('btn');
      btn.onclick = function () {
        var uname = document.getElementById('username').value;
        var pw = document.getElementById('password').value;

        // 1、创建XMLHttpRequest对象
        var xhr = null;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest(); //标准
        } else {
          xhr = new ActiveXObject("Microsoft.HTTP"); //IE6
        }
        // readyState=0表示xhr对象创建完成
        // 2、准备发送
        var param = 'username=' + uname + '&password=' + pw;
        xhr.open('post','data.xml',true);
        // 3、执行发送动作
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(param); //post请求参数在这里传递，并且不需要转码
        // 4、指定回调函数
        // 该函数调用的条件就是readyState状态发生变化（不包括从0变为1）
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var data = xhr.responseXML;
              var bookList = data.getElementsByTagName('booklist');
              // var books = bookList[0].childNodes;
              var books = bookList[0].children;

              var book1 = books[0];
              // console.log(books[0].nodeType);
              // console.log(books[1].nodeType);
              // console.log(book1);
              // var name = book1.children[0].innerHTML;
              // var author = book1.children[1].innerHTML;
              // var desc = book1.children[2].innerHTML;

              var name = book1.children[0].firstChild.wholeText;
              var author = book1.children[1].firstChild.wholeText;
              var desc = book1.children[2].firstChild.wholeText;
              console.log(name, author, desc);
            }
          }
        }
      }
    }
  </script>
</head>

<body>
  <form>
    用户名：
    <input type="text" name="username" id="username"><span id="info"></span>
    <br> 密码：
    <input type="text" name="password" id="password">
    <input type="button" value="登录" id="btn">
  </form>
</body>

</html>

XML 数据：

<?xml version="1.0" encoding="utf-8"?>
<booklist>
	<book>
		<name>
			三国演义
		</name>
		<author>
			罗贯中
		</author>
		<desc>
			一个杀伐纷争的年代
		</desc>
	</book>
	<book>
		<name>
			水浒传
		</name>
		<author>
			施耐庵
		</author>
		<desc>
			108条好汉的故事
		</desc>
	</book>
</booklist>

使用PHP开发XML

前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>初识Ajax开发</title>
  <script type="text/javascript">

    window.onload = function () {
      var btn = document.getElementById('btn');
      btn.onclick = function () {
        var uname = document.getElementById('username').value;
        var pw = document.getElementById('password').value;

        // 1、创建XMLHttpRequest对象
        var xhr = null;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest(); //标准
        } else {
          xhr = new ActiveXObject("Microsoft"); //IE6
        }
        // readyState=0表示xhr对象创建完成
        // 2、准备发送
        var param = 'username=' + uname + '&password=' + pw;
        // xhr.open('post','data.xml',true);
        xhr.open('post', '06.php', true);
        // 3、执行发送动作
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(param); //post请求参数在这里传递，并且不需要转码
        // 4、指定回调函数
        // 该函数调用的条件就是readyState状态发生变化（不包括从0变为1）
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var data = xhr.responseXML;
              var bookList = data.getElementsByTagName('booklist');
              // var books = bookList[0].childNodes;
              var books = bookList[0].children;

              var book1 = books[0];
              // console.log(books[0].nodeType);
              // console.log(books[1].nodeType);
              // console.log(book1);
              // var name = book1.children[0].innerHTML;
              // var author = book1.children[1].innerHTML;
              // var desc = book1.children[2].innerHTML;

              var name = book1.children[0].firstChild.wholeText;
              var author = book1.children[1].firstChild.wholeText;
              var desc = book1.children[2].firstChild.wholeText;
              console.log(name, author, desc);
            }
          }
        }
      }
    }
  </script>
</head>

<body>
  <form>
    用户名：
    <input type="text" name="username" id="username"><span id="info"></span>
    <br> 密码：
    <input type="text" name="password" id="password">
    <input type="button" value="登录" id="btn">
  </form>
</body>

</html>

PHP代码：

<?php 
    header("Content-Type:text/xml;");
    //这里设置响应头信息，保证浏览器可以把相应内容识别为xml文件类型

    $arr = array();
    $arr[0] = array("name"=>"三国演义","author"=>"罗贯中","desc"=>"一个杀伐纷争的年代");
    $arr[1] = array("name"=>"水浒传","author"=>"施耐庵","desc"=>"108条好汉的故事");
    $arr[2] = array("name"=>"西游记","author"=>"吴承恩","desc"=>"佛教与道教斗争");
    $arr[3] = array("name"=>"红楼梦","author"=>"曹雪芹","desc"=>"一个封建王朝的缩影");
 ?>
<?xml version="1.0" encoding="utf-8" ?>
<booklist>
    <book>
        <name><?php echo $arr[0]['name'] ?></name>
        <author><?php echo $arr[0]['author'] ?></author>
        <desc><?php echo $arr[0]['desc'] ?></desc>
    </book>
    <book>
        <name><?php echo $arr[1]['name'] ?></name>
        <author><?php echo $arr[1]['author'] ?></author>
        <desc><?php echo $arr[1]['desc'] ?></desc>
    </book>
    <book>
        <name><?php echo $arr[2]['name'] ?></name>
        <author><?php echo $arr[2]['author'] ?></author>
        <desc><?php echo $arr[2]['desc'] ?></desc>
    </book>
    <book>
        <name><?php echo $arr[3]['name'] ?></name>
        <author><?php echo $arr[3]['author'] ?></author>
        <desc><?php echo $arr[3]['desc'] ?></desc>
    </book>
</booklist>

XML数据格式的弊端：

1、元数据占用的数据量比较大，不利于大量数据的网络传输
2、解析不太方便

基于上述所说的XML数据格式的弊端，现在主流的是 JSON格式的字符串，想要了解JSON的话，那就请看我的下一篇文章吧😘！！！

如果这篇文章能够帮助到你，希望您不要吝惜点赞，您的支持是我继续努力的动力！！！

帅帅邬同学

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
快速认识XML数据格式并对其进行解析！！！

什么是 XML?XML 指可扩展标记语言（EXtensible Markup Language）特点：1. 没有任何行为的 XML --- XML 被设计用来结构化、存储以及传输信息。2. XML 仅仅是纯文本3. XML 没有预定义的标签 --- 通过 XML 您可以发明自己的标签4. XML 是对 HTML 的补充 --- XML 用于传输数据，而 HTML 用于格式化并显示数据对XML数据进行解析前端代码：<!DOCTYPE html><html lang
复制链接

扫一扫