Currently, I am developing an iPhone application in HTML that needs to pull content from an XML file stored on a remote server and display it in a list.
I have successfully accomplished this task when the XML file is hosted on the same server using the following code:
<body>
<div id="container">
<div id="header">
<h1><a href="./">BurgerFast</a></h1>
<p>Menú</p>
<div>
<div id="nav">
<ul>
<span id="lista"></span>
</ul>
</div>
<div id="footer">
<ul>
<li><a href="/assets/cl.png">Acerca de</a></li>
<li><a href="/assets/cl.png">Ayuda</a></li>
</ul>
</div>
</div>
</div>
</div;
<script type="text/javascript">
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","assets/note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var item = xmlDoc.getElementsByTagName("item")
var myElems = "";
for(i = 0 ; i < item.length ; i++){
myElems = myElems + "<li><a>" + item[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "</li></a>";
}
document.getElementById("lista").innerHTML = myElems;
</script>
</body>
All has been working well since the XML file is stored on the same server. However, I want to enhance the app's functionality by enabling it to retrieve XML data from external servers. When I modify the line:
xmlhttp.open("GET","assets/note.xml",false);
to:
xmlhttp.open("GET","http://173.236.56.146/~crayonli/xml/note.xml", true);
I encounter the issue where xmldoc is null every time. This confuses me as the XML file itself remains unchanged.
If anyone could point out where I might be going wrong, I would greatly appreciate it!