HTML的文档如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border: 1px solid #000;
width: 500px;
margin: 0 auto;
border-collapse: collapse;
}
th {
height: 40px;
line-height: 40px;
background-color: #ccc;
border: 1px solid #000;
}
td {
text-align: center;
border: 1px solid #000;
}
 
</style>
</head>
<body>
<button id='getInfo'>获取数据</button>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>张飞</td>
<td>男</td>
<td>18</td>
<td>不错</td>
</tr> -->
</tbody>
</table>
<script>
// 思路:
// 1. 给按钮添加点击事件
// 2. 发送ajax请求, 获取数据
// 3. 得到 xml 数据, 完成渲染
var btn = document.querySelector('#getInfo');
var tbody = document.querySelector('tbody');
btn.onclick = function() {
// 1. 创建ajax对象
var xhr = new XMLHttpRequest();
// 2. 发送请求 get
xhr.open('get', '13-xml.php');
xhr.send(null);
// 3. 处理响应
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 成功响应
// 一般响应都是文本格式, responseText
// 但是如果是 xml 格式, 需要使用 responseXML
// console.log(xhr.responseText);
// xml不支持 innerText
// 这种方式读取， 得到的是一个 dom 对象, 可以使用dom的方法!!!
// console.log(xhr.responseXML);
var result = xhr.responseXML; // dom对象
var allUsers = result.querySelectorAll('user');
// console.log(allUsers);
// console.log(allUsers[0].children[0].innerHTML);
var htmlStr = '';
// 遍历allUsers 字符串拼接
for (var i = 0; i < allUsers.length; i++) {
var str = "<tr>" +
" <td>"+ allUsers[i].children[0].innerHTML +"</td>" +
" <td>"+ allUsers[i].children[1].innerHTML +"</td>" +
" <td>"+ allUsers[i].children[2].innerHTML +"</td>" +
" <td>"+ allUsers[i].children[3].innerHTML +"</td>" +
"</tr>";
htmlStr += str;
}
tbody.innerHTML = htmlStr;
}
}
};
// xml格式注意点:
// 后台必须设置类型 text/xml
// 前端请求完, 接收需要 responseXML 来接收, 接收得到的是 dom, 需要通过 dom 的方式取出值!!!
</script>
</body>
</html>
 
 
xml的php文件如下：
<?php
// xml解析时, 一定要设置 content-type 类型 text/xml
// 设置字符集
header('content-type: text/xml; charset=utf-8;');
// 读取xml格式的数据, 并且返回给前端
// 读取内容
echo file_get_contents('data.xml');
?>
 
 
xml的xml文件如下：
<users>
<user>
<name>张飞</name>
<gender>男</gender>
<age>18</age>
<desc>大黑飞飞</desc>
</user>
<user>
<name>关羽</name>
<gender>男</gender>
<age>30</age>
<desc>大关刀!!</desc>
</user>
<user>
<name>赵云</name>
<gender>男</gender>
<age>20</age>
<desc>大鹏展翅!!</desc>
</user>
<user>
<name>刘备</name>
<gender>男</gender>
<age>60</age>
<desc>刘皇叔</desc>
</user>
</users>

xml的解析及案例的分析和分享的更多相关文章

  1. xml常用四种解析方式优缺点的分析×××××

    xml常用四种解析方式优缺点的分析 博客分类: xml   最近用得到xml的解析方式,于是就翻了翻自己的笔记同时从网上查找了资料,自己在前人的基础上总结了下,贴出来大家分享下. 首先介绍一下xml语 ...

  2. 分析Json/Xml的解析过程

    json和xml都是用来进行数据的传输和交换的,是目前用来传输数据用的最多的两种技术,下面我们分别来认识一下它们及其解析过程 一.json 1.json简介 JSON是一种基于文本的轻量级数据交换格式 ...

  3. 从LayoutInflater分析XML布局解析成View的树形结构的过程

    上一篇博客分析了XML布局怎么载入到Activity上.不了解的能够參考 从setContentView方法分析Android载入布局流程 上一篇博客仅仅是分析了怎么讲XML布局加入到 Activit ...

  4. XML的解析（DOM以及SAX方式）

    感谢http://blog.csdn.net/redarmy_chen/article/details/12951649(关于SAX解析)以及http://blog.csdn.net/zhangerq ...

  5. 通过正则表达式实现简单xml文件解析

    这是我通过正则表达式实现的xml文件解析工具,有些XHTML文件中包含特殊符号,暂时还无法正常使用. 设计思路:常见的xml文件都是单根树结构,工具的目的是通过递归的方式将整个文档树装载进一个Node ...

  6. Mybatis解析动态sql原理分析

    前言 废话不多说,直接进入文章. 我们在使用mybatis的时候,会在xml中编写sql语句. 比如这段动态sql代码: <update id="update" parame ...

  7. android基础知识13：AndroidManifest.xml文件解析

    注:本文转载于:http://blog.csdn.net/xianming01/article/details/7526987 AndroidManifest.xml文件解析. 1.重要性 Andro ...

  8. Android之AndroidManifest.xml文件解析

    转自:Android学习笔记之AndroidManifest.xml文件解析 一.关于AndroidManifest.xml AndroidManifest.xml 是每个android程序中必须的文 ...

  9. PHP XML Expat 解析器

    PHP XML Expat 解析器 内建的 Expat 解析器使在 PHP 中处理 XML 文档成为可能. XML 是什么? XML 用于描述数据,其焦点是数据是什么.XML 文件描述了数据的结构. ...

随机推荐

  1. docker运行jpress

    1.前提安装好docker mkdir docker//建立工作文件夹 cd docker 2.下载tomcat镜像和jpress开源项目 docker pull docker pull hub.c. ...

  2. LeetCode 49. 字母异位词分组（Group Anagrams）

    题目描述 给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", "ta ...

  3. Dubbo Configuration

    可配置参数 http://dubbo.apache.org/zh-cn/docs/user/references/xml/introduction.html 与 spring 整合的几种方式 Spri ...

  4. 1.3 Junit4简介

    1.Junit4框架 可用于单元测试,直接测试类中的方法 2.简单实用 a.导入Junit的jar包 b.熟悉Junit的执行顺序 c.写测试用例 d.利用断言,找bug 3.demo public ...

  5. Link标签

    Link标签的属性:rel定义当前文档与目标文档之间的关系. rev定义目标文档与当前文档之间的关系. Link和@import的区别:   1.隶属上的差别      link是一个html的一个标 ...

  6. 阶段3 2.Spring_08.面向切面编程 AOP_9 spring基于注解的AOP配置

    复制依赖和改jar包方式 src下的都复制过来. 复制到新项目里了 bean.xml里面复制上面一行代码到下面.把aop改成context. 配置spring容器创建时要扫描的包 Service的配置 ...

  7. lnmp宝塔面板问题

    使用宝塔面板后,无法安装zabbix客户端的依赖包,总是提示mariadb冲突,其实mariadb早就卸载完了,所以要安装zabbix客户端就不好使用宝塔面板

  8. CPU 使用率低 but负载高

    一.关于负载 什么是负载:负载就是cpu在一段时间内正在处理以及等待cpu处理的进程数之和的统计信息,也就是cpu使用队列的长度统计信息,这个数字越小越好(如果超过CPU核心*0.7就是不正常) 负载 ...

  9. AndroidStudio ADB WIFI ：adb wifi scan ip address

    笔记本使用Android studio的adb wifi插件时,AS 最下方报 adb wifi scan ip address.一直无法使用. 解决办法: ----在Terminal窗口中输入: a ...

  10. 打印输出opencv的版本信息

    本文链接: https://mangoroom.cn/opencv/print-opencv-version-info.html 序 查看自己安装的opencv的版本信息的方法有两种. 方法一-查看l ...