js中读取xml遇到路径问题

本人做了一个二级下拉菜单级联，area.xml和city.html代码如下
<?xml version="1.0" encoding="GB2312" ?>
- <area-jct>
- <area name="1">
  <jct>省政府</jct>
  </area>
- <area name="2">
  <jct>朝阳区</jct>
  <jct>宽城区</jct>
  <jct>二道区</jct>
  <jct>南关区</jct>
  <jct>绿园区</jct>
  <jct>双阳区</jct>
  <jct>九台市</jct>
  <jct>榆树市</jct>
  <jct>德惠市</jct>
  <jct>农安县</jct>
  </area>
- <area name="3">
  <jct>船营区</jct>
  <jct>昌邑区</jct>
  <jct>龙潭区</jct>
  <jct>丰满区</jct>
  <jct>舒兰市</jct>
  <jct>桦旬市</jct>
  <jct>蛟河市</jct>
  </area>
  </area-jct>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>test01.html</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <select id="areaID" name="areaID">
            <option value="">请选择....</option>
            <option value="1">省</option>
            <option value="2">长春</option>
            <option value="3">吉林</option>
        </select>
        <select id="jctID" name="jctID">
            <option value="">请选择.....</option>
        </select>
    </body>
    <script language="JavaScript">
     //页面中第一个下拉选的onchange事件
document.getElementById("areaID").onchange = function(){
//1 获取页面中选中的城市名称
var provinceValue = document.getElementById("areaID").value;

//2 解析xml文件
var docXml = parseXML("area.xml");

//3 遍历xml文件中的地区
var provinceXmlElements = docXml.getElementsByTagName("area");

//清空

var cityElement = document.getElementById("jctID");
var optionsOld = cityElement.getElementsByTagName("option");

for(var z=optionsOld.length-1;z>0;z--){
cityElement.removeChild(optionsOld[z]);
}

for(var i=0;i<provinceXmlElements.length;i++){
var provinceXmlElement = provinceXmlElements[i];

var provinceXmlValue = provinceXmlElement.getAttribute("name");

if(provinceValue==provinceXmlValue){

var cityXmlElements = provinceXmlElement.getElementsByTagName("jct");

for(var j=0;j<cityXmlElements.length;j++){
var cityXmlElement = cityXmlElements[j];

var cityXmlValue = cityXmlElement.firstChild.nodeValue;

var optionElement = document.createElement("option");
optionElement.setAttribute("value",cityXmlValue);
var cityText = document.createTextNode(cityXmlValue);
optionElement.appendChild(cityText);

cityElement.appendChild(optionElement);

}
}
}
}

/**
     * 跨浏览器的解析xml文件的函数
     * @param {Object} fileXmlName
     */
        function parseXML(fileXmlName){
            var xmlDoc;
try {//Internet Explorer  创建一个空的xml文档
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try {//Firefox, Mozilla, Opera, 创建一个空的xml文档
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (e) {
}
}
//关闭异步加载
xmlDoc.async = false;
//加载xml文件
xmlDoc.load(fileXmlName);
return xmlDoc;
}

    </script>
</html>
area.xml,city.html在同一文件夹下运行city.html，一切正常，下拉菜单可以级联，但将html代码移至jsp下，就无法正常级联，个人认为是路径有问题，改了多次无果，JSP与area.xml都放在MyEclips WebRoot 　WEB_INF/page/system下，jsp 代码如下
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>

<html>
  <head>
   <title>添加用户</title>
   <LINK href="${pageContext.request.contextPath }/css/Style.css" type="text/css" rel="stylesheet">

   <Script language="javascript">

document.getElementById("areaID").onchange = function(){

var provinceValue = document.getElementById("areaID").value;

var docXml = parseXML("area.xml");

var provinceXmlElements = docXml.getElementsByTagName("area");

var cityElement = document.getElementById("jctID");
var optionsOld = cityElement.getElementsByTagName("option");

for(var z=optionsOld.length-1;z>0;z--){
cityElement.removeChild(optionsOld[z]);
}

for(var i=0;i<provinceXmlElements.length;i++){
var provinceXmlElement = provinceXmlElements[i];

var provinceXmlValue = provinceXmlElement.getAttribute("name");

if(provinceValue==provinceXmlValue){

var cityXmlElements = provinceXmlElement.getElementsByTagName("jct");

for(var j=0;j<cityXmlElements.length;j++){
var cityXmlElement = cityXmlElements[j];

var cityXmlValue = cityXmlElement.firstChild.nodeValue;

var optionElement = document.createElement("option");
optionElement.setAttribute("value",cityXmlValue);
var cityText = document.createTextNode(cityXmlValue);
optionElement.appendChild(cityText);

cityElement.appendChild(optionElement);

}
}
}
}

        function parseXML(fileXmlName){
            var xmlDoc;
try {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try {档
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (e) {
}
}

xmlDoc.async = false;

xmlDoc.load(fileXmlName);
return xmlDoc;
}

   </script>
  </head>

<body>

<select id="areaID" name="areaID">
            <option value="">请选择....</option>
            <option value="1">省委</option>
            <option value="2">长春</option>
            <option value="3">吉林</option>
        </select>
        <select id="jctID" name="jctID">
            <option value="">请选择.....</option>
        </select>

</body>
</html>
敬求高手指点！ javascript xml --------------------编程问答-------------------- WEB_INF 底下是无法直接访问的。你还是放在跟目录下。 --------------------编程问答-------------------- 我试着放在Myeclips本工程根目录和src下，仍然无法级联。在tomcat/webapps下新建一目录将jsp、xml、html放在一起，启动tomcat运行，仍然是html可以级联，jsp不可以,不明其中原因

补充：Java ,  Web 开发