js|xml| asynchronous 1. Create a new VS2003 Web project, named Xmltest
2. Delete all the contents of the WebForm1.aspx in the engineering catalogue, leaving only one statement at the top:
<%@ Page language= "C #" codebehind= "WebForm1.aspx.cs" autoeventwireup= "false" inherits= "Xmltest.webform1"%>
3. Modify the contents of the WebForm1.aspx.cs and add in Page_Load:
XmlDocument doc=new XmlDocument ();
String xmlfile=string. Empty;
xmlfile=context.request.physicalapplicationpath+ (request.querystring["sel"). ToString () = = "xml"? \\hello.xml ":" \\hello.xsl ");
Doc. Load (xmlfile);
Response.Write (Doc. INNERXML);
4. Under the project root directory new test.htm, and set as the project homepage:
<title></title>
<body>
<div id= "Restree" ></div>
<font face= "Arial" ></font><input type= "button" value= "Execute" ><BR>
<script language= "JScript" >
var srctree,xslttree,xt;
var http_request = false;
function GetXml ()
{
Srctree = new ActiveXObject ("Msxml2.freethreadeddomdocument");
Srctree.async=false;
xslttree= new ActiveXObject ("Msxml2.freethreadeddomdocument");
Xslttree.async = false;
Xt=new ActiveXObject ("MSXML2"). Xsltemplate ");
Restree.innerhtml= "";
MakeRequest ("Webform1.aspx?sel=xml", GETXML_CB);
}
function MakeRequest (url,callback) {
Http_request = false;
if (window. XMLHttpRequest) {//Mozilla, Safari,...
Http_request = new XMLHttpRequest ();
if (Http_request.overridemimetype) {
Http_request.overridemimetype (' Text/xml ');
}
else if (window. ActiveXObject) {//IE
try {
Http_request = new ActiveXObject ("Msxml2.xmlhttp");
catch (e) {
try {
Http_request = new ActiveXObject ("Microsoft.XMLHTTP");
catch (e) {}
}
}
if (!http_request) {
Alert (' Giving up:( Cannot create an XMLHTTP instance ');
return false;
}
Http_request.onreadystatechange = callback;
Http_request.open (' Get ', url, true);
Http_request.send (NULL);
}
function Getxml_cb () {
if (http_request.readystate = = 4) {
if (Http_request.status = = 200) {
Srctree.loadxml (Http_request.responsetext);
MakeRequest ("webform1.aspx?sel=xsl", GETXSL_CB);
} else {
Alert (' There is a problem with the request. ');
}
}
}
function Getxsl_cb () {
if (http_request.readystate = = 4) {
if (Http_request.status = = 200) {
Xslttree.loadxml (Http_request.responsetext);
Xt.stylesheet=xslttree;
var proc=xt.createprocessor ();
Proc.input=srctree;
Proc.transform ();
Restree.innerhtml=proc.output;
} else {
Alert (' There is a problem with the request. ');
}
}
}
function MakeRequest (url,callback) {
Http_request = false;
if (window. XMLHttpRequest) {//Mozilla, Safari,...
Http_request = new XMLHttpRequest ();
if (Http_request.overridemimetype) {
Http_request.overridemimetype (' Text/xml ');
}
else if (window. ActiveXObject) {//IE
try {
Http_request = new ActiveXObject ("Msxml2.xmlhttp");
catch (e) {
try {
Http_request = new ActiveXObject ("Microsoft.XMLHTTP");
catch (e) {}
}
}
if (!http_request) {
Alert (' Giving up:( Cannot create an XMLHTTP instance ');
return false;
}
Http_request.onreadystatechange = callback;
Http_request.open (' Get ', url, true);
Http_request.send (NULL);
}
</script>
</body>
5. Run the project, see the effect!
Hello.xml (note: the corresponding XSL resolution file name is not specified in my XML document)
<?xml version= ' 1.0 '?>
<breakfast-menu>
<food>
<name>belgian waffles</name>
<price>$5.95</price>
<description>two of our famous Belgian waffles
With plenty of real maple syrup.</description>
<calories>650</calories>
</food>
<food>
<name>strawberry Belgian waffles</name>
<price>$7.95</price>
<description>light Belgian Waffles covered with
Strawberries and whipped cream.</description>
<calories>900</calories>
</food>
<food>
<name>berry-berry Belgian waffles</name>
<price>$8.95</price>
<description>light Belgian Waffles Covered
With an assortment of fresh berries
and whipped cream.</description>
<calories>900</calories>
</food>
<food>
<name>french toast</name>
<price>$4.50</price>
<description>thick slices made from our homemade
Sourdough bread.</description>
<calories>600</calories>
</food>
<food>
<name>homestyle breakfast</name>
<price>$6.95</price>
<description>two eggs, bacon or sausage, toast,
And our ever-popular hash browns.</description>
<calories>950</calories>
</food>
</breakfast-menu>
Hello.xsl
<?xml version= "1.0"?>
<xsl:stylesheet version= "1.0" xmlns:xsl= "Http://www.w3.org/1999/XSL/Transform" >
<xsl:template match= "/breakfast-menu" >
<xsl:for-each select= "Food" >
<div style= "background-color:teal; Color:white; Padding:4px ">
<span style= "Font-weight:bold; Color:white "><xsl:value-of select=" name/></span>
To <xsl:value-of select= "price"/>
</DIV>
<div style= "margin-left:20px; Margin-bottom:1em; Font-size:10pt ">
<xsl:value-of select= "description"/>
<span style= "Font-style:italic" >
<xsl:value-of select= "calories"/> hehe
</SPAN>
</DIV>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
XML documents have only pure data, and if they need to be displayed in an HTML page, they typically need to be parsed with a custom XSL document or manually read the values in the XML from JS to the DOM tree in HTML, and when using an XSL document to parse, Corresponding XSL documents must be specified in the corresponding XML document to display correctly. However, when some programs dynamically output XML documents and do not specify the corresponding XSL document, then there must be other ways to load the corresponding XSL document to resolve, of course, in the server-side output XML document, through some XML API can also be implemented, I describe here is a way to achieve through JS. In this way, the server platform is set aside and the server side only needs to output the corresponding XML document (. net/j2ee) and output the corresponding XSL document to the client (you can output the stream or load the XSL document directly on the client).
Here are a few places to watch out for, We typically use the Msxml2.document component to load XML documents, but when using XSL to parse XML documents dynamically, you must use msxml2.freethreadeddomdocument components of this free thread while using the Msxml2.xsltemplate template group To load the xml,xsl data, through the Msxml2.xsltemplate transform method, you can dynamically parse the XML data with XSL, and, in addition, the default XML component of the system is MSXML2, and IE5 begins. If you need to use the updated MSXML component to install the updated MSXML package and specify a new name, such as msxml2.freethreadeddomdocument.4.0, the latest MSXML component is now 6.0beta and can be downloaded from the m$ Web site.
Demo: http://www.21cz.cn/xmltest/test.htm
XML File View: Http://www.21cz.cn/xmltest/hello.xml
XSL file view: http://www.21cz.cn/xmltest/hello.xsl
