XML DOM-로드

이 장에서 우리는 XML 로딩 과 파싱 에 대해 공부할 것 입니다.

API에서 제공하는 인터페이스를 설명하기 위해 W3C는 IDL (인터페이스 정의 언어)이라는 추상 언어를 사용합니다. IDL 사용의 장점은 개발자가 선호하는 언어로 DOM을 사용하는 방법을 배우고 다른 언어로 쉽게 전환 할 수 있다는 것입니다.

단점은 추상이기 때문에 웹 개발자가 IDL을 직접 사용할 수 없다는 것입니다. 프로그래밍 언어 간의 차이로 인해 추상 인터페이스와 구체적인 언어간에 매핑 또는 바인딩이 필요합니다. DOM은 Javascript, JScript, Java, C, C ++, PLSQL, Python 및 Perl과 같은 프로그래밍 언어에 매핑되었습니다.

다음 섹션과 장에서는 Javascript를 프로그래밍 언어로 사용하여 XML 파일을로드합니다.

파서

파서는 우리의 경우 XML 문서에 문서를 분석하고 정보 뭔가 특정 작업을 수행하도록 설계된 소프트웨어 응용 프로그램입니다. DOM 기반 파서 중 일부는 다음 표에 나열되어 있습니다.

S. 아니	파서 및 설명
1	JAXP Sun Microsystem의 JAXP (Java API for XML Parsing)
2	XML4J IBM의 Java 용 XML 파서 (XML4J)
삼	msxml Microsoft의 XML 파서 (msxml) 버전 2.0은 Internet Explorer 5.5에 내장되어 있습니다.
4	4DOM 4DOM은 Python 프로그래밍 언어를위한 파서입니다.
5	XML::DOM XML :: DOM은 Perl을 사용하여 XML 문서를 조작하는 Perl 모듈입니다.
6	Xerces Apache의 Xerces Java 파서

DOM과 같은 트리 기반 API에서 파서는 XML 파일을 탐색하고 해당 DOM 개체를 만듭니다. 그런 다음 DOM 구조를 앞뒤로 탐색 할 수 있습니다.

XML로드 및 구문 분석

XML 문서를로드하는 동안 XML 내용은 두 가지 형태로 올 수 있습니다.

XML 파일로 직접
XML 문자열로

XML 파일로 콘텐츠

다음 예제 는 XML 컨텐츠가 XML 파일로 수신 될 때 Ajax 및 Javascript를 사용하여 XML ( node.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으로 변환되면 JS DOM 메서드 및 속성을 사용하여 모든 XML 요소에 액세스 할 수 있습니다. childNodes , nodeValue 및 getElementsById (ID), getElementsByTagName (tags_name)과 같은 DOM 메서드와 같은 DOM 속성을 사용했습니다 .

실행

이 파일을 loadingexample.html로 저장하고 브라우저에서 엽니 다. 다음과 같은 출력을 받게됩니다.

XML 문자열로 콘텐츠

다음 예제는 XML 컨텐츠가 XML 파일로 수신 될 때 Ajax 및 Javascript를 사용하여 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 (text, 'text / xml') 메서드를 사용합니다.
가변 텍스트 는 XML 내용이있는 문자열을 포함해야합니다.
XML 콘텐츠가 JavaScript XML DOM으로 변환되면 JS DOM 메서드 및 속성을 사용하여 모든 XML 요소에 액세스 할 수 있습니다. childNodes , nodeValue 와 같은 DOM 속성을 사용했습니다 .

실행

이 파일을 loadingexample.html로 저장하고 브라우저에서 엽니 다. 다음 출력이 표시됩니다.

이제 XML 콘텐츠가 JavaScript XML DOM으로 어떻게 변환되는지 확인 했으므로 이제 XML DOM 메서드를 사용하여 모든 XML 요소에 액세스 할 수 있습니다.