Ajax调用.XML文件以表格形式显示的小Demo

最新推荐文章于 2019-08-16 14:20:00 发布
最新推荐文章于 2019-08-16 14:20:00 发布
阅读量844 收藏 1
点赞数
分类专栏： Ajax 文章标签： ajax xmlhttprequest encoding firefox html opera
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangqinhappy/article/details/6764291
版权

Ajax调用.XML文件以表格形式显示的小Demo

名为AjaxDemo.html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr>";
      xx=x[i].getElementsByTagName("TITLE");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      xx=x[i].getElementsByTagName("ARTIST");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>


</head>
<body>


<div id="txtCDInfo">
<button οnclick="loadXMLDoc('cd_catalog.xml')">获得 CD 信息</button>
</div>


</body>
</html>


名为cd_catalog.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<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>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>





                

        

        

    




    

      

        

            

              
                
                  zhangqinhappy
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
AJAX实现读取本地文本文档内容并展示在网页上

				
			

			

				

					05-05
				

			

		

		

			
				
使用AJAX技术来实现读取本地文本文档内容，然后将读取到的内容显示在网页上

			
		

	



                

              
                



	

		

			

				
					
Ajax读取数据到表格的实现代码

				
			

			

				

					12-11
				

			

		

		

			
				
今天我们要讲的是：使用Ajax无刷新技术读取服务端多条数据，并将返回的数据显示到一个表格内．同时我还将展示，如何使用JavaScript脚本和Dom接口，来为网页创建一个表格 ．将ajax请求的数据显示到该表格内． 本次的ajax实例效果中请求的服务端网页依然是：Web_ajax.Asp　该网页使用了Asp输出xml技术．如果你还不知道如何使用Asp输出xml请返回：＂ajax开始准备篇＂ 提醒：在每篇ajax教程的实例开始之前，你必须查看当天的Web_ajax.asp文件中的数据结构．因为我们每次实例中要读取的标签和内容都不一样．点击：查看Web_ajax.Asp  代码如下: <% ‘出自

			
		

	



                


  
              

                


	

		

			

				
					
AJAX编程技巧：在页面上中如何将受到的xml文件显示为表格的形式？

				
			

			

				

					君子藏器于身，待时而动
				

				

					07-01
					
					653
					
				

			

		

		

			
				
假如我们接收到了如下格式的文件，希望用表格的形式在页面上展示：












首先，在页面上定义好准备显示数据的表格，





注意：tbody是必须的，否则就不能使用许多js表格方法。


在js中，使用下面的方法，就可以显示数据了：
function listAllData(){
var xmlDoc=xmlHttp.response

			
		

	





	

		

			

				
					
用AJAX异步交互返回xml文件从jsp页面中读取并用表格显示

				
			

			

				

					yaasshole
				

				

					02-24
					
					198
					
				

			

		

		

			
				
用AJAX异步交互返回xml文件从jsp页面中读取并用表格显示

 用ajax的异步交互去获取用hibernate的技术得到的数据库中的值并且用xml的形式返回jsp页面，用dom元素读取并用表格的形式显示
这里需要注意的是hibernate的搭建，我在搭建hibernate的时候得到一个结论，在MyEclipse8.6和MyEclipse9.0中使用的hibernate.cfg.xml中的...

			
		

	



		

			
		



	

		

			

				
					
jquery利用ajax调用后台方法实例

				
			

			

				

					12-08
				

			

		

		

			
				
标题：“jquery利用ajax调用后台方法实例”  这个标题表明我们将讨论一个使用jQuery的Ajax功能与后台交互的实际示例。Ajax（Asynchronous JavaScript and XML）允许我们在不刷新整个页面的情况下，向服务器发送请求...

			
		

	





	

		

			

				
					
ajax上传文件图片的demo

				
			

			

				

					03-15
				

			

		

		

			
				
在现代Web应用中，AJAX（Asynchronous JavaScript and XML）技术常常被用来实现无刷新页面交互，提升用户体验。本教程将深入讲解如何使用AJAX进行文件和图片的上传，包括前端与后端的完整实现，并结合一个完美示例...

			
		

	





	

		

			

				
					
AjaxDemo.zip

				
			

			

				

					04-21
				

			

		

		

			
				
**AjaxDemo.zip** 是一个包含有关在 **Asp .Net Core** 框架中使用 **AJAX** 技术的示例项目。这个压缩包提供了深入理解如何在实际开发中利用 AJAX 进行无刷新页面更新的实例。以下是关于这个主题的详细解释：  **一...

			
		

	





	

		

			

				
					
ajax.dll以及说明文档和demo

				
			

			

				

					02-23
				

			

		

		

			
				
**Ajax.dll：异步JavaScript与XML技术的封装**  Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在Web开发中，它极大地提升了用户体验，因为用户不再需要...

			
		

	





	

		

			

				
					
Ajax_ASP.zip_DEMO

					
最新发布

				
			

			

				

					09-23
				

			

		

		

			
				
**Ajax_ASP.zip_DEMO** 是一个以ASP（Active Server Pages）技术为基础，结合Ajax（Asynchronous JavaScript and XML）的示例项目。这个压缩包包含了用于演示如何在ASP环境中实现异步数据交互和页面无刷新更新的技术...

			
		

	





	

		

			

				
					
Ajax简单的请求数据以表格的形式渲染到页面

				
			

			

				

					weixin_30652897的博客
				

				

					08-16
					
					1107
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>长安汽车</title>
        &l...

			
		

	





	

		

			

				
					
Ajax 从XML到生成表格

				
			

			

				

					jmen6的专栏
				

				

					01-06
					
					451
					
				

			

		

		

			
				
  Dynamically Editing Page Contentvar xmlHttp;function createXMLHttpRequest() {    if (window.ActiveXObject) {        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    }     else if (window.XMLHt

			
		

	





	

		

			

				
					
如何把 XML 文件显示为 HTML 表格

				
			

			

				

					技术资料收集站
				

				

					02-10
					
					3837
					
				

			

		

		

			
				
var xmlhttp;

function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Mozilla, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// 

			
		

	





	

		

			

				
					
xmlHttpRequest 以Post方式发数据到Asp.net页,在gb2312编码下的解决办法

				
			

			

				

					WDFrog的专栏
				

				

					10-21
					
					916
					
				

			

		

		

			
				
    首先xmlHttpRequest 使用Post时,需要对数据进行编码,在客户端一般使用js中的encodeURIComponent 在web.config中指定了gb2312编码后,在aspx页面中如果直接使用 Request[xxx]那么结果将会出现乱码,原

			
		

	





	

		

			

				
					
ajax异步获取数据后动态向表格中添加数据(行)

				
			

			

				

					Glory_mm的博客
				

				

					08-16
					
					2723
					
				

			

		

		

			
				
因为某些原因，项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面，网上找了半天都没有 看到现成的，决定自己写个例子


1、HTML页面





[html] view
 plain copy


 print?



>  
html>  
head>  
    meta charset="utf-8">  
    title

			
		

	





	

		

			

				
					
ajax技术的入门.docx

				
			

			

				

					09-15
				

			

		

		

			
				
掌握AJAX之前，你需要了解XML（可扩展标记语言）的基础知识，以及JavaScript编程，因为AJAX主要依赖于JavaScript来实现异步通信。  **AJAX的优势** 1. **页面部分更新**：AJAX可以仅更新页面的一部分，而不是整个...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值