XML DOM - กำลังโหลด

ในบทนี้เราจะศึกษาเกี่ยวกับ XML โหลดและแยก

เพื่ออธิบายอินเทอร์เฟซที่จัดเตรียมโดย API W3C ใช้ภาษานามธรรมที่เรียกว่า Interface Definition Language (IDL) ข้อดีของการใช้ IDL คือผู้พัฒนาเรียนรู้วิธีใช้ DOM กับภาษาโปรดของตนและสามารถเปลี่ยนไปใช้ภาษาอื่นได้อย่างง่ายดาย

ข้อเสียคือเนื่องจากเป็นนามธรรมนักพัฒนาเว็บจึงไม่สามารถใช้ IDL ได้โดยตรง เนื่องจากความแตกต่างระหว่างภาษาการเขียนโปรแกรมจึงจำเป็นต้องมีการแมปหรือการเชื่อมโยงระหว่างอินเทอร์เฟซนามธรรมกับภาษาที่เป็นรูปธรรม DOM ได้รับการแมปกับภาษาโปรแกรมเช่น Javascript, JScript, Java, C, C ++, PLSQL, Python และ Perl

ในส่วนและบทต่อไปนี้เราจะใช้ Javascript เป็นภาษาโปรแกรมของเราเพื่อโหลดไฟล์ XML

โปรแกรมแยกวิเคราะห์

โปรแกรมแยกวิเคราะห์เป็นแอปพลิเคชันซอฟต์แวร์ที่ออกแบบมาเพื่อวิเคราะห์เอกสารในกรณีของเอกสาร XML และดำเนินการบางอย่างกับข้อมูลโดยเฉพาะ ตัวแยกวิเคราะห์ที่ใช้ DOM บางตัวแสดงอยู่ในตารางต่อไปนี้ -

ส. เลขที่	Parser & Description
1	JAXP Java API ของ Sun Microsystem สำหรับการแยกวิเคราะห์ XML (JAXP)
2	XML4J XML Parser ของ IBM สำหรับ Java (XML4J)
3	msxml ตัวแยกวิเคราะห์ XML ของ Microsoft (msxml) เวอร์ชัน 2.0 มีอยู่แล้วใน Internet Explorer 5.5
4	4DOM 4DOM เป็นตัวแยกวิเคราะห์สำหรับภาษาโปรแกรม Python
5	XML::DOM XML :: DOM เป็นโมดูล Perl สำหรับจัดการเอกสาร XML โดยใช้ Perl
6	Xerces Xerces Java Parser ของ Apache

ใน API แบบต้นไม้เช่น DOM ตัวแยกวิเคราะห์จะข้ามไฟล์ XML และสร้างวัตถุ DOM ที่เกี่ยวข้อง จากนั้นคุณสามารถสำรวจโครงสร้าง DOM ไปมาได้

กำลังโหลดและแยกวิเคราะห์ XML

ในขณะที่โหลดเอกสาร XML เนื้อหา XML สามารถมาในสองรูปแบบ -

โดยตรงเป็นไฟล์ XML
เป็นสตริง XML

เนื้อหาเป็นไฟล์ XML

ตัวอย่างต่อไปนี้สาธิตวิธีการโหลดข้อมูล XML ( node.xml ) โดยใช้ Ajax และ Javascript เมื่อได้รับเนื้อหา XML เป็นไฟล์ XML ที่นี่ฟังก์ชัน Ajax รับเนื้อหาของไฟล์ xml และเก็บไว้ใน XML DOM เมื่อสร้างวัตถุ DOM แล้วจะมีการแยกวิเคราะห์

<!DOCTYPE html>
<html>
   <body>
      <div>
         <b>FirstName:</b> <span id = "FirstName"></span><br>
         <b>LastName:</b> <span id = "LastName"></span><br>
         <b>ContactNo:</b> <span id = "ContactNo"></span><br>
         <b>Email:</b> <span id = "Email"></span>
      </div>
      <script>
         //if browser supports XMLHttpRequest
            
            if (window.XMLHttpRequest) { // Create an instance of XMLHttpRequest object. 
               code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp  =  new XMLHttpRequest();
            } else { // code for IE6, IE5 
               xmlhttp  =  new ActiveXObject("Microsoft.XMLHTTP");
            }
   
         // sets and sends the request for calling "node.xml"
            xmlhttp.open("GET","/dom/node.xml",false);
            xmlhttp.send();

         // sets and returns the content as XML DOM
            xmlDoc = xmlhttp.responseXML;

         //parsing the DOM object
            document.getElementById("FirstName").innerHTML = 
               xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0].nodeValue;
            document.getElementById("LastName").innerHTML = 
               xmlDoc.getElementsByTagName("LastName")[0].childNodes[0].nodeValue;
            document.getElementById("ContactNo").innerHTML = 
               xmlDoc.getElementsByTagName("ContactNo")[0].childNodes[0].nodeValue;
            document.getElementById("Email").innerHTML = 
               xmlDoc.getElementsByTagName("Email")[0].childNodes[0].nodeValue;
      </script>
   </body>
</html>

node.xml

<Company> 
   <Employee category = "Technical" id = "firstelement"> 
      <FirstName>Tanmay</FirstName> 
      <LastName>Patil</LastName> 
      <ContactNo>1234567890</ContactNo> 
      <Email>[email protected]</Email> 
   </Employee>  
   
   <Employee category = "Non-Technical"> 
      <FirstName>Taniya</FirstName> 
      <LastName>Mishra</LastName> 
      <ContactNo>1234667898</ContactNo> 
      <Email>[email protected]</Email> 
   </Employee>  
   
   <Employee category = "Management"> 
      <FirstName>Tanisha</FirstName> 
      <LastName>Sharma</LastName> 
      <ContactNo>1234562350</ContactNo> 
      <Email>[email protected]</Email> 
   </Employee> 
</Company>

รายละเอียดของโค้ดส่วนใหญ่อยู่ในโค้ดสคริปต์

Internet Explorer ใช้ActiveXObject ( "Microsoft.XMLHTTP")ในการสร้างตัวอย่างของวัตถุ XMLHttpRequest เป็นเบราว์เซอร์อื่น ๆ ใช้XMLHttpRequest ()วิธีการ
responseXMLแปลง XML เนื้อหาโดยตรงใน DOM XML
เมื่อเนื้อหา XML ถูกแปลงเป็น JavaScript XML DOM คุณสามารถเข้าถึงองค์ประกอบ XML ใดก็ได้โดยใช้เมธอด JS DOM และคุณสมบัติ เราได้ใช้คุณสมบัติ DOM เช่นเมธอดchildNodes , nodeValueและ DOM เช่น getElementsById (ID), getElementsByTagName (tags_name)

การดำเนินการ

บันทึกไฟล์นี้เป็น loadingexample.html และเปิดในเบราว์เซอร์ของคุณ คุณจะได้รับผลลัพธ์ต่อไปนี้ -

เนื้อหาเป็นสตริง XML

ตัวอย่างต่อไปนี้สาธิตวิธีการโหลดข้อมูล XML โดยใช้ Ajax และ Javascript เมื่อรับเนื้อหา XML เป็นไฟล์ XML ที่นี่ฟังก์ชั่น Ajax รับเนื้อหาของไฟล์ xml และเก็บไว้ใน XML DOM เมื่อสร้างวัตถุ DOM แล้วจะมีการแยกวิเคราะห์

<!DOCTYPE html>
<html>
   <head>
      <script>
         
         // loads the xml string in a dom object
         function loadXMLString(t) { // for non IE browsers
            if (window.DOMParser) {
               // create an instance for xml dom object parser = new DOMParser();
               xmlDoc = parser.parseFromString(t,"text/xml");
            }
            // code for IE
            else { // create an instance for xml dom object
               xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
               xmlDoc.async = false;
               xmlDoc.loadXML(t);
            }
            return xmlDoc;
         }
      </script>
   </head>
   <body>
      <script>
         
         // a variable with the string
            var text = "<Employee>";
            text = text+"<FirstName>Tanmay</FirstName>";
            text = text+"<LastName>Patil</LastName>";
            text = text+"<ContactNo>1234567890</ContactNo>";
            text = text+"<Email>[email protected]</Email>";
            text = text+"</Employee>";

         // calls the loadXMLString() with "text" function and store the xml dom in a variable
            var xmlDoc = loadXMLString(text);
	
         //parsing the DOM object
            y = xmlDoc.documentElement.childNodes;
            for (i = 0;i<y.length;i++) {
               document.write(y[i].childNodes[0].nodeValue);
               document.write("<br>");
            }
      </script>
   </body>
</html>

รายละเอียดของโค้ดส่วนใหญ่อยู่ในโค้ดสคริปต์

Internet Explorer ใช้ActiveXObject ( "Microsoft.XMLDOM")ในการโหลดข้อมูล XML เป็นวัตถุ DOM เป็นเบราว์เซอร์อื่น ๆ ใช้DOMParser ()ฟังก์ชั่นและparseFromString (ข้อความ 'ข้อความ / XML)วิธีการ
ข้อความตัวแปรจะต้องมีสตริงที่มีเนื้อหา XML
เมื่อเนื้อหา XML ถูกแปลงเป็น JavaScript XML DOM คุณสามารถเข้าถึงองค์ประกอบ XML ใดก็ได้โดยใช้เมธอด JS DOM และคุณสมบัติ เราได้ใช้คุณสมบัติ DOM เช่นchildNodes , nodeValue

การดำเนินการ

บันทึกไฟล์นี้เป็น loadingexample.html และเปิดในเบราว์เซอร์ของคุณ คุณจะเห็นผลลัพธ์ต่อไปนี้ -

ตอนนี้เราได้เห็นว่าเนื้อหา XML แปลงเป็น JavaScript XML DOM ได้อย่างไรตอนนี้คุณสามารถเข้าถึงองค์ประกอบ XML ใดก็ได้โดยใช้วิธี XML DOM