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 198. 打家劫舍（House Robber）LeetCode 213. 打家劫舍 II（House Robber II）

    打家劫舍 题目描述 你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报 ...

  2. Kotlin概述

    Kotlin 是一个基于 JVM 的新的编程语言,由 JetBrains 开发. Kotlin可以编译成Java字节码,也可以编译成JavaScript,方便在没有JVM的设备上运行. JetBrai ...

  3. 可以展开和收起的的LinearLayout

    package com.loaderman.expandablelinearlayout; import android.animation.ObjectAnimator; import androi ...

  4. python中_new_()与_init_()的区别

    __new__方法的使用 只有继承于object的新式类才能有__new__方法,__new__方法在创建类实例对象时由Python解释器自动调用,一般不用自己定义,Python默认调用该类的直接父类 ...

  5. 【转】Eureka集群

    Eureka作为SpringCloud的服务发现与注册中心,在整个的微服务体系中,处于核心位置.单一的eureka服务,显然不能满足高可用的实际生产环境,这就要求我们配置一个能够应对各种突发情况,具有 ...

  6. 阶段3 2.Spring_08.面向切面编程 AOP_1 AOP的概念

  7. 对redis的一些理解

    缓存就是在内存中存储的数据备份,当数据没有发生本质变化的时候,我们避免数据的查询操作直接连接数据库,而是去    内容中读取数据,这样就大大降低了数据库的读写次数,而且从内存中读数据的速度要比从数据库 ...

  8. 如何将txt文件转换为带章节目录的mobi文件

    txt文件基本没什么排版可言.所以想要把txt转换为mobi文件方便阅读. 具体步骤如下: 打开txt 用notepad++打开所需要转换的txt文件.(或者使用其他的能够支持正则表达式的编辑器). ...

  9. python一些包

    jieba结巴 github上已经够详细了https://github.com/vinta/awesome-python

  10. 学习SASS

    这几天白老师叫我们css的扩展技术,有什么LESS,还有SASS(我还以为是SAS...QAQ),LESS由于功能比较简单,用的也比较少所以我们重点学习了SASS.简单地说SASS是一种CSS的开发工 ...