AllInWorld99 provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL,FLASH, jQuery, java, for loop, switch case, if, if else, for...of, for...in, for...each,while loop, blogger tips, blogger meta tag generator, blogger tricks, blogger pagination, client side script, html code editor, javascript editor with instant output, css editor, online html editor, materialize css tutorial, materialize css dropdown list,break, continue statement, label,array, json, get day and month dropdown list using c# code, CSS button,protect cd or pendrive from virus, cordova, android example, html and css to make android app, html code play,telerik show hide column, Transparent image convertor, copy to clipboard using javascript without using any swf file, simple animation using css, SQL etc. AllInWorld99 presents thousands of code examples (accompanied with source code) which can be copied/downloaded independantly. By using the online editor provided,readers can edit the examples and execute the code experimentally.



Retrieve XML file data using JQuery:-
       Each browser create different HttpRequest, so must check the browser first (window.XMLHttpRequest) and depending on the browser we need to create a XMLHttpRquest  object. Open the connection using open() method and send the request using send() methods, receive the request using xmlhttp.responseXML and now we can get all the data from the XML file using that response object.



The below example is show you how to process XML file using JQuery. The below example is to retrieve the 5students details are stored in the XML file and get and write it to table format.
  


Example Program for JQuery to Retrieve Information in XML Files:-
HTML File(.html)

<script type="text/javascript">
    $(window).load(function() {
        retrive_xml_data();
    });

    function retrive_xml_data() {
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open("GET", "xml_example.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;
        var temp_table1 = "";
        var temp_table2 = "";

        temp_table1 = "<tableborder='1'><TR style='text-align:center;font-weight: bold;'><td>NAME</td><td>TAMIL</TD><TD>ENGLISH</TD><TD>MATHS</TD><TD>SCIENCE</TD><TD>SOC.SCIENCE</TD><TR>";

        var x = xmlDoc.getElementsByTagName("CD");
        for (i = 0; i < x.length; i++) {
            temp_table2 = temp_table2 + '<tr><td>' + (x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue) + '</td><td>' + x[i].getElementsByTagName("TAMIL")[0].childNodes[0].nodeValue + '</td><td>' + x[i].getElementsByTagName("ENGLISH")[0].childNodes[0].nodeValue + '</td><td>' + x[i].getElementsByTagName("MATHS")[0].childNodes[0].nodeValue + '</td><td>' + x[i].getElementsByTagName("SCIENCE")[0].childNodes[0].nodeValue + '</td><td>' + x[i].getElementsByTagName("SOCIAL")[0].childNodes[0].nodeValue + '</td></tr>';
        }
        $("#xml_div").append(temp_table1 + temp_table2 + "</table>");
    }
</script>

-------
-------

<div id="xml_div"></div>

-------
-------

XML File(.xml)

<?xml version="1.0" ?>
<SUBJECTS>
    <CD>
        <NAME>Merbin Joe</NAME>
        <TAMIL>98</TAMIL>
        <ENGLISH>95</ENGLISH>
        <MATHS>92</MATHS>
        <SCIENCE>87</SCIENCE>
        <SOCIAL>100</SOCIAL>
    </CD>
    <CD>
        <NAME>Franklin Jose</NAME>
        <TAMIL>88</TAMIL>
        <ENGLISH>56</ENGLISH>
        <MATHS>99</MATHS>
        <SCIENCE>56</SCIENCE>
        <SOCIAL>79</SOCIAL>
    </CD>
    <CD>
        <NAME>Rajan</NAME>
        <TAMIL>88</TAMIL>
        <ENGLISH>44</ENGLISH>
        <MATHS>56</MATHS>
        <SCIENCE>91</SCIENCE>
        <SOCIAL>53</SOCIAL>
    </CD>
    <CD>
        <NAME>Mano</NAME>
        <TAMIL>77</TAMIL>
        <ENGLISH>64</ENGLISH>
        <MATHS>51</MATHS>
        <SCIENCE>28</SCIENCE>
        <SOCIAL>98</SOCIAL>
    </CD>
    <CD>
        <NAME>Nishanth</NAME>
        <TAMIL>36</TAMIL>
        <ENGLISH>40</ENGLISH>
        <MATHS>46</MATHS>
        <SCIENCE>69</SCIENCE>
        <SOCIAL>78</SOCIAL>
    </CD>
</SUBJECTS>

Output:-
You can run the .xml file alone, but just you can see the "expand(+)" and "collapse(-)" symbol only. And you need a server for watch the actual working in (chrome,IE and etc..). but you can check this using Firefox browser. The output image is below


Advertisement

2 comments:

  1. This tutorial does not show how to "retrive" XML data with jQuery. All you did was send the collected data into a table, using the append function.

    The only relevant line here is line 24. That is not how you "retrive" (you probably meant retriEve) data with jQuery. This is simply how you display it in the element you want.

    ReplyDelete

Notification

Total Pageviews