使用AJAX从XML文件中获取信息

最新推荐文章于 2021-08-06 09:20:52 发布
最新推荐文章于 2021-08-06 09:20:52 发布
阅读量328 收藏 1
点赞数

AJAX XML HTTP请求 动态更新 数据解析
关键词由CSDN通过智能技术生成

Ajax访问XML案例

AJAX可用于与XML文件进行交互通信。
使用AJAX从XML文件中获取信息：

<!DOCTYPE html>
<html>
<style>
table,th,td{
border:1px solid black;
border-collapse:collapse;
}
</style>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body onload="loadXmlHttp()">
	
	<button id="myBtn">submit</button>
	<table style="border: 1px solid; width: 300px; height: 200px; padding: 20px; margin: 20px;"
		id="demo"></table>
</body>

<script>
	var xmlHttpObj;//global var

	function loadXmlHttp() {

		if (window.XMLHttpRequest) {

			xmlHttpObj = new XMLHttpRequest();
		} else {

			xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
		}

	}
	
	document.getElementById("myBtn").addEventListener("click",function(){loadAjax()});
	
	function loadAjax(){
		
		var tablemodel=	document.getElementById("demo");
		
		var nodes=tablemodel.childNodes;
		
if(nodes.length==0)
	{
	xmlHttpObj.open("GET","catalog.xml",true);
	xmlHttpObj.send();
	
	xmlHttpObj.onreadystatechange=function(){

		
	if(this.readyState==4&&this.status==200)
		{
		
		var table=document.getElementById("demo").innerHTML="<tr><th>Artist</th><th>Title</th><tr>";
		
		var xmlDoc=this.responseXML;
		var x=xmlDoc.getElementsByTagName("CD");
		for(var i=0;i<x.length;i++)
			{
			
			var title=x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
			var artist=x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;				
			
			table+="<tr><td>"+artist+"</td><td>"+title+"</td></tr>";
			
			}
		document.getElementById("demo").innerHTML=table;
		
		}
		
	}
	
	}else
		{
		document.getElementById("demo").innerHTML="";
		
		}
		
	}

</script>
</html>

catalog.xml

<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>Stax Records</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1968</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>
freedom_zdh
关注
用Ajax读取xml文件的简单例子
10-30
Ajax的原理很简单，就是在客户端创建一个XMLHttpRequest对象（用来与服务器进行异步通信，这就是Ajax的核心，其实我们早就在用异步通信了，只是没把这项技术用在网页设计中而已），为该对象的onreadystatechange 属性添加一个事件，当对象的readyState改变的时候就会引发指定的事件。
ajax方法读取xml文件数据
速冻的博客
12-03 229
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &...
ajax读取xml内容方法,JS通过ajax动态读取xml文件内容的方法
weixin_42508905的博客
08-06 379
这篇文章主要介绍了JS通过ajax动态读取xml文件内容的方法,实例分析了Ajax操作XML文件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了JS通过ajax动态读取xml文件内容的方法。分享给大家供大家参考。具体分析如下：下面的JS代码读取note.xml文件，并填充显示相关字段HTML文件代码如下function loadXMLDoc(url){var xmlhttp;if ...
Ajax读取XML数据
青椒盖饭的博客
01-08 1699
最早的Ajax推出的时候实际上只给出了两类数据 文本数据:最初只是虚妄简单的返回一些处理标记(后来功能得到了扩充) XML数据:是为了携带更多的数据返回, 假设有如下的XML数据 &lt;?xml version="1.0" encoding="utf-8" standalone="no"?&gt; &lt;shop&gt; &lt;book id="1"&gt;
JS使用ajax方法获取指定url的head信息中指定字段值的方法
10-24
JavaScript中使用Ajax方法获取指定URL的head信息中指定字段值的方法涉及的技术知识点十分丰富，包含JavaScript编程、Ajax技术、HTTP协议等。以下将对这些知识点进行详细阐述。 ### JavaScript编程基础 JavaScript...
ajax获取服务器以xml形式输出省市数据，并获取数据绑定前台下拉框和实现联动
04-22
在本示例中，我们关注的是如何利用Ajax从服务器获取以XML（Extensible Markup Language）格式的数据，然后将这些数据绑定到前端的下拉框中，以及实现下拉框之间的联动效果。下面我们将详细探讨这一过程。 首先，XML...
JS通过ajax动态读取xml文件内容的方法
10-24
本篇将详细解析如何使用JavaScript通过AJAX动态读取XML文件内容。 首先，我们需要理解AJAX的工作原理。AJAX的核心是XMLHttpRequest对象，它允许JavaScript在后台与服务器进行通信。当用户触发某个事件（如点击按钮...
Ajax对xml信息的接收和处理操作实例分析
10-16
要使用Ajax获取并处理这个XML文件，首先需要创建一个新的XMLHttpRequest对象，这是Ajax的核心组成部分，负责异步通信。以下是一个简单的Ajax请求示例： ```javascript var xhr = new XMLHttpRequest(); xhr....
php+ajax+xml.rar_ajax php 无刷新_ajax xml_php xml_php 例子_xml
09-19
标题中的"php+ajax+xml.rar_ajax php 无刷新_ajax xml_php xml_php 例子_xml"揭示了这个压缩包文件包含的内容是关于使用PHP、AJAX和XML技术实现的一个无刷新交互示例。这个组合通常用于创建动态网页，提供用户友好...
JS使用ajax从xml文件动态获取数据显示的方法
10-24
主要介绍了JS使用ajax从xml文件动态获取数据显示的方法,实例分析了javascript使用Ajax技术操作XML文件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
ajax读取xml文件
xwchen的专栏
09-03 783
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Ajax Hello World var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } els
使用Ajax读取并解析XML文件的方法
AAAAAdmin的博客
04-01 631
Ajax读取并解析XML文件的方法 html文件和xml文件都需要放在服务器上，本文实例讲述了jQuery+ajax读取并解析XML文件的方法。 代码： <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <script ty...
ajax 文件数据流,Ajax如何读取数据流中的xml文件？
weixin_39973196的博客
08-06 424
Ajax如何读取数据流中的xml文件？这是我的源代码，请大家帮忙看看，我读到的怎么都是空值。是不是方法错了？var xmlHttp;function createXMLHttpRequest(){if(window.ActiveXObject){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}else if(window.XMLHttpRequest...
Ajax读取xml出错,用Ajax读取xml文件的简单例子
weixin_42315569的博客
08-05 176
到此就可以就发送请求读取服务器端的XML数据了，最后要做的就是处理数据了。关于XMLHttpRequest对象，请参考AboutXMLHttpRequestObject一文。看例子：//AjaxDemo.htmlhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml...
AJAX详解，涉及到XML中部分，适合初学者
Navie的博客
03-04 260
AJAX语法 AJAX简介 用于创建快速动态网页的技术，可以在不重新加载整个网页的情况下，对网页的某部分进行更新 AJAX = 异步 JavaScript 和 XML。 XMLHttpRequest 对象 (异步的与服务器交换数据) JavaScript/DOM (信息显示/交互) CSS (给数据定义样式) XML (作为转换数据的格式) 一个简单实例 <head> &l...
Ajax读取XML文件
天涯~的博客
03-07 830
当用户点击“获得 CD 信息”这个按钮时，就会执行 loadXMLDoc() 函数。 loadXMLDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并将请求发送到服务器。 当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用已经填充了 XML 数据的 HTML 表格来更新 txtCDInfo 占位符：
Ajax，读取服务器XML格式数据
水神
08-17 580
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> My JSP 'showEmp.jsp' start
使用AJAX操作XML实现数据展示
本资源主要介绍如何使用AJAX与XML进行交互，展示了一个从XML文件读取数据并将其转化为HTML格式显示的实例。 在AJAX技术中，XML（Extensible Markup Language）是一种常用的数据交换格式，它允许结构化数据的表示，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值