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. C++入门经典-例5.10-指针作为返回值

    1:代码如下: // 5.10.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...

  2. MySQL中的exist与not exists

    准备数据 我们先介绍下使用的3个数据表: student数据表: course数据表: sc数据表: EXISTS EXISTS代表存在量词∃.带有EXISTS谓词的子查询不返回任何数据,只产生逻辑真 ...

  3. 读取文件信息，并通过sscanf从中获取所需数据

    #include <stdio.h> #include <stdlib.h> #include <string.h> int file_length(char* f ...

  4. T2695 桶哥的问题——吃桶

    ~~~~~我~是~真的~忍不了~这个~取模~的~锅~了~~~~~ T2695 桶哥的问题——吃桶 前传 1.T2686 桶哥的问题——买桶 这题真的hin简单,真的 2.T2691 桶哥的问题——送桶 ...

  5. shell高级-----正则表达式

    正则表达式概述 正则表达式是一种定义的规则,Linux工具可以用它来过滤文本. 基础正则表达式 纯文本 [root@node1 ~]# echo "this is a cat" | ...

  6. leetcode 146LRU cache

    class LRUCache { public: LRUCache(int capacity) {_capacity=capacity;} //返回key对应的value int get(int ke ...

  7. leetcode 17电话号码的字母组合

    与子集70?类似,子集每次两个分支,本题每次k个分支,子集是第一次不push第二次push元素,本题是每次都push元素,因此,本题答案的长度都为k,子集题目为各种组合: /** res,level, ...

  8. ggsci: error while loading shared libraries: libnnz11.so: cannot open shared object file

    完整的错误信息如下: ggsci: error while loading shared libraries: libnnz11.so: cannot open shared object file: ...

  9. Selenium-WebDriverApi接口

    webdriver获取元素的18种方式: 1.单数模式8 种 id定位模式 element = driver.find_element_by_id('i1') element.send_keys('U ...

  10. mysql 各数据类型的大小及长度

    数字型 类型 大小 范围(有符号) 范围(无符号) 用途 TINYINT 1 字节 (-128,127) (0,255) 小整数值 SMALLINT 2 字节 (-32 768,32 767) (0, ...