在HTML,JSP当中使用XML与XSL展示部分数据

最新推荐文章于 2019-11-14 18:22:16 发布
最新推荐文章于 2019-11-14 18:22:16 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： js及界面技术 文章标签： xsl xml html jsp stylesheet 文档

在HTML,JSP当中使用XML与XSL展示部分数据

 

需求分析：

通常项目当中有一些固化或不经常变化的内容，且这些内容通常是使用XML保存。

但在前台页面上需要使用到这些数据，而且有可能会将其中的内容做为网页的一部分用来展示给用户。通常的做法是使用JavaScript读取这个XML进行解释，然后再创建相应的HTML标签，并将内容插入相应的位置上。这种做法不但需要编写大量的JS，而且会影响页面加载速度。如果利用XML+XSL进行数据的格式转化，再利用JS动态加载XML与XSL，便可以很方便的获取所需的数据，而且调用不同的XSL，可以展示不同的格式。

所牵涉到的基本技术:

1:XML

2:XPATH

3:JavaScript

先看一个示例：

如图

 

 

Xml代码 复制代码
  1. <root>  
  2.     <!-- i_ID,n_名称,p_上一级ID,s_是否有下级  -->  
  3.     <a i="107" n="安徽省" p="0" s="false"/>  
  4.     <a i="93" n="北京市" p="0" s="false"/>  
  5.     <a i="103" n="北京市" p="93" s="false"/>  
  6.     <a i="77" n="长宁区" p="67" s="true"/>  
  7.     <a i="105" n="朝阳区" p="103" s="false"/>  
  8.     <a i="91" n="崇明县" p="67" s="true"/>  
  9.     <a i="89" n="奉贤区" p="67" s="true"/>  
  10.     <a i="108" n="福建省" p="0" s="false"/>  
  11.     <a i="109" n="甘肃省" p="0" s="false"/>  
  12.     <a i="110" n="广东省" p="0" s="false"/>  
  13.     <a i="101" n="广西区" p="0" s="false"/>  
  14.     <a i="111" n="贵州省" p="0" s="false"/>  
  15.     <a i="112" n="海南省" p="0" s="false"/>  
  16.     <a i="130" n="合肥市" p="107" s="false"/>  
  17.     <a i="113" n="河北省" p="0" s="false"/>  
  18.     <a i="114" n="河南省" p="0" s="false"/>  
  19.     <a i="102" n="黑龙江" p="0" s="false"/>  
  20.     <a i="80" n="虹口区" p="67" s="true"/>  
  21.     <a i="97" n="湖北省" p="0" s="false"/>  
  22.     <a i="96" n="湖南省" p="0" s="false"/>  
  23.     <a i="75" n="黄浦区" p="67" s="true"/>  
  24.     <a i="115" n="吉林省" p="0" s="false"/>  
  25.     <a i="85" n="嘉定区" p="67" s="true"/>  
  26.     <a i="116" n="江苏省" p="0" s="false"/>  
  27.     <a i="117" n="江西省" p="0" s="false"/>  
  28.     <a i="86" n="金山区" p="67" s="true"/>  
  29.     </root>  <!-- 演示数据，与图片所示有所不同-->   

 

 

以上是一个地区的XML文档，其中包含了三级省市区数据，通过属性"p"来寻找上一级，如果p=0，则代表当值数据为省份（顶级）

 

 

 

 

Xml代码 复制代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2.         <!--定义当前XML文档为xsl格式-->  
  3. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">  
  4.     <!--math表示匹配当前XML所有内容，也可以指定具体的某些值，取值方式参考XPATH语法-->  
  5. <xsl:template match="/">  
  6.     <!--在此可以编写HTML代码-->  
  7.     <h2>地区下拉表</h2>  
  8.     <div>  
  9.         <div>省市：</div>  
  10.         <div>  
  11.             <select>  
  12.                 <!--读取root下所有属性p=0的a标签，进行循环-->  
  13.                 <xsl:for-each select="root/a[@p='0']">  
  14.                     <!--对于需要给HTML标签赋值时，只能使用{}来取值，   
  15.                         不可以使用<xsl:value-of>的形式取值。这里取的是当前标签的i属性的值，   
  16.                         因为是在循环里，所以每次取值都不同-->  
  17.                     <option value="{@i}">  
  18.                         <!--如果是在HTML内，或外面赋值，则只能使用<xsl:value-of>的形式取值，   
  19.                         这里取的是当前标签的n属性的值-->  
  20.                         <xsl:value-of select="@n"/>  
  21.                     </option>  
  22.                 </xsl:for-each>  
  23.             </select>  
  24.         </div>  
  25.     </div>  
  26. </xsl:template>  
  27. </xsl:stylesheet>  
  28.       

 

 

 

三、在准备好了XML,XSL之后，剩下的事就是如何在页面上根据需要调用此XML文档来显示了，这里我们需要使用JS来加载XML与XSL并对其进行解析。由于IE与FF解析XML与XSL的方法及加载XML的方法不同，所以这里采用jquery框架进行判断，也可以自行写相关的方法以区别IE/FF的不同。

用到的两个最主要的方法

1：load(xmlPath) 所有方法都有部分代码基于jquery

 

Js代码 复制代码
  1. //兼容大部分浏览器  读取外部XML文档返回xmlDoc对象   
  2. function load(x) {   
  3.     var xmlDoc;   
  4.     if ($.browser.msie) {   
  5.         xmlDoc = new ActiveXObject("Microsoft.XMLDOM");   
  6.         xmlDoc.async = false;   
  7.         xmlDoc.load(x);   
  8.         return xmlDoc;   
  9.     } else if ($.browser.safari) {   
  10.         xmlDoc = getxml(x).responseXML;   
  11.         return xmlDoc;   
  12.     } else if ($.browser.mozilla) {   
  13.         xmlDoc = document.implementation.createDocument('', '', null);   
  14.         xmlDoc.async = false;   
  15.         xmlDoc.load(x);   
  16.         return xmlDoc;   
  17.     } else {   
  18.         xmlDoc = getxml(x).responseXML;   
  19.         return xmlDoc;   
  20.     }   
  21. }   
  22.   
  23. //供load方法调用   
  24. function getXmlHttp() {   
  25.     var xmlhttp;   
  26.     if (window.ActiveXObject) {   
  27.         try {   
  28.             xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");   
  29.         }   
  30.         catch (e) {   
  31.             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   
  32.         }   
  33.         return xmlhttp;   
  34.     } else if (window.XMLHttpRequest) {   
  35.         xmlhttp = new XMLHttpRequest();   
  36.         return xmlhttp;   
  37.     }   
  38.     return xmlhttp;   
  39. }   
  40. //供load方法调用   
  41. function getxml(x) {   
  42.     var xmlhttp = getXmlHttp();   
  43.     if (xmlhttp != null) {   
  44.         xmlhttp.open("GET", x, false);   
  45.         xmlhttp.send(null);   
  46.         return(xmlhttp);   
  47.     } else {   
  48.         alert("对不起,您的浏览器不支持 XMLHTTP.11");   
  49.         return false;   
  50.     }   
  51. }     

2：showXML() 在网页上显示XML内容，并使用相应的XSL进行解析

<!--EndFragment-->

Js代码 复制代码
  1. /**  
  2.  * 加载XML及对应的XSL文档，直接在页面上进行显示  
  3.  * @param xml XML路径  
  4.  * @param xsl XML样式文件  
  5.  */  
  6. function showXML(xml, xsl) {   
  7.     // Load XML 这里的load方法调用的是上面的laod方法   
  8.     var xmlDoc = load(xml);   
  9.     // Load XSL   
  10.     var xslDoc = load(xsl);   
  11.     // 如果是非IE浏览器，则对解析器进行重写   
  12.     if (!$.browser.msie) {   
  13.         Node.prototype.transformNode = function (oXslDom) {   
  14.             var oProcessor = new XSLTProcessor();   
  15.             oProcessor.importStylesheet(oXslDom);   
  16.             var oResultDom = oProcessor.transformToDocument(this);   
  17.             var xmls = new XMLSerializer();   
  18.             var sResult = xmls.serializeToString(oResultDom);   
  19.             if (sResult.indexOf(" <transformiix:result") > -1) {   
  20.                 sResult = sResult.substring(sResult.indexOf(">") + 1, sResult.lastIndexOf(" <"));   
  21.             }   
  22.             return sResult;   
  23.         };   
  24.     }   
  25.     document.write(xmlDoc.transformNode(xslDoc));   
  26. }     

  

 

四、到此所有准备工作已完成，可以开始编写 HTML代码，当前你也可以将这此内容放入其它的页面当中如JSP/ASP

 

<!--EndFragment-->

 

Html代码 复制代码
  1. <html>  
  2.   <head>  
  3.       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  4.       <title>Simple jsp page</title></head>  
  5.   <script type="text/javascript" src="/js/serv/comm/jquery.js"></script>  
  6.   //这个JS包含有上面的laod等方法   
  7.   <script type="text/javascript" src="/js/public/comm.js"></script>  
  8.   
  9.   <body>  
  10.     <script type="text/javascript">  
  11.                showXML("/x/comm/area.xml","/test/xml/area.xsl");   
  12.     </script>  
  13.   </body>  
  14.   
  15. </html>     
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>Simple jsp page</title></head>
  <script type="text/javascript" src="/js/serv/comm/jquery.js"></script>
  //这个JS包含有上面的laod等方法
  <script type="text/javascript" src="/js/public/comm.js"></script>

  <body>
    <script type="text/javascript">
               showXML("/x/comm/area.xml","/test/xml/area.xsl");
    </script>
  </body>

</html>

 

<!--EndFragment-->

<!--EndFragment-->

 

以下附件为整个文章涉及到的内容，但不能直接在本地打开浏览，原因是load方法不能直接读取本地文件，需要部署到项目当中。

有问题或有好的建议，欢迎大家一起探讨

<!--EndFragment-->

<!--EndFragment-->

<!--EndFragment-->

二、XSL文档

 

这是一个使用XML+XSL生成的地区下拉列表。

整个演示所需文档如下：

 

一、地区信息来自XML文档

 Area.xml 

doymm2008
关注
专栏目录
XML、XML Schema及XSL的应用——信息组织实验报告
oneJiu的博客
01-08 561
信息组织实验：使用XML spy2011实现对XML、XML Schema及XSL的简单应用。
通过xsl解析xml(具体为TEI)生成html
HelloWorld!
04-22 563
xml地址 https://www.oldbaileyonline.org/browse.jsp?foo=bar&path=sessionsPapers/17701024.xml&div=t17701024-22&xml=yes TEI文档地址 https://tei-c.org/release/doc/tei-p5-exemplars/html/tei_lite.doc.html#U5-ptrs 使用xml和xsl生成html（java实现） import org.apache
jsp生成xml文件示例
ajwh64482的博客
09-21 179
<％@ page contentType="text/html; charset=gb2312" ％><％@ page language="java"％><％@ page info="database handler"％><％@ page import="java.io.*"％><％@ page import="java.lang.*...
利用xml+xsl快速生成大量JSP的常用代码的方法.
远超的blog
04-10 589
利用xml+xsl快速生成大量JSP的常用代码的方法. 参考Jbuilder的Servlet向导来使用xml+xsl产生JSP的常用代码。xml样本: http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="jspsrcgen.xsd">   rloginusername  log
xml通过xsl在jsp页面上展示
qq_35881150的博客
11-14 378
xml通过xsl在jsp页面上展示 第一次接触xsl，还是很简单易用的 xml格式 <?xml version="1.0" encoding="utf-8"?> <Case> <CaseID></CaseID> <TrademarkName></TrademarkName> <ColorProtection...
在JSP中处理XML
D调的华丽
06-14 1551
在JSP中处理XML 在使用JSP处理XML之前，您需要将与XML 和XPath相关的两个库文件放在\lib目录下： XercesImpl.jar：在这下载http://www.apache.org/dist/xerces/j/ xalan.jar：在这下载http://xml.apache.org/xalan-j/index.html 还需要这个xml-apis.
jsp能展示的文本格式（xml,jon.....）
weixin_33725270的博客
10-30 242
1.xml<%@ page language="java" pageEncoding="UTF-8" contentType="text/xml; charset=utf-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><?xml version="1.0" e...
XSL.rar_ XML-JSP_.CHM_XML chm_xml xsl_xsl
最新发布
09-23
在Web开发领域，XSL与XML和JSP的结合使用，能够实现动态数据的高效处理和展现。 XML（Extensible Markup Language）是一种标记语言，用于存储和传输结构化数据。它的设计目标是传输和存储数据，而非显示数据。XML...
JSP+XML构架网站的实例
01-08
XML（可扩展标记语言）看起来可能像某种W3C标准——现在没有什么实际影响，即使以后能派上用场，也是很久以后的事。但实际上，它现在已经得到了应用。... 标准化 在使用XML之前，建立与你要使用的信息不
jsp+xml的一个小demo
06-22
总结来说，JSP和XML的结合使得开发者可以在JSP页面中处理和展示XML数据，同时利用XML的结构化特性进行数据的组织和交换。这种组合在构建动态、数据驱动的Web应用时非常有用，尤其在需要与Web服务交互或处理结构化...
使用XSL样式表来显示XML文件
08-25 1631
在本章中，你将学习本书中所介绍在微软Internet Explorer 5 浏览器中显示XML 文件的最后方法：以延伸样式表语言撰写的样式表。就像在第七章中介绍过的串接样式表（CSS），XSL 样式表被链接至XML 文件，并告诉浏览器如何显示XML 资料，让你可以直接在浏览器中开
JSP语法的xml写法
xinguangduan
12-13 195
大家总是不喜欢看到&lt;%和%&gt;在jsp页面上，其实我们可以使用比较优雅的xml方式来表达 1，隐含的注释 JSP语法：&lt;%-- 内容 --%&gt; XML语法：无 2，变量或函数的声明 JSP语法:&lt;%! declaration;[declaration;]+... %&gt; 例如： &lt;%! int i=0;int a,b,c; Color ...
JSP+XML 论坛
bnuchampion的专栏
04-13 606
 系统简介：1、JSP展示层 XML充当数据库2、使用了多层设计3、面向接口4、分页显示//业务层，实现在ServiceImpl类中package com.tang.service;import com.tang.domain.Message;import com.tang.domain.User;public interface Service ...{    public Mess
使用xsl格式化显示xml,将xml显示在html中
iailp47的博客
07-16 2614
User.xml --> 2015-07-14 11:39:31.63 13570271006 二之国 172.20.16.156 2015-03-25 18:21:39.133 2015-07-14 11:39:31.63 6008000014868
JSP生成XML的方式
血色残阳的专栏
04-25 782
JSP生成XML可以通过两种方式：1。用out.println()方法写XML2。把JSP包含到XML文件中
XML数据在Javascript,HTML中使用
极客神殿
07-25 2358
cd_catalog.xml<?xml version="1.0" encoding="UTF-8"?> <CATALOG> <CD> <TITLE>帝国暴风雪</TITLE> <ARTIST> Bob Dylan </ARTIST> <COUNTRY> USA </COUNTRY> <COMPANY>哥伦比亚</COMPANY> <PRICE> 10.90 </PRICE> <YEAR> 1985
Jsp结合XML XSLT输出
alerx的专栏
03-15 866
我们知道  XML+XSLT就可以直接输出到支持XML的浏览器上,如IE  5.0以上,但是,我们还要考虑到有不少浏览器不直接支持XML,在这种情况下,我们需要在服务器上进行转换成html输出到浏览器,这种临时过渡办法恐怕要在一段时间内一直要使用.使用Jsp  加上tablib标识库,我们可以完成这种转换。著名open  source项目组jakarta.apache.org推出的系列标识库中，就
关于springmvc框架的web工程，从.xml到.java再到.jsp显示到网页上的过程，以及jsp静态文件的访问
swebin的专栏
10-06 4234
关于springmvc框架的web工程，从.xml到.java再到.jsp显示到网页上的过程，以及jsp静态文件的访问
何不试试使用xsl＋jsp＋xml＋taglibs来实现web显示层！
shengbox的专栏
04-11 888
目前大多数使用j2ee开发B/S结构的方案，在显示层大多使用的是jsp，具体点就就是java代码内嵌html页面的实现!对于这里的jsp，他的主要功能还是为了在页面显示后台生成的有用数据，这样做最大的问题就是页面和代码的混乱，致使美工无从下手，程序员维护起来也是苦不堪言，做jsp的兄弟一定很清楚！目前解决此方法的手段最主要就是靠jsp的taglibs（jsp扩展标记库），它的主要功能就是把jsp中
使用XML和XSLT实现客户端数据分页与排序
"本文主要介绍了如何使用XML、XSLT和XPath在客户端实现可排序、分页的数据展示，以此解决Web开发中的复杂问题。通过这种方式，可以减轻服务器负担，提高用户体验，同时使得代码复用性增强。" 在Web开发中，处理大量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值