บทที่ 5: การแยกวิเคราะห์อินสแตนซ์ XML
โครงร่าง:
1: ตัวอย่างเอฟเฟกต์
สอง: การวิเคราะห์ตัวอย่าง 1. กำหนดโลโก้ใหม่
2. สร้างเอกสาร XML
3. สร้างไฟล์ HTML ที่เกี่ยวข้อง
XML มีการใช้กันอย่างแพร่หลายในสาขาต่างๆ เช่น MathML ในสาขาเทคโนโลยี, WML ในแอปพลิเคชันการสื่อสารไร้สาย, SVG ในอิมเมจเครือข่าย ฯลฯ ในที่นี้เรามุ่งเน้นที่การประยุกต์ใช้ XML บนเว็บ การประยุกต์ใช้ XML บนเว็บใช้ประโยชน์จากความสามารถในการจัดการข้อมูลที่มีประสิทธิภาพเป็นหลัก โดยทั่วไปการใช้ XML กับโปรแกรมฝั่งเซิร์ฟเวอร์เช่น JavaScript และ ASP สามารถตอบสนองความต้องการแอปพลิเคชันเกือบทั้งหมดบนเครือข่ายได้
เมื่อพิจารณาถึงความสะดวกในการอธิบาย เราขอแนะนำตัวอย่างง่ายๆ ด้านล่าง ซึ่งไม่รวมโปรแกรมฝั่งเซิร์ฟเวอร์ วัตถุประสงค์คือเพื่อให้คุณเข้าใจถึงความสามารถในการจัดการข้อมูลของ XML
เอาล่ะ ก่อนอื่นเรามา [คลิกที่นี่] เพื่อดูผลของตัวอย่างกันก่อน (โปรดใช้เบราว์เซอร์เวอร์ชัน IE5.0 หรือสูงกว่าเพื่อเปิด)
นี่คือฟังก์ชันเรียกข้อมูลบันทึกซีดีอย่างง่าย คุณสามารถดูข้อมูลที่เกี่ยวข้องของซีดีแผ่นเดียวได้โดยคลิก "ก่อนหน้า" และ "ถัดไป" เดิมทีเราใช้สองวิธีเพื่อให้บรรลุผลนี้:
1. ใช้ DHTML เพื่อซ่อนข้อมูลในเลเยอร์ต่างๆ และแสดงตามลำดับผ่านกิจกรรมของเมาส์
2. ใช้โปรแกรมพื้นหลัง (เช่น ASP, CGI, PHP, JSP ฯลฯ) เพื่อเรียกข้อมูลฝั่งเซิร์ฟเวอร์
แต่ในตัวอย่างนี้ เมื่อเราเปิดโค้ดต้นฉบับของเพจ เราจะเห็นว่าไม่มี DHTML DIV หรือการดำเนินการของแบบฟอร์ม โดยสมบูรณ์ใน XML มาวิเคราะห์กระบวนการผลิตกันด้านล่าง:
ขั้นตอนที่หนึ่ง: กำหนดอัตลักษณ์ใหม่
ตามข้อมูลซีดีจริง ขั้นแรกให้สร้างรหัสประจำตัวใหม่ชื่อ <CD> ประการที่สอง สร้างการระบุข้อมูลที่เกี่ยวข้อง ซึ่งได้แก่: ชื่อซีดี <หัวข้อ> นักร้อง <ศิลปิน> ปีที่ตีพิมพ์ <ปี> ประเทศ <ประเทศ> , บริษัทผู้ออก <บริษัท> และราคา <ราคา> สุดท้ายต้องสร้างโลโก้ชื่อแค็ตตาล็อก <CATALOG> เหตุใดจึงต้องสร้างแท็ก <CATALOG> ใหม่ เนื่องจากมีการกำหนดไว้ในเอกสาร XML ว่าต้องมีและสามารถเป็นองค์ประกอบรากได้เพียงองค์ประกอบเดียว (ข้อมูลประจำตัว) เราจึงมีข้อมูลซีดีหลายรายการ และข้อมูลเหล่านี้อยู่ในความสัมพันธ์แบบขนาน ดังนั้นเราจึงจำเป็นต้องสร้างองค์ประกอบรากสำหรับองค์ประกอบคู่ขนานเหล่านี้
คำจำกัดความและความสัมพันธ์ขององค์ประกอบข้างต้นเป็นไปตามมาตรฐาน XML โดยสมบูรณ์ และไม่จำเป็นต้องมีการกำหนดไฟล์ DTD พิเศษ ดังนั้นจึงสามารถละคำจำกัดความ DTD ได้ หากเราต้องการใช้ DTD เพื่อกำหนด กระบวนการข้างต้นสามารถแสดงเป็น:
<!แค็ตตาล็อกองค์ประกอบ (ซีดี)*>
<!ELEMENT CD (ชื่อ,ศิลปิน,ปี,ประเทศ,บริษัท,ราคา)>
<!หัวข้อองค์ประกอบ (#PCDATA)>
<!ศิลปินองค์ประกอบ (#PCDATA)>
<!องค์ประกอบปี (#PCDATA)>
<!ประเทศองค์ประกอบ (#PCDATA)>
<!บริษัทองค์ประกอบ (#PCDATA)>
<!ราคาองค์ประกอบ (#PCDATA)>
รหัสนี้บ่งชี้ว่าองค์ประกอบ CATALOG มีองค์ประกอบย่อยของ CD หลายองค์ประกอบ และองค์ประกอบย่อยของ CD ในทางกลับกันมีองค์ประกอบย่อยหกองค์ประกอบ: ชื่อ ศิลปิน ปี ประเทศ บริษัท ราคา และเนื้อหาถูกกำหนดเป็นข้อความ (อักขระ ตัวเลข, ข้อความ) . (หมายเหตุ: สำหรับคำแนะนำทางไวยากรณ์เฉพาะ โปรดดูคำแนะนำเกี่ยวกับ DTD ในบทที่แล้ว)
ขั้นตอนที่ 2: สร้างเอกสาร XML
<?xml เวอร์ชัน = "1.0"?>
<แคตตาล็อก>
<ซีดี>
<TITLE>เอ็มไพร์ เบอร์เลสก์</TITLE>
<ศิลปิน>บ็อบ ดีแลน</ARTIST>
<COUNTRY>สหรัฐอเมริกา</COUNTRY>
<บริษัท>โคลัมเบีย</COMPANY>
<ราคา>10.90</ราคา>
<ปี>1985</ปี>
</ซีดี>
<ซีดี>
<TITLE>ซ่อนหัวใจของคุณ</TITLE>
<ศิลปิน>บอนนี่ ไทเลอร์</ARTIST>
<COUNTRY>สหราชอาณาจักร</COUNTRY>
<บริษัท>บันทึกของ CBS</COMPANY>
<ราคา>9.90</ราคา>
<ปี>1988</ปี>
</ซีดี>
<ซีดี>
<TITLE>เพลงฮิตที่ยิ่งใหญ่ที่สุด</TITLE>
<ศิลปิน>ดอลลี่ พาร์ตัน</ARTIST>
<COUNTRY>สหรัฐอเมริกา</COUNTRY>
<บริษัท>อาร์ซีเอ</บริษัท>
<ราคา>9.90</ราคา>
<ปี>1982</ปี>
</ซีดี>
<ซีดี>
<TITLE>ยังคงมีความรู้สึกเศร้าอยู่</TITLE>
<ศิลปิน>แกรี่ มอร์</ARTIST>
<COUNTRY>สหราชอาณาจักร</COUNTRY>
<COMPANY>พรหมจารีแดง</COMPANY>
<ราคา>10.20</ราคา>
<ปี>1990</ปี>
</ซีดี>
<ซีดี>
<TITLE>อีรอส</TITLE>
<ศิลปิน>อีรอส รามาซ็อตติ</ARTIST>
<ประเทศ>สหภาพยุโรป</ประเทศ>
<บริษัท>บีเอ็มจี</บริษัท>
<ราคา>9.90</ราคา>
<ปี>1997</ปี>
</ซีดี>
</แคตตาล็อก>
โค้ดด้านบนนี้ใช้คำสั่งประกาศ <?xml version="1.0"?> เพื่อระบุว่านี่คือเอกสาร XML และรูปแบบเป็นไปตามข้อกำหนดมาตรฐาน XML 1.0 แล้วมีเนื้อหาเอกสาร โครงสร้างต้นไม้มีความชัดเจนมาก:
<แคตตาล็อก>
<ซีดี>
-
</ซีดี>
<ซีดี>
-
</ซีดี>
</แคตตาล็อก>
มีการกำหนดข้อมูลทั้งหมด 5 ชุด เราบันทึกโค้ดด้านบนเป็นไฟล์ cd.xml สำหรับการโทร
ขั้นตอนที่ 3: สร้างไฟล์ HTML ที่เกี่ยวข้อง
1. นำเข้าข้อมูล XML
เรารู้ว่าในบรรดาเบราว์เซอร์ยอดนิยมในปัจจุบัน มีเพียงเบราว์เซอร์ IE5.0 ของ Microsoft และเบราว์เซอร์ที่สูงกว่าเท่านั้นที่รองรับ XML IE รองรับการแทรก XML ผ่านวัตถุวัตถุใน HTML และนำเข้าข้อมูลผ่านวิธีการ XMLDocument.load() ของ js ลองดูที่โค้ด: <object WIDTH="0" HEIGHT="0"
CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" ID="xmldso">
</วัตถุ>
กำหนดวัตถุด้วยชื่อ ID xmldso จากนั้นใช้ js เพื่อแนะนำข้อมูล xml ในพื้นที่ส่วนหัว:
<script for="window" event="onload">
xmldso.XMLDocument.load("cd.xml");
</สคริปต์>
2. มัดข้อมูล
แท็ก <SPAN> จะถูกนำมาใช้เพื่อผูกข้อมูล XML ในตาราง ในหมู่พวกเขา ID, DATASRC และ DTATFLD เป็นแอตทริบิวต์ทั้งหมดของ <SPAN> รหัสมีดังนี้:
<ตาราง>
<tr><td>หัวข้อ:</td><td><SPAN ID="title" DATASRC=#xmldso DATAFLD="TITLE"></SPAN></td></tr>
<tr><td>ศิลปิน:</td><td><SPAN ID="artist" DATASRC=#xmldso DATAFLD="ARTIST"></SPAN></td></tr>
<tr><td>ปี:</td><td><SPAN ID="ปี" DATASRC=#xmldso DATAFLD="YEAR"></SPAN></td></tr>
<tr><td>ประเทศ:</td><td><SPAN ID="country" DATASRC=#xmldso DATAFLD="COUNTRY"></SPAN></td></tr>
<tr><td>บริษัท:</td><td><SPAN ID="company" DATASRC=#xmldso DATAFLD="COMPANY"></SPAN></td></tr>
<tr><td>ราคา:</td><td><SPAN ID="price" DATASRC=#xmldso DATAFLD="PRICE"></SPAN></td></tr>
</ตาราง>
3. การดำเนินการดำเนินการ
สุดท้าย ให้ปุ่มเรียกดูข้อมูล:
<INPUT TYPE=ปุ่ม VALUE="ซีดีก่อนหน้า" ONCLICK="moveprevious()">
<INPUT TYPE=ปุ่ม VALUE="ซีดีถัดไป" ONCLICK="movenext()">
และใช้ js เพื่อทำหน้าที่คลิกเมาส์สองฟังก์ชัน: movenext() และ moveprevious() เพิ่มรหัสต่อไปนี้ลงในบริเวณส่วนหัว:
<ภาษาสคริปต์ = "จาวาสคริปต์">
ฟังก์ชั่น movenext()
-
ถ้า (xmldso.recordset.absoluteposition < xmldso.recordset.recordcount)
-
xmldso.recordset.movenext();
-
-
ฟังก์ชั่น moveprevious()
-
ถ้า (xmldso.recordset.absoluteposition > 1)
-
xmldso.recordset.moveprevious();
-
-
</สคริปต์>
เอาล่ะ มาดูโค้ดต้นฉบับทั้งหมดของไฟล์ HTML ก่อน:
<html>
<หัว>
<script for="window" event="onload">
xmldso.XMLDocument.load("cd.xml");
</สคริปต์>
<ภาษาสคริปต์ = "จาวาสคริปต์">
ฟังก์ชั่น movenext()
-
ถ้า (xmldso.recordset.absoluteposition < xmldso.recordset.recordcount)
-
xmldso.recordset.movenext();
-
-
ฟังก์ชั่น moveprevious()
-
ถ้า (xmldso.recordset.absoluteposition > 1)
-
xmldso.recordset.moveprevious();
-
-
</สคริปต์>
<TITLE>ซีดีนำทาง</TITLE>
</หัว>
<ร่างกาย>
<p>
<วัตถุ WIDTH="0" HEIGHT="0"
CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" ID="xmldso">
</วัตถุ>
<ตาราง>
<tr><td>หัวข้อ:</td><td><SPAN ID="title" DATASRC=#xmldso DATAFLD="TITLE"></SPAN></td></tr>
<tr><td>ศิลปิน:</td><td><SPAN ID="artist" DATASRC=#xmldso DATAFLD="ARTIST"></SPAN></td></tr>
<tr><td>ปี:</td><td><SPAN ID="ปี" DATASRC=#xmldso DATAFLD="YEAR"></SPAN></td></tr>
<tr><td>ประเทศ:</td><td><SPAN ID="country" DATASRC=#xmldso DATAFLD="COUNTRY"></SPAN></td></tr>
<tr><td>บริษัท:</td><td><SPAN ID="company" DATASRC=#xmldso DATAFLD="COMPANY"></SPAN></td></tr>
<tr><td>ราคา:</td><td><SPAN ID="price" DATASRC=#xmldso DATAFLD="PRICE"></SPAN></td></tr>
</ตาราง>
<p>
<INPUT TYPE=ปุ่ม VALUE="ซีดีก่อนหน้า" ONCLICK="moveprevious()">
<INPUT TYPE=ปุ่ม VALUE="ซีดีถัดไป" ONCLICK="movenext()">
</p>
</ร่างกาย>
</html>
บันทึกโค้ดด้านบนเป็นไฟล์ cd.htm และรวมเข้ากับไฟล์ cd.xml ในขั้นตอนที่สอง เปิดไฟล์ cd.htm แล้วคุณจะเห็นเอฟเฟกต์แบบเดียวกับตัวอย่างด้านบน
เอาล่ะ เราได้เรียนรู้มามากมายเกี่ยวกับ XML เรามาสรุปห้าบทก่อนหน้านี้กัน ซึ่งได้แก่ การแนะนำ XML อย่างรวดเร็ว หลักการแนวคิด XML คำศัพท์เฉพาะของ XML ไวยากรณ์ XML และการวิเคราะห์ตัวอย่างของบทนี้ ส่วนบทช่วยสอนจะสิ้นสุดลงที่นี่ ในระหว่างกระบวนการเขียน Ajie พยายามอย่างดีที่สุดที่จะอธิบายแนวคิด XML ที่เกี่ยวข้องในลักษณะที่เข้าใจง่ายและพยายามอย่างดีที่สุดที่จะบอกทุกคนว่าเขาเข้าใจ อย่างไรก็ตาม เนื่องจากฉันไม่ได้ศึกษา XML มาเป็นเวลานานแล้ว เทคโนโลยี XML ทั้งหมดไม่เป็นระบบและเจาะลึกเพียงพอ ดังนั้นจึงหลีกเลี่ยงไม่ได้ที่จะมีการละเว้นบางอย่าง โปรดแก้ไขฉันและยกโทษให้ฉันด้วย