Problem with Sending XML Requests

Question

Writing a basic XML file reader into an HTML page. I am having trouble reading from the XML file. Here's my set up: I have three text fields and a button. When the button is pressed, the request is put in to grab three pieces of XML and to populate the three text fields. However, I am running into trouble with the status of the request. I am getting the status code 0, instead of 200. According to my research (http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/282972), I think it has to do with cross domain blocking. I have tried putting the source XML both locally and on a server.

<html>
<head>
<script type="text/javascript">
function displayQuotes()
{
    var xmlhttp;
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
        //if (xmlhttp.readyState==4 && xmlhttp.status==200)
        //{
            document.getElementById("quote1").innerHTML=xmlhttp.status;
        //}
    }   
    xmlhttp.open("GET","http://filebox.vt.edu/users/yiuleung/project5/letter.xml",true);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;

    document.getElementById("quote1").innerHTML=
        xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
    document.getElementById("quote2").innerHTML=
        xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
    document.getElementById("quote3").innerHTML=
        xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
}
</script>
</head>
<body>
<div id="quote1" style="margin:0;padding:0;position:absolute;left:65px;top:319px;width:250px;height:16px;text-align:left;z-index:2;">
    <font style="font-size:13px" color="#000000" face="Arial">Quote 1</font></div>

<div id="quote2" style="margin:0;padding:0;position:absolute;left:65px;top:389px;width:250px;height:16px;text-align:left;z-index:3;">
    <font style="font-size:13px" color="#000000" face="Arial">Quote 2</font></div>

<div id="quote3" style="margin:0;padding:0;position:absolute;left:65px;top:458px;width:250px;height:16px;text-align:left;z-index:4;">
    <font style="font-size:13px" color="#000000" face="Arial">Quote 3</font></div>

<input type="button" id="shuffle_button" name="" value="Shuffle" onClick=displayQuotes() style="position:absolute;left:316px;top:228px;width:96px;height:25px;font-family:Arial;font-size:13px;z-index:10">
</body>
</html>

I just edited my question above due to the fact that I made a few changes and learned a bit online, but still having trouble — user954086
– user954086, Commented Sep 20, 2011 at 6:38

beaver · Accepted Answer · 2018-08-23 09:19:08Z

2

You use xmlhttp.open("GET","letter.xml",true); - it open XMLHttpRequest in async mode. But next two lines of your code expected to work in sync mode. You need to switch to sync mode: xmlhttp.open("GET","letter.xml",false); or (better) to modify code for work in async mode, as in example below:

function displayQuotes()
{
  var xmlhttp;
  xmlhttp=new XMLHttpRequest();
  xmlhttp.open("GET","letter.xml",true);
  xmlhttp.onreadystatechange=function() {
    console.info(xmlhttp.readyState,"|",xmlhttp.status,"|",xmlhttp.statusText); // for debugging only
    if(xmlhttp.readyState===4&&xmlhttp.status===200) {
      // HTTP OK
      xmlDoc=xmlhttp.responseXML; // maybe var xmlDoc ???
      document.getElementById("quote1").innerHTML=
        xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
      document.getElementById("quote2").innerHTML=
        xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
      document.getElementById("quote3").innerHTML=
        xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
    }
  };
  xmlhttp.send(null);
}

Using XMLHttpRequest in MDN: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

edited Aug 23, 2018 at 9:19

beaver

5271 gold badge9 silver badges21 bronze badges

answered Sep 20, 2011 at 6:31

Andrew D.

8,2103 gold badges24 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user954086 Over a year ago

Thank you for your suggestion, I have taken them and moved the code around. However, I am getting the error where xmlhttp.status == 0 instead of 200. Little bit more background, both of these files, .html and .xml, are in my file system.

Andrew D. Over a year ago

@user. First: I'm add some edits into my code (see edited link: removed } after function() {). Next: Your updated question example is not same as in my answer. You exactly use my code? Specially for you: added console.info into code. Try updated code and place generated javascript console output into next comment. Last: What you means files in my file system? Which URL of your HTML file is displaied in browser address bar (all url, with protocol if found)?

user954086 Over a year ago

I appreciate your help thus far. I have copied everything from your snippet above. I tried two different things. First, both my HTML and XML files are on my computer. That generated an error on the console: xmlHttpRequest cannot load file://...letter.xml. Cross origin requests are only supported for HTTP. Then I tried uploading my xml file onto a filebox online. Now the error is xmlHttpRequest cannot load filebox.vt.edu/.../letter.xml. Origin null is not allowed by Access-control-allow origin. In both cases, the status is still 0.

Andrew D. Over a year ago

I'm not sure about: does XMLHttpRequest supports file:// protocol or not. Best variant for testing is to use IIS or Apache web-server installed. For your example with file:// protocol: You can try (for testing) use xmlhttp.open("GET","file://same_fullpath_as_for_html_file/letter.xml",true); If this test not succs, try to download both files: xml and html on same server. Or (best) insall for testing local web-server software (apache or iis, if you have Win).

Collectives™ on Stack Overflow

Problem with Sending XML Requests

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related