📄 xsl_client.asp
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XSLT on the Client</title>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="xml,tutorial,html,dhtml,css,xsl,xhtml,javascript,asp,ado,vbscript,dom,sql,colors,soap,php,authoring,programming,training,learning,beginner's guide,primer,lessons,school,howto,reference,examples,samples,source code,tags,demos,tips,links,FAQ,tag list,forms,frames,color table,w3c,cascading style sheets,active server pages,dynamic html,internet,database,development,Web building,Webmaster,html guide" />
<meta name="Description" content="Free HTML XHTML CSS JavaScript DHTML XML DOM XSL XSLT RSS AJAX ASP ADO PHP SQL tutorials, references, examples for web building." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<link rel="stylesheet" type="text/css" href="../stdtheme.css" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "../../https@ssl./default.htm" : "../../www./default.htm");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3855518-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</head>
<body>
<a name="top"></a>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#808080">
<tr>
<td width="234" valign="top">
<a href="../default.htm"><img src="../images/w3default80.jpg" border="0" alt="W3Schools" /></a>
</td>
<th valign="middle" align="left" class="right">
<iframe style="background-color:#808080" src="../banners/bannerframe.asp@adpartner=xmlspy" height="90" width="728"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
<br /></th>
</tr>
</table>
<table style="margin-left:1px" width="800px" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="137" class="content" valign="top"><br />
<a class="left" href="../default.asp" target="_top">
<img src="../images/homeicon.gif" border="0" alt="home" /></a>
<a class="left" href="../default.asp" target="_top">
<b>HOME</b></a>
<br /><br />
<b>XSLT Basic</b><br />
<a class="left" target="_top" href="default.asp" >XSLT HOME</a><br />
<a class="left" target="_top" href="xsl_languages.asp" >XSL Languages</a><br />
<a class="left" target="_top" href="xsl_intro.asp" >XSLT Introduction</a><br />
<a class="left" target="_top" href="xsl_browsers.asp" >XSLT Browsers</a><br />
<a class="left" target="_top" href="xsl_transformation.asp" >XSLT Transform</a><br />
<a class="left" target="_top" href="xsl_templates.asp" >XSLT <template></a><br />
<a class="left" target="_top" href="xsl_value_of.asp" >XSLT <value-of></a><br />
<a class="left" target="_top" href="xsl_for_each.asp" >XSLT <for-each></a><br />
<a class="left" target="_top" href="xsl_sort.asp" >XSLT <sort></a><br />
<a class="left" target="_top" href="xsl_if.asp" >XSLT <if></a><br />
<a class="left" target="_top" href="xsl_choose.asp" >XSLT <choose></a><br />
<a class="left" target="_top" href="xsl_apply_templates.asp" >XSLT Apply</a><br />
<br />
<b>XSLT Advanced</b><br />
<a class="left" target="_top" href="xsl_client.asp" style='font-weight:bold;'>XSLT on the Client</a><br />
<a class="left" target="_top" href="xsl_server.asp" >XSLT on the Server</a><br />
<a class="left" target="_top" href="xsl_editxml.asp" >XSLT Edit XML</a><br />
<a class="left" target="_top" href="xsl_editors.asp" >XSLT Editors</a><br />
<a class="left" target="_top" href="xsl_summary.asp" >XSLT Summary</a><br />
<br />
<b>References</b><br />
<a class="left" target="_top" href="xsl_w3celementref.asp" >XSLT Elements</a><br />
<a class="left" target="_top" href="xsl_functions.asp" >XSLT Functions</a><br /><br />
<b>Selected Reading</b><br />
<a class="left" target="_top" href="../browsers/browsers_stats.asp">Web Statistics</a><br />
<a class="left" target="_top" href="../site/site_glossary.asp">Web Glossary</a><br />
<a class="left" target="_top" href="../hosting/default.asp">Web Hosting</a><br />
<a class="left" target="_top" href="../quality/default.asp">Web Quality</a><br /><br />
<a class="left" target="_top" href="../forum/default.asp">W3Schools Forum</a><br /><br />
<a class="left" target="_top" href="../about/about_helping.asp">Helping W3Schools</a><br /><br />
<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*LeftLinkUnit*/
google_ad_slot = "4854527104";
google_ad_width = 120;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
<td valign="top">
<table style="border: 1px solid gray" width="100%" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="0">
<tr>
<td>
<h1>XSLT - On the Client</h1>
<a href="xsl_apply_templates.asp"><img border="0" src="../images/btn_previous.gif" alt="prev" width="100" height="20" /></a>
<a href="xsl_server.asp"><img border="0" src="../images/btn_next.gif" alt="next" width="100" height="20" /></a>
<hr />
<p class="intro">If your browser supports it, XSLT can be used to transform the document to
XHTML in your browser.</p>
<hr />
<h2>A JavaScript Solution</h2>
In the previous chapters we have explained how XSLT can be used to transform a document
from XML to XHTML. We did this by adding an XSL style sheet to the XML
file and let the browser do the transformation.<p>Even if this works fine, it is not always desirable to include a style sheet reference in
an
XML file (e.g. it will not work in a non XSLT aware browser.)</p>
<p>A more versatile solution would be to use a JavaScript to do the transformation.</p>
<p>By using a JavaScript, we can:</p>
<ul>
<li>do browser-specific testing</li>
<li>use different style sheets according to browser and user
needs</li>
</ul>
<p>That is the beauty of XSLT! One of the design goals for XSLT was to make it
possible to transform data from one format to another, supporting different
browsers and different user needs.</p>
<p>XSLT transformation on the client side is bound to be a major part of the
browsers work tasks in the future, as we will see a growth in the specialized
browser market (Braille, aural browsers, Web printers, handheld devices, etc.)
</p>
<hr />
<h2>The XML File and the XSL File</h2>
<p>Look at the XML document that you have seen in the previous chapters:</p>
<table width="100%" border="1" class="ex" cellspacing="0">
<tr>
<td>
<pre><?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>
.
.
.
</catalog></pre>
</td>
</tr>
</table>
<p><a target="_blank" href="cdcatalog.xml">View the XML file</a>.</p>
<p>And the accompanying XSL style sheet:</p>
<table width="100%" border="1" class="ex" cellspacing="0">
<tr>
<td>
<pre><?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"></pre>
<pre><xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th align="left">Title</th>
<th align="left">Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title" /></td>
<td><xsl:value-of select="artist" /></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template></pre>
<pre></xsl:stylesheet></pre>
</td>
</tr>
</table>
<p><a target="_blank" href="cdcatalog.xsl">View the XSL file</a>.</p>
<p><b>Notice that the XML file does not have a reference to the XSL file.</b></p>
<p><b>IMPORTANT:</b> The above sentence indicates that an XML file could be
transformed using many different XSL style sheets.</p>
<hr />
<h2>Transforming XML to XHTML in the Browser</h2>
<p>Here is the source code needed to transform the XML file to XHTML on the
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -