loadXMLDoc function not working in specified directory

I got these 2 functions in a js file. This xmlDoc=loadXMLDoc("goods.xml"); line works when the xml file is in the same directory but when I change it to xmlDoc=loadXMLDoc("../../data/goods.xml");, it doesn't show anything. Any idea on why that doesn't work?

function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
    xhttp=new XMLHttpRequest();
  }
else
  {
    xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}



function displayItems() 
{
xmlDoc=loadXMLDoc("goods.xml");

var items = xmlDoc.getElementsByTagName("item");

var div = document.getElementById("mainContent");

for (i=0; i<items.length; i++) 
{
    var id = items[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;
    var name = items[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
    var desc = items[i].getElementsByTagName("desc")[0].childNodes[0].nodeValue;
    var price = items[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;
    var quantity = items[i].getElementsByTagName("quantity")[0].childNodes[0].nodeValue;

    div.innerHTML+="<br/><b>ID:</b><span id=\"book"+i+"\" >"+id+"</span><br/><b>Name:</b><span id=\"book"+i+"\" >"+name+"</span><br/><b>Description: </b><span id=\"authors"+i+"\">"+desc+"</span><br /><b>Quantity: </b><span id=\"ISBN"+i+"\">"+quantity+"</span> <br /><b>Price: </b>$<span id=\"price"+i+"\" >"+price+"</span><br/> <a href=\"#\" onClick=\"AddRemoveItem('Add',"+i+");\" >Add to Shopping Cart</a><br/><br/>";
}
}