08 February 2014

Retrieving XML data using AJAX

Since I shared an example on getting data using the native javascript in my last post, I will share another good example on retrieving an XML data using AJAX in native javascript format.


function loadXML()
    {
        "use strict;"
        var xhr = new XMLHttpRequest();          
        xhr.open("GET", "sample.xml", true);
        xhr.send(null);
        xhr.onreadystatechange = function() {      
            if (xhr.readyState == 4) {

                if (xhr.status == 200 || window.location.href.indexOf("http") == -1) {

                    //To retrieve data as an XML object
                    var xmlData = xhr.responseXML;
                    var getData = xmlData.getElementsByTagName("companies");
              
                    var result = '';

                    for (var i = 0; i < getData.length; i++) {

                        result += '<table>';
                        result += '<tr><td>';
                        result += ' <a href="';
                        result += getData[i].getElementsByTagName('name')[0].firstChild.nodeValue;
                        result += '">';
                        result +=  getData[i].getElementsByTagName('website')[0].firstChild.nodeValue;
                        result += '</a>';
                        result += '<p>';
                        result += getData[i].getElementsByTagName('about_us')[0].firstChild.nodeValue;
                        result += '</p>';
                        result += '</td></tr>';
                        result += '</table>';                          
                    }              
                        document.getElementById("xmlDisplay").innerHTML = result;
                }
            }              
        };                  
    }   

No comments:

Post a Comment