function loads the XML document from the specified URL : XML « Development « JavaScript DHTML






function loads the XML document from the specified URL

/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition

Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan.  You may use, study, modify, and
distribute them for any purpose.  Please note that these examples are
provided "as-is" and come with no warranty of any kind.

David Flanagan
*/

<head><title>Employee Data</title>
<script>
// This function loads the XML document from the specified URL, and when
// it is fully loaded, passes that document and the url to the specified
// handler function.  This function works with any XML document
function loadXML(url, handler) {
    // Use the standard DOM Level 2 technique, if it is supported
    if (document.implementation && document.implementation.createDocument) {
        // Create a new Document object
        var xmldoc = document.implementation.createDocument("", "", null);
        // Specify what should happen when it finishes loading
        xmldoc.onload = function() { handler(xmldoc, url); }
        // And tell it what URL to load
        xmldoc.load(url);
    }
    // Otherwise use Microsoft's proprietary API for Internet Explorer
    else if (window.ActiveXObject) { 
        var xmldoc = new ActiveXObject("Microsoft.XMLDOM");   // Create doc.
        xmldoc.onreadystatechange = function() {              // Specify onload
            if (xmldoc.readyState == 4) handler(xmldoc, url);
        }
        xmldoc.load(url);                                     // Start loading!
    }
}

// This function builds an HTML table of employees from data it reads from
// the XML document it is passed.
function makeTable(xmldoc, url) {
    // Create a <table> object and insert it into the document.
    var table = document.createElement("table");
    table.setAttribute("border", "1");
    document.body.appendChild(table);

    // Use convenience methods of HTMLTableElement and related interfaces
    // to define a table caption and a header that gives a name to each column.
    var caption = "Employee Data from " + url;
    table.createCaption().appendChild(document.createTextNode(caption));
    var header = table.createTHead();
    var headerrow = header.insertRow(0);
    headerrow.insertCell(0).appendChild(document.createTextNode("Name"));
    headerrow.insertCell(1).appendChild(document.createTextNode("Job"));
    headerrow.insertCell(2).appendChild(document.createTextNode("Salary"));
    
    // Now find all <employee> elements in our xmldoc document
    var employees = xmldoc.getElementsByTagName("employee");

    // Loop through these employee elements
    for(var i = 0; i < employees.length; i++) {
        // For each employee, get name, job, and salary data using standard DOM
        // methods.  The name comes from an attribute.  The other values are
        // in Text nodes within <job> and <salary> tags.
        var e = employees[i];
        var name = e.getAttribute("name");
        var job = e.getElementsByTagName("job")[0].firstChild.data;
        var salary = e.getElementsByTagName("salary")[0].firstChild.data;

        // Now that we have the employee data, use methods of the table to
        // create a new row and then use the methods of the row to create
        // new cells containing the data as text nodes.
        var row = table.insertRow(i+1);
        row.insertCell(0).appendChild(document.createTextNode(name));
        row.insertCell(1).appendChild(document.createTextNode(job));
        row.insertCell(2).appendChild(document.createTextNode(salary));
    }
}
</script>
</head>
<!-- 
The body of the document contains no static text; everything is dynamically
generated by the makeTable() function above.  The onload event handler starts
things off by calling loadXML() to load the XML data file.  Note the use of
location.search to encode the name of the xml file in the query string.  Load
this HTML file with a URL like this: DisplayEmployeeData.html?data.xml
-->
<body onload="loadXML(location.search.substring(1), makeTable)">
</body>

           
       








Related examples in the same category

1.Loads a XML file and permits to access to the data it contains
2.Convert XML to HTML
3.XML to JavaScript
4.Display XML content in HTML table