XML笔记day04 XMLHttpRequest 对象+XML解析器+XML DOM+XML应用实例

最新推荐文章于 2022-04-25 13:52:04 发布
最新推荐文章于 2022-04-25 13:52:04 发布
阅读量531 收藏 1
点赞数
分类专栏： XML 文章标签： xml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44634837/article/details/112133222
版权

文章目录

XMLHttpRequest 对象

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象能够：

在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求接受数据
在后台向服务器发送数据

创建一个 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 和 Opera）都有内建的 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

xmlhttp=new XMLHttpRequest();

旧版本的Internet Explorer（IE5和IE6）中使用 ActiveX 对象：

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

我们可使用 XMLHttpRequest 对象从服务器取回 XML 信息。

XML Parser解析器

所有现代浏览器都有内建的 XML 解析器。
XML 解析器把 XML 文档转换为 XML DOM 对象 - 可通过 JavaScript 操作的对象。

解析 XML 文档
下面的代码片段把 XML 文档解析到 XML DOM 对象中：

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","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

解析 XML 字符串
下面的代码片段把 XML 字符串解析到 XML DOM 对象中：

txt="<bookstore><book>";
txt=txt+"<title>Everyday Italian</title>";
txt=txt+"<author>Giada De Laurentiis</author>";
txt=txt+"<year>2005</year>";
txt=txt+"</book></bookstore>";

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);
}

注释：
Internet Explorer 使用 loadXML() 方法来解析 XML 字符串，而其他浏览器使用 DOMParser 对象。

跨域访问
出于安全方面的原因，现代的浏览器不允许跨域的访问。

这意味着，网页以及它试图加载的 XML 文件，都必须位于相同的服务器上。

XML DOM

DOM（Document Object Model 文档对象模型）定义了访问和操作文档的标准方法。

XML DOM

XML DOM 把 XML 文档作为树结构来查看。

所有元素可以通过 DOM 树 来访问。可以修改或删除它们的内容，并创建新的元素。元素，它们的文本，以及它们的属性，都被认为是节点。

HTML DOM
HTML DOM 定义了访问和操作 HTML 文档的标准方法。

所有 HTML 元素可以通过 HTML DOM 来访问。

加载一个 XML 文件 - 跨浏览器实例
下面的实例把 XML 文档（“note.xml”）解析到 XML DOM 对象中，然后通过 JavaScript 提取一些信息：

实例：

<html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>

<script>
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","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>

</body>
</html>

注释：

如需从上面的 XML 文件（"note.xml"）的 <to> 元素中提取文本 "Tove"，语法是：
getElementsByTagName("to")[0].childNodes[0].nodeValue
请注意，即使 XML 文件只包含一个 <to> 元素，您仍然必须指定数组索引 [0]。这是因为 
getElementsByTagName() 方法返回一个数组。

加载一个 XML 字符串 - 跨浏览器实例
下面的实例把 XML 字符串解析到 XML DOM 对象中，然后通过 JavaScript 提取一些信息：

实例

<html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>

<script>
txt="<note>";
txt=txt+"<to>Tove</to>";
txt=txt+"<from>Jani</from>";
txt=txt+"<heading>Reminder</heading>";
txt=txt+"<body>Don't forget me this weekend!</body>";
txt=txt+"</note>";

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);
}

document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

在 HTML 页面中显示 XML 数据

在下面的实例中，我们打开一个 XML 文件（“cd_catalog.xml”），然后遍历每个 CD 元素，并显示HTML 表格中的 ARTIST 元素和 TITLE 元素的值：

实例

<html>
<body>

<script>
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;

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>

</body>
</html>

XML应用程序实例

基于 XML, HTML, XML DOM 和 JavaScript 构建的小型 XML 应用程序。

在 HTML div 元素中显示第一个 CD
下面的实例从第一个 CD 元素中获取 XML 数据，然后在 id=“showCD” 的 HTML 元素中显示数据。displayCD() 函数在页面加载时调用：

实例：

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;
}

添加导航脚本
为了向上面的实例添加导航（功能），需要创建 next() 和 previous() 两个函数：

实例：

function next()
{ // display the next CD, unless you are on the last CD
	if (i<x.length-1)
	{
		i++;
		displayCD();
	}
}

function previous()
{ // displays the previous CD, unless you are on the first CD
	if (i>0)
	{
		i--;
		displayCD();
	}
}

当点击 CD 时显示专辑信息
最后的实例展示如何在用户点击某个 CD 项目时显示专辑信息：

附：

cd catalog.xml

<!--  Edited by XMLSpy®  -->
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1999</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>Tupelo Honey</TITLE>
<ARTIST>Van Morrison</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1971</YEAR>
</CD>
<CD>
<TITLE>Soulsville</TITLE>
<ARTIST>Jorn Hoel</ARTIST>
<COUNTRY>Norway</COUNTRY>
<COMPANY>WEA</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Bridge of Spies</TITLE>
<ARTIST>T'Pau</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Pavarotti Gala Concert</TITLE>
<ARTIST>Luciano Pavarotti</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1991</YEAR>
</CD>
<CD>
<TITLE>The dock of the bay</TITLE>
<ARTIST>Otis Redding</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Picture book</TITLE>
<ARTIST>Simply Red</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>
奇迹IU
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ajax-day01.rar_达内开发学习笔记
09-20
综上所述，“ajax-day01”的学习笔记应该涵盖了Ajax的基本概念、XMLHttpRequest的使用、数据格式的选择、DOM操作、以及一些实践示例。通过深入学习这些内容，开发者可以开始构建自己的异步Web应用，提升用户体验。
你真的会使用XMLHttpRequest吗？
weixin_33885676的博客
01-17 3549
看到标题时，有些同学可能会想：“我已经用xhr成功地发过很多个Ajax请求了，对它的基本操作已经算挺熟练了。” 我之前的想法和你们一样，直到最近我使用xhr时踩了不少坑儿，我才突然发现其实自己并不够了解xhr，我知道的只是最最基本的使用。于是我决定好好地研究一番xhr的真面目，可拜读了不少博客后都不甚满意，于是我决定认真阅读一遍W3C的X...
如何让ActiveXObject( "Microsoft.XmlDom ")对象在非IE浏览器下显示数据？firefox（火狐）
热门推荐
机场信息系统研究员的专栏
09-10 6万+
在IE浏览器下，xmlDom对象一般这样被定义： var xmlDom= new ActiveXObject("Microsoft.XMLDOM");为了兼容Firefox，需要修改为： if (window.ActiveXObject){ var xmlDom=new ActiveXObject("Microsoft.XMLDOM"); } else{ if (documen
JS解析XML数据，ActiveXObject("Microsoft.XMLDOM")对象兼容IE和火狐
燃烧的舞步
10-23 8118
try{  if (window.ActiveXObject !== undefined){//兼容IE，注意IE11不能再用window.ActiveXObject或者document.all判断    var xmlDoc= new ActiveXObject("Microsoft.XMLDOM");    xmlDoc.async = "false";      xmlDoc.loa
火狐与IE兼容性总结(待整理，代码有点乱)
二南的程序人生
09-22 963
兼容性一直都是个令人头痛的问题，下面简单总结火狐与IE的兼容性问题。1. 超链接访问过后hover样式就不出现的问题     被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A "text/css">              a:link {}          a:visited {}      
使用XMLHttpRequest来获取xml文档
weixin_33994429的博客
08-05 542
使用XMLHttpRequest获取XML文档时候需要注意这个文档必须和自己在同一个域中，及同一个域名下或者同一个目录中，如果不是会出现拒绝访问错误。 语法格式：XMLHttpRequest.open(请求方式，请求文件的URL，同步方式)； 方法有3个参数： 请求方式：可以使GET,POST,HEAD中的一种； 请求文件的URL，直接用相对路径即可； 同步方式：表示请求发出后是等待回应...
day03_JavaScript预习笔记1
08-04
JavaScript是Web开发中不可或缺的一部分，它主要由三个组成部分构成：ECMAScript（核心语法）、DOM（文档对象模型）和BOM（浏览器对象模型）。在深入学习JavaScript之前，我们需要理解这些基本概念。 首先，...
Week09-Day02
04-01
2. AJAX：异步JavaScript和XML，现在更常指XMLHttpRequest，用于在后台与服务器交换数据，无需刷新整个页面。 3. ES6及以上版本的新特性：包括箭头函数、let和const、模板字符串、Promise和async/await等，这些都是...
XML DOM 解析器概述
Free雅轩的博客
02-26 212
大多数浏览器都内建了供读取和操作 XML 的 XML 解析器。解析器把 XML 转换为 JavaScript 可存取的对象（XML DOM）。 XML 解析器 XML DOM 包含了遍历 XML 树，访问、插入及删除节点的方法（函数）。 然而，在访问和操作 XML 文档之前，它必须加载到 XML DOM 对象。 XML 解析器读取 XML，并把它转换为 XML DOM 对象，这样才可以使用 JavaScript 访问它。 大多数浏览器有一个内建的 XML 解析器。 加载 XML 文档 下
XMLHttpRequest 详解
m0_48982503的博客
12-03 1万+
XMLHTTPRequest对象，顾名思义：是基于XML的HTTP请求。XMLHTTPRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。自从浏览器提供有了XMLHTTPRequest这个接口之后，ajax操作就此诞生
Ajax学习笔记，原生Ajax，使用XMLHttpRequest读取xml内容
你要悄悄的拔尖，然后惊艳所有人
08-04 589
allarea.xml文件 1 北京 2 上海 3 广州 AjaxOpXML.html文件 Ajaxxml var xmlHttp; function createXMLHTTP() { if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequ
javascript 解析ajax返回的xml和json格式的数据
bit-cafe
08-09 7880
写个例子，以备后用 一、JavaScript 解析返回的xml格式的数据： 1、javascript版本的ajax发送请求 （1）、创建XMLHttpRequest对象，这个对象就是ajax请求的核心，是ajax请求和响应的信息载体，单是不同浏览器创建方式不同 （2）、请求路径 （3）、使用open方法绑定发送请求 （4）、使用send() 方法发送请求 （5）、获取服务器返回的字符
一个 利用XMLHttpRequest解析XML例子
leapenemc的专栏
01-07 1645
 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("G
一些XMLHttpRequest的例子代码
w88529593的专栏
09-19 3387
以下例子摘录自：javascript权威指南 //异步请求(事件监听请求是否返回) function getText(url,callback){ var request = new XMLHttpRequest(); request.open('GET',url); request.onreadystatechange = function () { i
Ajax中XMLHttpRequest对象的详细解析
qd520_1314的博客
04-25 1104
| responseXML | 服务器的相应，表示为XML，这个对象可以解析为一个DOM | | status | 服务器的HTTP状态码 | | statusText | HTTP状态的对应文本 | [](()1.3.1 XMLHttpRequest属性的详细说明 属性： 即可以使用xhr.xx的当时调用或者进行设置 [](()1.readyState属性（响应状态） readyState属性表示请求/响应过程的当前活动阶段 当XMLHttpRequest对象将一个HTTP请求发送到服务器会经
JS之XMLHttpRequest返回数据解析
weixin_42949219的博客
12-28 6053
解析返回的 JSON 数据 服务器端返回的JSON 格式数据数据如下。 { user : "css8", pass : "123456", email : "css8@123.cn" } 然后在客户端执行下面的请求。把返回 JSON 字符串转换为对象，然后读取属性值。 <input name="submit" type="button" id="submit" value="向服务器发出请求" /> <script> window.onload = function ()
XML、XMLDOM、XMLHttpRequest 详解（一）
热爱思考、活力满满、开朗爱笑的年轻人
04-17 1063
背景知识 XML、XMLDOM 同步及异步 DOM2 中的 XML XPath IE中的 XPath W3C 下的 XPath XMLDOM、XMLHttpRequest 是 JavaScript 中比较核心比较重要的一些点，现在有很多成熟的库帮我们封装了这些功能，包括兼容性方便也做了处理，很方便我们使用，但是这些底层核心，我觉得还是很有必要学习了解一下。 背景知识...
XML DOM教程：解析、操作与实例
涵盖了XML的DOM相关知识，包括DOM首页、简介、节点、节点树、解析、加载、属性和方法、访问节点、节点信息、节点列表、遍历、浏览器兼容性、节点操作如获取、改变、删除、替换、创建和添加等，还提供了...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值