How To Navigate Between the CDs Using AJAX With Example

Posted By Bajarangi soft , Posted On 09-10-2020

In Java script we can use navigation to display xml data so today we discuss how to navigate the xml data

How To Navigate Between the CDs Using AJAX With Example

Step 1:
Create Index.php file and implement code as below

<div id='showCD'></div><br>
<input  class="btn btn-info" type="button" onclick="previous()" value="<<">
<input  class="btn btn-info" type="button" onclick="next()" value=">>">

Step 2:
Create demo.xml file and implement code as below.

<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>
    <CD>
        <TITLE>Greatest Hits</TITLE>
        <ARTIST>Dolly Parton</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>RCA</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1982</YEAR>
    </CD>
    <CD>
        <TITLE>Still got the blues</TITLE>
        <ARTIST>Gary Moore</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Virgin records</COMPANY>
        <PRICE>10.20</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Eros</TITLE>
        <ARTIST>Eros Ramazzotti</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>BMG</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1997</YEAR>
    </CD>
    <CD>
        <TITLE>One night only</TITLE>
        <ARTIST>Bee Gees</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1998</YEAR>
    </CD>
    <CD>
        <TITLE>Sylvias Mother</TITLE>
        <ARTIST>Dr.Hook</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS</COMPANY>
        <PRICE>8.10</PRICE>
        <YEAR>1973</YEAR>
    </CD>
    <CD>
        <TITLE>Maggie May</TITLE>
        <ARTIST>Rod Stewart</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Pickwick</COMPANY>
        <PRICE>8.50</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Romanza</TITLE>
        <ARTIST>Andrea Bocelli</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>10.80</PRICE>
        <YEAR>1996</YEAR>
    </CD>
    <CD>
        <TITLE>When a man loves a woman</TITLE>
        <ARTIST>Percy Sledge</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Atlantic</COMPANY>
        <PRICE>8.70</PRICE>
        <YEAR>1987</YEAR>
    </CD>
    <CD>
        <TITLE>Black angel</TITLE>
        <ARTIST>Savage Rose</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Mega</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1995</YEAR>
    </CD>
    <CD>
        <TITLE>1999 Grammy Nominees</TITLE>
        <ARTIST>Many</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Grammy</COMPANY>
        <PRICE>10.20</PRICE>
        <YEAR>1999</YEAR>
    </CD>
    <CD>
        <TITLE>For the good times</TITLE>
        <ARTIST>Kenny Rogers</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Mucik Master</COMPANY>
        <PRICE>8.70</PRICE>
        <YEAR>1995</YEAR>
    </CD>
    <CD>
        <TITLE>Big Willie style</TITLE>
        <ARTIST>Will Smith</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1997</YEAR>
    </CD>
</CATALOG>

Step 3:
Now we implement java script to display xml by navigation button.

<script>
    var i = 0, len;
    displayCD(i);

    function displayCD(i) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                myFunction(this, i);
            }
        };
        xmlhttp.open("GET", "demo.xml", true);
        xmlhttp.send();
    }

    function myFunction(xml, i) {
        var xmlDoc = xml.responseXML;
        x = xmlDoc.getElementsByTagName("CD");
        len = x.length;
        document.getElementById("showCD").innerHTML =
            "Artist: " +
            x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
            "<br>Title: " +
            x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
            "<br>Year: " +
            x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
    }

    function next() {
        if (i < len-1) {
            i++;
            displayCD(i);
        }
    }

    function previous() {
        if (i > 0) {
            i--;
            displayCD(i);
        }
    }
</script>

Complete Code For Navigation Between the CDs Using AJAX With Example

<!DOCTYPE html>
<html>
<head>
    <title>How To Navigate Between the CDs Using AJAX With Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    div {
        font-size: 50px;
    }
</style>
<body>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: tomato">How To Navigate Between the CDs Using AJAX With Example</h1>
    </div>

    <div class="well">
        <div id='showCD'></div>
        <br>
        <input class="btn btn-info" type="button" onclick="previous()" value="<<">
        <input class="btn btn-info" type="button" onclick="next()" value=">>">

        <script>
            var i = 0, len;
            displayCD(i);

            function displayCD(i) {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        myFunction(this, i);
                    }
                };
                xmlhttp.open("GET", "demo.xml", true);
                xmlhttp.send();
            }

            function myFunction(xml, i) {
                var xmlDoc = xml.responseXML;
                x = xmlDoc.getElementsByTagName("CD");
                len = x.length;
                document.getElementById("showCD").innerHTML =
                    "Artist: " +
                    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
                    "<br>Title: " +
                    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
                    "<br>Year: " +
                    x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
            }

            function next() {
                if (i < len - 1) {
                    i++;
                    displayCD(i);
                }
            }

            function previous() {
                if (i > 0) {
                    i--;
                    displayCD(i);
                }
            }
        </script>

    </div>
</div>
</body>
</html>