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. LeetCode----两两交换链表中的节点

    给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 示例: 给定 1->2->3->4, 你应该返回 2->1->4->3. 说明: 你的算法只能使用常数的 ...

  2. MYSQL中唯一约束和唯一索引的区别

    1.唯一约束和唯一索引,都可以实现列数据的唯一,列值可以有null.2.创建唯一约束,会自动创建一个同名的唯一索引,该索引不能单独删除,删除约束会自动删除索引.唯一约束是通过唯一索引来实现数据的唯一. ...

  3. TensorFlow线性回归

    目录 数据可视化 梯度下降 结果可视化 数据可视化 import numpy as np import tensorflow as tf import matplotlib.pyplot as plt ...

  4. Kotlin 的函数定义和使用 （译文 转）

    Kotlin 的函数定义和使用 函数声明Kotlin 中的函数使用 fun 关键字声明 fun double(x: Int): Int {}函数用法调用函数使用传统的方法 val result = d ...

  5. java 深入HashTable

    在java中与有两个类都提供了一个多种用途的hashTable机制,他们都可以将可以key和value结合起来构成键值对通过put(key,value)方法保存起来,然后通过get(key)方法获取相 ...

  6. UEditor富文本编辑器时，插入图片没有任何反应

    1.信息: Unable to find 'struts.multipart.saveDir' property setting. Defaulting to javax.servlet.contex ...

  7. Windows客户端 Linux服务器通讯 字符编码问题

    Windows下的字符编码默认是gb2312 在Linux下需要转成utf8 才能正确的看到对应的中文编码 提供转换函数 /*------------------------------------- ...

  8. 【Qt开发】QString与数字类型的转换（不同进制）

    把QString转换为 double类型 方法1.QString str="123.45"; double val=str.toDouble(); //val=123.45 方法2 ...

  9. get、set快捷键那码事儿

    今天发现一个省时间的方法.get一下,哈哈 在快捷get/set.或其他那个页面上的方法时,只需Shift+Alt+s 然后,选择哪个方法,就按该方法字母下有横线的那个字母(只按单个字母就行) 在ge ...

  10. Spring MVC 中使用AOP 进行事务管理--注解实现

    注解实现实现事务管理很简单,和配置式差不多,配置文件的头文件也要加相应的支持.配置数据源,并开启事务管理支持即可. <bean id="transactionManager" ...