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. css3 水纹效果（仿写阿里云）

    效果图 什么也不说了,上代码. <!DOCTYPE html> <html> <head> <title>css3 水纹效果</title> ...

  2. C++入门经典-例5.9-使用空类型指针执行函数

    1:运行代码: // 5.9.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...

  3. centos6.9 samba配置

    https://blog.csdn.net/qq_33468857/article/details/75431813 1 使用用户名密码访问 [global] security = user [hom ...

  4. spark MLlib 概念 4： 协同过滤（CF）

    1. 定义 协同过滤(Collaborative Filtering)有狭义和广义两种意义: 广义协同过滤:对来源不同的数据,根据他们的共同点做过滤处理. Collaborative filterin ...

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

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

  6. layer实现关闭弹出层刷新父界面功能详解

    本文实例讲述了layer实现关闭弹出层刷新父界面功能.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会 ...

  7. Vs2019+openjdk12 本地Debug环境搭建过程

    1. VS2019下载和安装 这个就不写了 2. cygwin安装: https://jingyan.baidu.com/article/455a99507c0b78a166277809.html 需 ...

  8. Servlet的自动加载

    Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE MicrosoftInternetExplorer4 /* Style Definiti ...

  9. Python 测试代码覆盖率统计工具 coverage.py

    安装 您可以通常的方式安装coverage.py.最简单的方法是使用pip: $ pip install coverage 要安装预发布版本,您需要指定--pre: $ pip install --p ...

  10. Ubuntu16.04安装NVIDIA驱动、实现GPU加速

    NVIDIA驱动前前后后装了好几遍,下面把个人的经验分享下,大家仅供参考. 老规矩,先引用师兄的(最详细)https://blog.csdn.net/sinat_23853639/article/de ...