Scribd Logo
Upload

Welcome to Scribd!

  • Exp 14

    Uploaded by

    Sneha Kumari
    6 views7 pages
    The document describes a program to: 1. Design an XML document to store student information including roll number, name, college, branch, year of joining, and email for 5 sample students. 2. Create a CSS stylesheet to style the XML document. 3. Use XMLHttpRequest to retrieve data from the XML file and display it in an HTML table.

    Original Description:

    Original Title

    exp 14

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes a program to: 1. Design an XML document to store student information including roll number, name, college, branch, year of joining, and email for 5 sample students. 2. Create a CSS stylesheet to style the XML document. 3. Use XMLHttpRequest to retrieve data from the XML file and display it in an HTML table.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views7 pages

    Exp 14

    Uploaded by

    Sneha Kumari
    The document describes a program to: 1. Design an XML document to store student information including roll number, name, college, branch, year of joining, and email for 5 sample students. 2. Create a CSS stylesheet to style the XML document. 3. Use XMLHttpRequest to retrieve data from the XML file and display it in an HTML table.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    FACULTY OF TECHNOLOGY

    Computer Engineering
    01CE0306-Web Technology

    Program 14 a : To Design an XML document to store information about a


    student in an engineering college affiliated to MU. The information must
    include RollNo, Name, Name of the College, Branch, Year of Joining, and e-
    mail id. Make up sample data for 5 students. Create a CSS style sheet and use
    it to display the document.

    Code:
    CSS:
    *{
    display: block;
    font-size: 20px;
    }
    ENROLLMENT {
    color: blue;
    font-size: 30px;
    margin-top: 20px;
    }

    XML:
    <?xml version="1.0" encoding="UTF-8"?>
    <?xml-stylesheet type="text/css" href="14---a.css"?>

    <STUDENTDATA>

    <STUDENT>

    [Niyati Sanja - 92200103151] 153


    FACULTY OF TECHNOLOGY
    Computer Engineering
    01CE0306-Web Technology

    <ENROLLMENT>92200103155</ENROLLMENT>
    <NAME>SHUBHAM PANDIT</NAME>
    <COLLEGE>MARWADI UNIVERSITY</COLLEGE>
    <BRANCH>CE</BRANCH>
    <YEAR>2022</YEAR>
    <EMAIL>shubham@gmail.com</EMAIL>
    </STUDENT>

    <STUDENT>
    <ENROLLMENT>92200000001</ENROLLMENT>
    <NAME>XYZ </NAME>
    <COLLEGE>MARWADI UNIVERSITY</COLLEGE>
    <BRANCH>CE</BRANCH>
    <YEAR>2022</YEAR>
    <EMAIL>xyz@gmail.com</EMAIL>
    </STUDENT>

    <STUDENT>
    <ENROLLMENT>92100000002</ENROLLMENT>
    <NAME>ABC</NAME>
    <COLLEGE>MARWADI UNIVERSITY</COLLEGE>
    <BRANCH>IT</BRANCH>
    <YEAR>2021</YEAR>
    <EMAIL>abc@gmail.com</EMAIL>

    [Niyati Sanja - 92200103151] 154


    FACULTY OF TECHNOLOGY
    Computer Engineering
    01CE0306-Web Technology

    </STUDENT>

    <STUDENT>
    <ENROLLMENT>92200000003</ENROLLMENT>
    <NAME>PQR</NAME>
    <COLLEGE>MARWADI UNIVERSITY</COLLEGE>
    <BRANCH>CE</BRANCH>
    <YEAR>2022</YEAR>
    <EMAIL>pqr@gmail.com</EMAIL>
    </STUDENT>

    <STUDENT>
    <ENROLLMENT>91900000004</ENROLLMENT>
    <NAME>LMN</NAME>
    <COLLEGE>MARWADI UNIVERSITY</COLLEGE>
    <BRANCH>ME</BRANCH>
    <YEAR>2019</YEAR>
    <EMAIL>lmn@gmail.com</EMAIL>
    </STUDENT>

    </STUDENTDATA>

    [Niyati Sanja - 92200103151] 155


    FACULTY OF TECHNOLOGY
    Computer Engineering
    01CE0306-Web Technology

    Output:

    [Niyati Sanja - 92200103151] 156


    FACULTY OF TECHNOLOGY
    Computer Engineering
    01CE0306-Web Technology

    Program 14 b: Create an XMLHttpRequest to retrieve data from an XML file


    and display the data in an HTML table.

    Code:
    <!DOCTYPE html>
    <html>
    <style>
    table,th,td {
    border : 1px solid black;
    border-collapse: collapse;
    }
    th,td {
    padding: 5px;
    }
    </style>
    <body>

    <button type="button" onclick="loadXMLDoc()">click here</button>


    <br><br>
    <table id="demo"></table>

    <script>
    function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    [Niyati Sanja - 92200103151] 157


    FACULTY OF TECHNOLOGY
    Computer Engineering
    01CE0306-Web Technology

    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
    }
    };
    xmlhttp.open("GET", "14---a.xml", true);
    xmlhttp.send();
    }
    function myFunction(xml) {
    var i;
    var xmlDoc = xml.responseXML;
    var
    table="<tr><th>ENROLLMENT</th><th>NAME</th><th>COL
    LEGE</th><th>BRANCH</th><th>YEAR</th><th>EMAIL</th
    ></tr>";
    var x = xmlDoc.getElementsByTagName("STUDENT");
    for (i = 0; i <x.length; i++)
    {
    table += "<tr><td>" +

    x[i].getElementsByTagName("ENROLLMENT")[0].childNodes[0].nodeValue +
    "</td><td>" +

    x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
    "</td><td>" +

    [Niyati Sanja - 92200103151] 158


    FACULTY OF TECHNOLOGY
    Computer Engineering
    01CE0306-Web Technology

    x[i].getElementsByTagName("COLLEGE")[0].childNodes[0].nodeValue +
    "</td><td>" +

    x[i].getElementsByTagName("BRANCH")[0].childNodes[0].nodeValue +
    "</td><td>" +

    x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue +
    "</td><td>" +

    x[i].getElementsByTagName("EMAIL")[0].childNodes[0].nodeValue +
    "</td></tr>";
    }
    document.getElementById("demo").innerHTML = table;
    }
    </script>
    </body>
    </html>

    Output:

    [Niyati Sanja - 92200103151] 159

    You might also like