How to fetch data from xml that on different domain using ajax

I have 3 file:
1- index.html on my server that made ajax call and fetch xml content.
2- openingHours.xml that hold the content (in the remote server).
3- xml.php the server file (in the remote server).

index.html


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <script>
        var xmlHttp;
        var output;

        function fetch()
        {
            xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = callback;

            //open connection
            xmlHttp.open("GET", "https://ajax-c9-a1_shay.c9.io/xml.php", true);
            xmlHttp.send();
        }

        function callback()
        {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
            {
                var holdOneTagName;
                //get all the node name bank
                var holdAllTheBanksNodes = xmlHttp.responseXML.documentElement.getElementsByTagName("BANK");
                //start create the table for all data
                output = "<table border='1'><tr><th>Bank name</th><th>morning</th><th>afternoon</th></tr>";
                output = output   "<tr>";
                
                for(var i=0 ; i<holdAllTheBanksNodes.length ; i  )
                {
                    holdOneTagName = holdAllTheBanksNodes[i].getElementsByTagName("name");
                    output = output   "<td>"   holdOneTagName[0].firstChild.nodeValue   "</td>";

                    holdOneTagName = holdAllTheBanksNodes[i].getElementsByTagName("morning");
                    output = output   "<td>"   holdOneTagName[0].firstChild.nodeValue   "</td>";

                    holdOneTagName = holdAllTheBanksNodes[i].getElementsByTagName("afternoon");
                    output = output   "<td>"   holdOneTagName[0].firstChild.nodeValue   "</td>";

                    output = output   "</tr>";
                }

                output = output   "</table>";

                document.getElementById('result').innerHTML = output;
            }
        }
    </script>


    <title>Opening Hours</title>
</head>
<body>

<input type="button" value="fetch banks opening hours" onclick="fetch()">

<div id="result">
</div>

</body>
</html>

openingHours.xml


<CATALOG>
    <BANK>
        <name>hapoalim</name>
        <morning>8-12</morning>
        <afternoon>16-19</afternoon>
    </BANK>
    <BANK>
        <name>diskont</name>
        <morning>9-13</morning>
        <afternoon>17-20</afternoon>
    </BANK>
    <BANK>
        <name>leumi</name>
        <morning>10-14</morning>
        <afternoon>18-21</afternoon>
    </BANK>
    <BANK>
        <name>tefahot</name>
        <morning>11-15</morning>
        <afternoon>19-22</afternoon>
    </BANK>
</CATALOG>

xml.php


<?php
header("Access-Control-Allow-Origin: http://localhost:1337");
header('Content-type: application/xml');
readfile('openingHours.xml');
?>

The last option is to made the ajax call when the html and the xml is on the same server, then you only need to change in the html file:


xmlHttp.open("GET", "openingHours.xml", true);

and you don’t need the php file.

fetch xml

Advertisements
This entry was posted in כללי and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s