Javascript: simple xml request

Question

I am learning this stuff so my code might not be pretty... but would appreciate some help :)

I have not written the following code but got it from somewhere else off the web:

function text_xml()
{
    realXmlUrl="http://jumac.com/del_me_fruits.xml";
    http_request = false;
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType)
    {
        http_request.overrideMimeType('text/xml');
    }

    http_request.onreadystatechange = this.response_xml;
    http_request.open('GET', realXmlUrl, true);
    http_request.send(null);
    xmlDoc = http_request.responseXML;
}

function response_xml()
{
    if (self.http_request.readyState == 4)
    {
        document.getElementById("ex").appendChild(document.createTextNode(" Done!"));
        getFruits(http_request.responseText);
    }
}

function getFruits(xml) {
  var fruits = xml.getElementsByTagName("fruits")[0];
  if (fruits) {
    var fruitsNodes = fruits.childNodes;
    if (fruitsNodes) {
      for (var i = 0; i < fruitsNodes.length; i++) {
        var name = fruitsNodes[i].getAttribute("name");
        var colour = fruitsNodes[i].getAttribute("colour");
        alert("Fruit " + name + " is coloured " + colour);
      }
    }
  }
}

And the error I am getting is:

Error: xml.getElementsByTagName is not a function

What am I doing wrong?

score 5 · Accepted Answer · edited May 23 '17 at 12:31

responseText is a string, not an XML. Are you looking for responseXML?

Update

If your script is loaded from a different domain than the XML document you're loading (http://jumac.com/del_me_fruits.xml), then XMLHttpRequest will act differently depedning on the browser.

On IE 8, it will pop up a warning window complaining that "The page is accessing information that is not under its control. This poses a security risk. Do you want to continue?" if you click yes, then it will work correctly (i.e., the XML will load and the alerts for the fruits will be displayed).

On Chrome 12, however, it doesn't pop anything and it will say that "XMLHttpRequest cannot load http://jumac.com/del_me_fruits.xml. Origin http://localhost:54671 is not allowed by Access-Control-Allow-Origin." Because of this error, the responseXML property of the request object will be null and you'll see the error you have.

There are other questions regarding cross-domain XMLHttpRequest where you may find how to solve your issues, such as Cross-site XMLHttpRequest and http://code.google.com/chrome/extensions/xhr.html.

<body>
    <script type="text/javascript">
        function text_xml() {
            realXmlUrl = "http://jumac.com/del_me_fruits.xml";
            http_request = false;
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }

            http_request.onreadystatechange = this.response_xml;
            http_request.open('GET', realXmlUrl, true);
            http_request.send(null);
            xmlDoc = http_request.responseXML; // this doesn't have anything
        }

        function response_xml() {
            if (self.http_request.readyState == 4) {
                document.getElementById("ex").appendChild(document.createTextNode(" Done!"));
                getFruits(http_request.responseXML);
            }
        }

        function getFruits(xml) {
            var fruits = xml.getElementsByTagName("fruits")[0];
            if (fruits) {
                var fruitsNodes = fruits.childNodes;
                if (fruitsNodes) {
                    for (var i = 0; i < fruitsNodes.length; i++) {
                        var name = fruitsNodes[i].getAttribute("name");
                        var colour = fruitsNodes[i].getAttribute("colour");
                        alert("Fruit " + name + " is coloured " + colour);
                    }
                }
            }
        }
    </script>

    <input type="button" value="Click me" onclick="text_xml();" />
    <p><div id="ex"></div></p>
</body>

ok, changed that and now it says `Error: xml is undefined` on line 56 which is this one: var fruits = xml.getElementsByTagName("fruits")[0]; — Ryan, Jul 30 '11 at 00:11
Sorry, the name is `responseXML` (I updated the answer). Also, is the response from the server XML? — carlosfigueira, Jul 30 '11 at 00:55
Still not working... and yes, it is an xml file on the server,you can visit and see it: http://jumac.com/del_me_fruits.xml — Ryan, Jul 30 '11 at 01:00
You may be hitting a cross-domain issue. I've updated the answer with more information. — carlosfigueira, Jul 30 '11 at 14:41

Mark Cartagena · Answer 2 · 2018-06-26T13:23:50.143

I usually love using a dictionary when working with any kind of transferring data across servers.

MkNxGn.pro provides a sleek way to make XML HTTP requests via MkNxGn Proquest.

Load Proquest, This can be separate from the code
<script src="https://mknxgn.pro/scripts/Proquest_Proquest-v1.0.js"></script>

<script> Proquest("POST", URL_HERE, DATA,<br> HEADERS, RType, Ignore JSON errors, Callback); </script>

That way you could easily write:

<script> Proquest("GET", "http://jumac.com/del_me_fruits.xml", Skip, {'Content-type': 'text/xml'}, 'response', false, function(resp) { resp.overrideMimeType('text/xml'); //Looks like you want it to be XML if its not. document.getElementById("ex").appendChild(document.createTextNode(" Done!")); getFruits(resp.responseXML); }); </script>

ignoring jason's edit to rewrite it better.

score -1 · Answer 3 · answered Jul 30 '11 at 14:49

-1

Consider using a javascript libary like jquery.

jquery ajax is pretty much self explaining and you don't have to mess with brower compatibility. http://jquery.com/

answered Jul 30 '11 at 14:49

Mythli

5,995
2
24
31

1

You could add some links to your suggestion instead of just linking to jQuery, not very useful in this way – Jeredepp Aug 05 '13 at 07:27
You don't answer the OP question. – Feb 07 '15 at 13:13

Javascript: simple xml request

3 Answers3