XML

最新推荐文章于 2023-05-22 09:26:15 发布

飞天大屁

最新推荐文章于 2023-05-22 09:26:15 发布

阅读量72

点赞数 1

分类专栏： js学习文章标签： xml xmlhttp

本文链接：https://blog.csdn.net/weixin_46164856/article/details/116146783

版权

js学习专栏收录该内容

23 篇文章 0 订阅

订阅专栏

XML：Extensible Markup Language，是一种可扩展标记语言。
1.xml可以传输和存储数据，html是显示数据设计数据的外观。
2.xml是结构化、存储、传输信息，没有作为的。
3.xml没有预定义标签，html中的是自己定义的。
4.通过xml，数据可以被各种设备、平台复用，可以在不同系统之间进行数据传输。
5.xml把html的数据进行了分离，通过js进行读取。

<?xml version="1.0" encoding="ISO-8859-1"?>

XML标签
XML 文档形成一种树结构，他有自己的根。
XML 元素都须有关闭标签
XML 标签对大小写敏感
XML 必须正确地嵌套
XML 文档必须有根元素
XML 的属性值须加引号
XML 中，空格会被保留
XML 以 LF 存储换行 CR（回车符）和换行符（LF）

XML 命名规则
XML 元素必须遵循以下命名规则：
名称可以含字母、数字以及其他的字符
名称不能以数字或者标点符号开始
名称不能以字符 “xml”（或者 XML、Xml）开始
名称不能包含空格

XML 元素是可扩展的
XML 的优势之一，就是可以经常在不中断应用程序的情况进行扩展。

避免 XML 属性
因使用属性而引起的一些问题：
属性无法包含多重的值（元素可以）
属性无法描述树结构（元素可以）
属性不易扩展（为未来的变化）
属性难以阅读和维护

ID 索引可用于标识 XML 元素

什么是 XMLHttpRequest 对象？
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想，因为您能够：
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据
创建 XMLHttpRequest 对象的语法： xmlhttp=new XMLHttpRequest()
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

解析 XML
解析器把 XML 载入内存，然后把它转换为可通过 JavaScript 访问的 XML DOM 对象。
微软的 XML 解析器与其他浏览器中的解析器之间，存在一些差异。微软的解析器支持 XML 文件和 XML 字符串（文本）的加载，而其他浏览器使用单独的解析器。不过，所有的解析器都包含遍历 XML 树、访问插入及删除节点（元素）及其属性的函数。

XML DOM
XML DOM (XML Document Object Model) 定义了访问和操作 XML 文档的标准方法。
DOM 把 XML 文档作为树结构来查看。能够通过 DOM 树来访问所有元素。可以修改或删除它们的内容，并创建新的元素。元素，它们的文本，以及它们的属性，都被认为是节点。

xmlDoc.getElementsByTagName(“to”)[0].childNodes[0].nodeValue
xmlDoc -由解析器创建的 XML 文档
getElementsByTagName(“to”)[0] - 第一个元素
childNodes[0] - 元素的第一个子元素（文本节点）
nodeValue - 节点的值（文本本身）

解析 XML 字符串 - 跨浏览器实例
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,“text/xml”);
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”);
xmlDoc.async=“false”;
xmlDoc.loadXML(txt);
}

在 HTML 中显示 XML 数据
检测浏览器，然后使用合适的解析器来加载 XML
创建一个 HTML 表格（

）
使用 getElementsByTagName() 来获得所有 XML 的 CD 节点
针对每个 CD 节点，把 ARTIST 和 TITLE 中的数据显示为表格数据
用

结束表格

XML 文档实例:

<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>

html:

<body>
<div id="show"></div>
<input type="button" onclick="previous()" value="previous" />
<input type="button" onclick="next()" value="next" />
</body>

请求xml数据：

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

在html中显示数据：

x=xmlDoc.getElementsByTagName("CD");
i=0;

function displayCD()
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year;
document.getElementById("showCD").innerHTML=txt;
}

添加导航：

function next()
{
if (i<x.length-1)
  {
  i++;
  displayCD();
  }
}

function previous()
{
if (i>0)
  {
  i--;
  displayCD();
  }
}

飞天大屁

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
XML

XML：Extensible Markup Language，是一种可扩展标记语言。1.xml可以传输和存储数据，html是显示数据设计数据的外观。2.xml是结构化、存储、传输信息，没有作为的。3.xml没有预定义标签，html中的是自己定义的。4.通过xml，数据可以被各种设备、平台复用，可以在不同系统之间进行数据传输。5.xml把html的数据进行了分离，通过js进行读取。<?xml version="1.0" encoding="ISO-8859-1"?>XML标签XML
复制链接

扫一扫

专栏目录