1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Validating XML Document and Applying Style Sheet

Discussion in 'JavaScript and AJAX' started by MinalS, Sep 18, 2014.

  1. MinalS

    MinalS New Member

    Joined:
    Jul 8, 2014
    Messages:
    138
    Likes Received:
    30
    Trophy Points:
    0
    The DOM consists of several objects for manipulating the data. The DOMDocument object is the main object of the DOM. The op node of the tree is represented through this object. The XMLSchemaCache object is used to load the schema associated with the XML document.

    Some of the methods provided by the XMLSchema object are as listed below:
    1. add ( namespaceURI, variable): The method is used to add the new schema to the collection and associate the namepsaceURI specified by the user.
    2. get (namespaceURI): The method returns the node that contains the <schema> element.
    3. remove (namespaceURI): The method removes the schema from the collection.
    Consider the following example.

    Code:
    
    var xsdschemacache = new ActiveXObject ( “Msxml.XMLSchemaCache.6.0”);
    var xmlDoc = new ActiveXObject (“Msxml2.FreeThreadedDOMDocument.6.0”);
    xmlDoc.validateOnParse=true;
    xmlDoc.load(“Student.xml”);
    
    
    In the above example, the new XMLSchemaCache object called as xsdschemacache is created. The DOMDocument object called as xmlDoc is also created. The validateOnParse property is set to true. The load () method is used associate the XML document to the variable.

    Validating an XMLDocument



    The following steps are to be used for validating an XML Document.
    1. Create the User Interface to accept the XML Schema and document name.
    2. Write the code to load the XML document.
    3. Write the code to load the XML Schema in the XMLSchemaCache object
    4. Code to validate the XML document against the schema.
    1. Create the User Interface

    To create the user interface that accepts the XML file name and XSD file name, enter the following code.

    Code:
    
    <html>
        <head>
    	<body bgcolor=”lime”>
    	<p align=”center”><font face=”Arial, Verdana”></font> The Validator Model </p>
    	<form name =”frmTransfer” method=”post” action=””>
    	<table width=”70% border=”1” align=”center” >
    	<tr>
    	<td>
    		<div align=”center”>Enter the XML File Name</div>
    	</td>
    	<td>
    		<input type=”text” name=”XMLTextFile” />
    		<a href=”#” onclick=”javascript:doValidate()”>Validate</a>
    	</td>
    	</tr>
    	<tr>
    	<td>
    		<div align=”center”>Enter XSD File </div>
    	</td>
    	<tr>
    	<td>
    		<input type=”text” name=”TxtXSDFile” />
    		<a href=”#” onclick=”javascript:doReset()”>Reset</a>
    	</td>
    	</tr>
    	<td colspan=”2”>
    	<div align=”left”></div>
    	<div align=”left”></div>
    	</td>
    	<tr>
    	</tr>
    	</table>
    	</form>
    	</body>
    </html>
    
    The output obtain after executing the preceding code is as shown below:

    [​IMG]

    When the user clicks the Validate and Reset links, the appropriate scripts are executed.

    2. Loading the XML Document

    To load the XML Document, the DOMDocument object is used. The following code is used

    Code:
    var xmlDoc = new ActiveXObject(“Msxml2.ThreadedDocument.6.0”);
    xmlDoc.async=false;
    xmlDoc.Load(document.frmTransoform.TxtXMLFileName.value);
    
    The above code creates the instance of the document object. It reads the value from the XML File and displays the document in a synchronous mode.

    3. Adding the XML Schema in the XMLSchemaCache Object

    It is necessary for the user to associate the document with the Schema. The following code is used to perform the operation.

    Code:
    var namespace=xmlDoc.documentElement.namespaceURI;
    xmlDoc.valiateOnParse=true;
    var xsdschemecache = new ActiveXObject (“Msxml2.XMLSchemaCache 6.0”);
    xsdschemacache.add(namespace,document.frmTransform.TxtXSDFileName.value);
    xmlDoc.schemas = xsdschemacache;
    xmlDoc.load( document.frmTransform.TxtXMLFileName.value);
    
    In the above code, the namespace URI of the XML document is assigned to the namespace variable. The validateOnParse flag is set to true. The schema created by the user is added to the collection in the XMLSchemaCache object. The Load() method is used to reload the XML document.

    4. Validating the XML Document against the Schema

    To validate the XML document against the schema write the following code in JavaScript.

    Code:
    var error1=xmlDoc.parseError;
    transformedwindow = window.open ( ‘Transformed.htm’, ‘_new’, ‘location=0, status=1, toolbar=0, menubar=0, scrollbars=0, directories=0, resizeable=0,width=600, height=600’);
    if( error != “”)
    {
    	transformedwindow.document.write(‘<HTML><TITLE>Schema Validator</TITLE><BODY><p>The document for Validating Error</p><br/>’);
    	trasnformedwindow.document.write(‘<b>Error URL: <br>’+ error.url+’<br>’ );
    	transformedwindow.document.write(‘Error line : <br>’+error.line+ ‘<br>’ );
    	transformedwindow.document.write(‘Error Position: <br>’ + error.linepos +’<br>’);
    	transformedwindow.document.write(‘</BODY></HTML>’);
    }
    else
    {
    	transformedwindow.document.write(‘<HTML><TITLE> Schema Validator</TITLE><BODY>No Error <br>’);
    	transformedwindow.document.write(‘</BODY></HTML>’);
    }
    
    The above code validates the XML document by using the parseError property of the Document object. It contains the value of type IXMLDOMParseError.

    Applying the Style Sheet to an XML Document



    A style sheet object recompiled every time it calls a method. The XSLTemplate object and XSLProcessor object to perform the transformation and reduction of overheads.

    The XSLTemplate Object

    It is a DOM object that is used to access the XSLT style sheet. It can hold the cached style sheet dynamically associated with the XML document.

    The XSLT tree structure is loaded into the memory of the computer and is used for the processing. It stores the compiled XSLT document. User must first create the XSLTemplate object.

    In the code snippet below, the XSLTemplate object as xsltob is created through JavaScript.

    Code:
    xsltob = new ActiveXObject ( “MSXML2.XSLTemplate.6.0” );
    
    The object is associated with the XSLT Style Sheet document. Consider the following snippet.

    Code:
    var xsltdocob = new ActiveXObject (“Msmxl2.FreeThreadedDocument.6.0”);
    xsldocobj.load ( “student.xml” );
    xsltob.stylesheet = xsldocob;
    
    An instance of DOMDocument object is created. It is used to access the XML document and the XSLT style sheet.

    The XSLProcessor Object

    An instance of XSLProcessor object is used to process the XML document. It is used to apply the style sheet to the XML document and process the document.

    The script code for creating the object of the XSLProcessor is as shown below:

    Code:
    var xslproc= xsltobj.createProcessor ();
    
    The createProcessor () method is used to create a new XSLProcessor object.

    Example



    An example demonstrating the use of Style sheet to an XML document is as shown below:

    Step 1: Create an XML document and add the following code.

    Code:
    <? xml version =”1.0” encoding=”utf-8” ?>
    <StudentInfo>
    	<Student>
    	    <StudentID>121</StudentID>
    	    <StudentName>Ajay</StudentName>
    	    <Course>MBA</Course>
    	</Student>
    	<Student>
    	    <StudentID>131</StudentID>
    	    <StudentName>Anil</StudentName>
    	    <Course>BBA</Course>
    	</Student>
    <Student>
    	    <StudentID>141</StudentID>
    	    <StudentName>Rekha</StudentName>
    	    <Course>BCA</Course>
    	</Student>
    </StudentInfo>
    
    Step 2: Create the Code to apply to the style sheet dynamically to an XML Document.

    Code:
    <html>
    	<body>
    	<table border=”1” bgcolor=”Aqua” >
    		<tr>
    		<th>StudentID</th>
    		<th>StudentName</th>
    		<th>Course</th>
    		</tr>
    	<xsl: for-each select = “StudentInfo/Student”>
    		<tr>
    		<td>
    		<xsl:value-of select =”StudentID” />
    		</td>
    		<td>
    		<xsl:value-of select =”StudentName” />
    		</td>
    		<td>
    		<xsl:value-of select = “Course” />
    		</td>
    	</xsl: for-each>
    	</table>
    	</body>
    </html>
    
    Step 3: Create an htm file and add the following code.

    Code:
    <script language=”javascript” >
    function displayTable()
    {
    	var xslt = new ActiveXObject (“Msxml2.XSLTemplate.6.0”);
    	var xslDoc = new ActiveXObject(“Msxml2.FreeThreadedDOMDocument.6.0”);
    	xslDoc.async=false;
    	xslDoc.load(“Studenttable.xslt”);
    	xslt.stylesheet=xslDoc;
    	var xmlDoc=new ActiveXObject(“ Msxml2.FreeThreadedDOMDocument.6.0”);
    	xmlDoc.async=false;
    	xmlDoc.load(“Student.xml”);
    	xslStud=xslt.createProcessor();
    	xslStud.input=xmlDoc;
    	xslStud.transform();
    	parent.top.document.write(xslStud.output);
    }
    </script>
    
    The output for the code is as shown below:

    [​IMG]

    [​IMG]
     
    shabbir likes this.

Share This Page