1. สร้างโครงการเว็บ vs2003 ใหม่และตั้งชื่อเป็น XMLTest
2. ลบเนื้อหาทั้งหมดของ WebForm1.aspx ในไดเร็กทอรีโครงการ โดยเหลือเพียงคำสั่งเดียวที่ด้านบน:
<%@ Page language="c#" Codebehind="WebForm1. aspx .cs" AutoEventWireup = "false" สืบทอด = "XMLTest.WebForm1" %>
3. แก้ไขเนื้อหาใน WebForm1.aspx.cs และเพิ่มใน Page_Load:
ต่อไปนี้เป็นส่วนอ้างอิง:
XmlDocument doc=xmlDocument ใหม่();
สตริง xmlfile=string.Empty;
xmlfile=Context.Request.PhysicalApplicationPath+(Request.QueryString["sel"].ToString()=="xml"?" \hello.xml:\hello.xsl ");
doc.Load(xmlfile);
การตอบกลับเขียน(doc.InnerXml);
4. เพิ่ม test.htm ในไดเร็กทอรีรากของโปรเจ็กต์และตั้งค่าเป็นหน้าแรกของโปรเจ็กต์:
ต่อไปนี้คือใบเสนอราคา:
<html>
<หัว>
<title></title>
</หัว>
<ร่างกาย>
<div id="resTree"></div>
<FONT face="宋体"></FONT><input type="button" value="Execute" onclick="GetXml()"><BR>
<ภาษาสคริปต์ = "JScript">
var srcTree,xsltTree,xt;
var http_request = false;
ฟังก์ชั่น GetXml()
-
srcTree = ActiveXObject ใหม่ ("Msxml2.FreeThreadedDOMDocument");
srcTree.async=false;
xsltTree= ActiveXObject ใหม่ ("Msxml2.FreeThreadedDOMDocument");
xsltTree.async = เท็จ;
xt=new ActiveXObject("MSXML2.XSLTemplate");
resTree.innerHTML="";
makeRequest("WebForm1.aspx?sel=xml",GetXml_CB);
-
ฟังก์ชั่น makeRequest (url, โทรกลับ) {
http_request = เท็จ;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = XMLHttpRequest ใหม่ ();
ถ้า (http_request.overrideMimeType) {
http_request.overrideMimeType('ข้อความ/xml');
-
} อื่นถ้า (window.ActiveXObject) { // IE
พยายาม {
http_request = ใหม่ ActiveXObject("Msxml2.XMLHTTP");
} จับ (e) {
พยายาม {
http_request = ใหม่ ActiveXObject("Microsoft.XMLHTTP");
} จับ (จ) {}
-
}
ถ้า (!http_request) {
alert('ยอมแพ้ :( ไม่สามารถสร้างอินสแตนซ์ XMLHTTP ได้');
กลับเท็จ;
-
http_request.onreadystatechange = โทรกลับ;
http_request.open('GET', url, true);
http_request.send(null);
}
ฟังก์ชัน GetXml_CB() {
ถ้า (http_request.readyState == 4) {
ถ้า (http_request.status == 200) {
srcTree.loadXML(http_request.responseText);
makeRequest("WebForm1.aspx?sel=xsl",GetXsl_CB);
} อื่น {
alert('เกิดปัญหากับคำขอ');
-
}
}
ฟังก์ชัน GetXsl_CB(){
ถ้า (http_request.readyState == 4) {
ถ้า (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;
} อื่น {
alert('เกิดปัญหากับคำขอ');
-
-
}
ฟังก์ชั่น makeRequest (url, โทรกลับ) {
http_request = เท็จ;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = XMLHttpRequest ใหม่ ();
ถ้า (http_request.overrideMimeType) {
http_request.overrideMimeType('ข้อความ/xml');
-
} อื่นถ้า (window.ActiveXObject) { // IE
พยายาม {
http_request = ใหม่ ActiveXObject("Msxml2.XMLHTTP");
} จับ (e) {
พยายาม {
http_request = ใหม่ ActiveXObject("Microsoft.XMLHTTP");
} จับ (จ) {}
-
}
ถ้า (!http_request) {
alert('ยอมแพ้ :( ไม่สามารถสร้างอินสแตนซ์ XMLHTTP ได้');
กลับเท็จ;
-
http_request.onreadystatechange = โทรกลับ;
http_request.open('GET', url, true);
http_request.send(null);
}
</สคริปต์>
</ร่างกาย>
</html>
5. รันโปรเจ็กต์และดูเอฟเฟกต์!
hello.xml (หมายเหตุ: เอกสาร xml ของฉันไม่ได้ระบุชื่อไฟล์การแยกวิเคราะห์ xsl ที่เกี่ยวข้อง)
ต่อไปนี้เป็นส่วนของใบเสนอราคา:
<?xml version='1.0'?>
<เมนูอาหารเช้า>
<อาหาร>
<name>วาฟเฟิลเบลเยียม</name>
<ราคา>$5.95</ราคา>
<description>วาฟเฟิลเบลเยียมอันโด่งดังของเราสองชิ้น
ด้วยน้ำเชื่อมเมเปิ้ลแท้มากมาย</description>
<แคลอรี่>650</แคลอรี่>
</อาหาร>
<อาหาร>
<name>วาฟเฟิลสตรอเบอร์รี่เบลเยี่ยม</name>
<ราคา>$7.95</ราคา>
<description>วาฟเฟิลเบลเยี่ยมเคลือบด้วย
สตรอเบอร์รี่และวิปครีม</description>
<แคลอรี่>900</แคลอรี่>
</อาหาร>
<อาหาร>
<name>วาฟเฟิลเบอร์รี่-เบอร์รี่เบลเยี่ยม</name>
<ราคา>$8.95</ราคา>
<description>วาฟเฟิลเบลเยี่ยมเคลือบบางๆ
พร้อมด้วยผลเบอร์รี่สดนานาชนิด
และวิปครีม</description>
<แคลอรี่>900</แคลอรี่>
</อาหาร>
<อาหาร>
<name>เฟรนช์โทสต์</name>
<ราคา>$4.50</ราคา>
<description>ชิ้นหนาทำจากโฮมเมดของเรา
ขนมปังเปรี้ยว</description>
<แคลอรี่>600</แคลอรี่>
</อาหาร>
<อาหาร>
<name>อาหารเช้าแบบบ้านๆ</name>
<ราคา>$6.95</ราคา>
<รายละเอียด>ไข่สองฟอง เบคอนหรือไส้กรอก ขนมปังปิ้ง
และแฮชบราวน์ยอดนิยมของเรา</description>
<แคลอรี่>950</แคลอรี่>
</อาหาร>
</breakfast-menu>
hello.xsl
ต่อไปนี้เป็นส่วนที่ยกมา:
<?xml เวอร์ชัน = "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="อาหาร">
<DIV STYLE="พื้นหลังสี:น้าน; สี:สีขาว; การขยาย:4px">
<SPAN STYLE="font-weight:bold; color:white"><xsl:value-of select="name"/></SPAN>
ถึง<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="แคลอรี่"/> สวัสดี
</SPAN>
</DIV>
</xsl:สำหรับแต่ละ>
</xsl:แม่แบบ>
</xsl:สไตล์ชีท>
เอกสาร xml มีเฉพาะข้อมูลที่บริสุทธิ์เท่านั้น หากจำเป็นต้องแสดงในหน้า html โดยทั่วไปจำเป็นต้องใช้เอกสาร xsl ที่กำหนดเองเพื่อแยกวิเคราะห์ หรืออ่านค่าใน xml ถึง js ด้วยตนเองและแสดงลงในแผนผัง dom ใน เมื่อใช้เอกสาร xsl เมื่อแยกวิเคราะห์จะต้องระบุเอกสาร xsl ที่เกี่ยวข้องในการแสดงตามปกติ อย่างไรก็ตาม เมื่อบางโปรแกรมส่งออกเอกสาร xml แบบไดนามิก เอกสาร xsl ที่เกี่ยวข้องจะไม่ถูกระบุในกรณีนี้ ต้องโหลดเอกสาร xsl ที่เกี่ยวข้องด้วยวิธีอื่น แน่นอนว่าเมื่อส่งออกเอกสาร XML บนฝั่งเซิร์ฟเวอร์ ก็สามารถทำได้ผ่าน XML API บางตัว สิ่งที่ฉันอธิบายในที่นี้คือวิธีการบรรลุผลผ่าน JS ด้วยวิธีนี้ ข้อจำกัดของแพลตฟอร์มเซิร์ฟเวอร์จะถูกละทิ้งไป เซิร์ฟเวอร์จำเป็นต้องส่งออกเอกสาร xml ที่เกี่ยวข้องเท่านั้น (.net/j2ee เป็นที่ยอมรับ) และส่งออกเอกสาร xsl ที่เกี่ยวข้องไปยังไคลเอนต์ (สามารถส่งออกกระแสข้อมูลหรือโดยตรง ในไคลเอนต์โหลดเอกสาร xsl)
มีบางสิ่งที่ควรทราบที่นี่ โดยทั่วไป เราใช้คอมโพเนนต์ Msxml2.Document เพื่อโหลดเอกสาร xml แต่เมื่อใช้ xsl แบบไดนามิกเพื่อแยกวิเคราะห์เอกสาร xml ต้องใช้คอมโพเนนต์เธรดอิสระ เช่น Msxml2.FreeThreadedDOMDocument และ MSXML2.XSLTemplate ต้องเป็น ใช้งานส่วนประกอบเทมเพลตเพื่อโหลดข้อมูล xml และ xsl ด้วยวิธีการแปลงของ MSXML2 ติดตั้งแพ็คเกจส่วนประกอบ msxml ที่อัปเดตแล้วและระบุชื่อใหม่ เช่น Msxml2.FreeThreadedDOMDocument.4.0 ซึ่งขณะนี้เป็นคอมโพเนนต์ msxml สามารถดาวน์โหลดได้จากเว็บไซต์ M$
การสาธิต: http://www.21cz.cn/xmltest/test.htm
มุมมองไฟล์ xml: http://www.21cz.cn/xmltest/hello.xml
ดูไฟล์ xsl: http://www.21cz.cn/xmltest/hello.xsl