寻求高人，优化这段JavaScript代码

Question

如题，我先说下，这段代码可以兼容IE和firefox浏览器，我曾经尝试只用支持firefox浏览器的JavaScript代码（大小8K），但是在IE浏览器下有延迟加载现象，大概要9秒才显示效果。
希望高手帮我把现有的代码优化下（现在代码大小13K），或者有没有更好的JavaScript代码，如有提供者可以加分。
代码如下：
支持firefox浏览器的JavaScript代码：<script language="javascript">
      function LoadXML()
      {
          xmlDoc=null;
       if (window.ActiveXObject){
          xmlDoc = new ActiveXObject('Msxml2.DOMDocument'); 
          xmlDoc.async=true; 
          xmlDoc.load("Area.xml"); 
        } 
        else if (document.implementation && document.implementation.createDocument){ 
            var xmlhttp = new window.XMLHttpRequest(); 
            xmlhttp.open("GET","Area.xml",false); 
            xmlhttp.send(null); 
            var xmlDoc = xmlhttp.responseXML.documentElement;
        } 
        else {
            xmlDoc=null;
          } 
        return xmlDoc; 
      }
      function InitArea()
      {
                var dropElement1=document.getElementById("1");
                var dropElement2=document.getElementById("2");
                var dropElement3=document.getElementById("3");
                var pro=document.getElementById("province");
                var cit=document.getElementById("city");
                var cou=document.getElementById("district");
                  RemoveDropDownList(dropElement1);
                  RemoveDropDownList(dropElement2);
                  RemoveDropDownList(dropElement3);
  dropElement2.options.add(new Option("请选择市","00"));
  dropElement3.options.add(new Option("请选择区","00"));
                var xmlDoc = LoadXML();
                var lIdElem=xmlDoc.getElementsByTagName("province");
                var lIdElem1=xmlDoc.getElementsByTagName("city");
                var lIdElem2=xmlDoc.getElementsByTagName("county");
                if(lIdElem.length > 0)
                  {
                       if(pro.value!=0){
                          for(var i=0;i<lIdElem.length;i++)
                          {
                            var pid=xmlDoc.getElementsByTagName("province")[i].getAttribute("id");
                            var pname=xmlDoc.getElementsByTagName("province")[i].getAttribute("name");
                            if(pro.value==pid){
                            dropElement1.options.add(new Option(pname,pid));
                                              }
                          }
                        }
                      if(cit.value!=0){
                        for(var i=0;i<lIdElem1.length;i++)
                        {
                          var cid=xmlDoc.getElementsByTagName("city")[i].getAttribute("id");
                          var cname=xmlDoc.getElementsByTagName("city")[i].getAttribute("name");
                          if(cit.value==cid){
                                dropElement2.options.add(new Option(cname,cid));
                              }
                        }
                      }
                      if(cou.value!=0){
                        for(var i=0;i<lIdElem2.length;i++)
                        {
                          var couid=xmlDoc.getElementsByTagName("county")[i].getAttribute("id");
                          var couname=xmlDoc.getElementsByTagName("county")[i].getAttribute("name");
                          if(cou.value==couid){
                                dropElement3.options.add(new Option(couname,couid));
                              }
                        }
                        }
                      //------------------------------------------------------------------------
                        for(var i=0;i<lIdElem.length;i++){
                            var pid=xmlDoc.getElementsByTagName("province")[i].getAttribute("id");
                            var pname=xmlDoc.getElementsByTagName("province")[i].getAttribute("name");
                            dropElement1.options.add(new Option(pname,pid));
                              
                                }
                  }
           }
        function selectProvince(obj)
        {
              var dropElement1=document.getElementById("1"); 
              var dropElement2=document.getElementById("2"); 
              var dropElement3=document.getElementById("3"); 
              RemoveDropDownList(dropElement2);
              RemoveDropDownList(dropElement3);
              dropElement2.options.add(new Option("请选择市","00"));
              dropElement3.options.add(new Option("请选择区","00"));
                           
              var xmlDoc = LoadXML();
                var lIdElem=xmlDoc.getElementsByTagName("city");
                  if(obj.value!=0){
                  for(var i=0;i<lIdElem.length;i++){
                            var cid=xmlDoc.getElementsByTagName("city")[i].getAttribute("id");
                            var cname=xmlDoc.getElementsByTagName("city")[i].getAttribute("name");
                            var pid=xmlDoc.getElementsByTagName("city")[i].getAttribute("provinceid");
                            //alert(pid+":"+pname);
                            
                            if(obj.value==pid){
                            dropElement2.options.add(new Option(cname,cid));
                            }
                            //sel.options.add(new Option(text,value)); 
                              
                                }
                            }          }
        function selectArea(obj)
        {
                var dropElement3=document.getElementById("3");
                RemoveDropDownList(dropElement3);
                dropElement3.options.add(new Option("请选择区","00"));
                var xmlDoc = LoadXML();
                var lIdElem=xmlDoc.getElementsByTagName("county");
                  if(obj.value!=0){
                  for(var i=0;i<lIdElem.length;i++){
                            var couid=xmlDoc.getElementsByTagName("county")[i].getAttribute("id");
                            var couname=xmlDoc.getElementsByTagName("county")[i].getAttribute("name");
                            var cid=xmlDoc.getElementsByTagName("county")[i].getAttribute("cityid");
                            //alert(pid+":"+pname);
                            
                            if(obj.value==cid){
                            dropElement3.options.add(new Option(couname,couid));
                            }
                            //sel.options.add(new Option(text,value)); 
                              
                                }
                            }                           
          }
        function RemoveDropDownList(obj)
        {
          if(obj)//如果参数obj不为空 则
          {
            var length=obj.options.length;
            if(length > 0)
            {
              for(var i=length; i>=0;i--)
              {
                obj.remove(i);
              }
            }
          }
        }
        window.onload=InitArea;
    </script>

Answer 1

可以兼容IE和firefox浏览器不延迟的代码：<script language="javascript">
      function LoadXML()
      {
          xmlDoc=null;
       if (window.ActiveXObject){
          xmlDoc = new ActiveXObject('Msxml2.DOMDocument'); 
          xmlDoc.async=true; 
          xmlDoc.load("Area.xml"); 
        } 
        else if (document.implementation && document.implementation.createDocument){ 
            var xmlhttp = new window.XMLHttpRequest(); 
            xmlhttp.open("GET","Area.xml",false); 
            xmlhttp.send(null); 
            var xmlDoc = xmlhttp.responseXML.documentElement;
        } 
        else {
            xmlDoc=null;
          } 
        return xmlDoc; 
      }
      function InitArea()
      {
                var dropElement1=document.getElementById("1");
                var dropElement2=document.getElementById("2");
                var dropElement3=document.getElementById("3");
                var pro=document.getElementById("province");
                var cit=document.getElementById("city");
                var cou=document.getElementById("district");
                  
                  RemoveDropDownList(dropElement1);
                  RemoveDropDownList(dropElement2);
                  RemoveDropDownList(dropElement3);
                var xmlDoc = LoadXML();
                var lIdElem=xmlDoc.getElementsByTagName("province");
                var lIdElem1=xmlDoc.getElementsByTagName("city");
                var lIdElem2=xmlDoc.getElementsByTagName("county");
                if(window.ActiveXObject){
                      var provinceNodes = xmlDoc.selectNodes("//province");
                      var provinceNodes1 = xmlDoc.selectNodes("//city");
                      var provinceNodes2 = xmlDoc.selectNodes("//county");
                      //----------------------------------------------------
                      if(lIdElem.length > 0)
                        {
                          var province;
                          var city;
                          var district;
                          if(pro.value!=0){
                            for(var i=0;i<lIdElem.length;i++)
                            {
                              province = provinceNodes[i];
                              if(pro.value==province.getAttribute("id")){
                                    var pOption = document.createElement("option");
                                    pOption.value = province.getAttribute("id");
                                    pOption.text = province.getAttribute("name");
                                    dropElement1.add(pOption);
                                  }
                            }
                          }
                          if(cit.value!=0){
                            for(var i=0;i<lIdElem1.length;i++)
                            {
                              city = provinceNodes1[i];
                              if(cit.value==city.getAttribute("id")){
                                    var cOption = document.createElement("option");
                                    cOption.value = city.getAttribute("id");
                                    cOption.text = city.getAttribute("name");
                                    dropElement2.add(cOption);
                                  }
                            }
                          }else{
                            var cOption = document.createElement("option");
                            cOption.value = "0";
                            cOption.text = "请选择市";
                            dropElement2.add(cOption);
                          }
                          if(cou.value!=0){
                            for(var i=0;i<lIdElem2.length;i++)
                            {
                              district = provinceNodes2[i];
                              if(cou.value==district.getAttribute("id")){
                                    var aOption = document.createElement("option");
                                    aOption.value = district.getAttribute("id");
                                    aOption.text = district.getAttribute("name");
                                    dropElement3.add(aOption);
                                  }
                            }
                          }else{
                              var aOption = document.createElement("option");
                              aOption.value = "0";
                              aOption.text = "请选择区";
                              dropElement3.add(aOption);
                          }
              for(var i=0;i<lIdElem.length;i++)
              {
                province = provinceNodes[i];
                var pOption = document.createElement("option");
                pOption.value = province.getAttribute("id");
                pOption.text = province.getAttribute("name");
                dropElement1.add(pOption);
              }
                  }
              }else{
                  if(lIdElem.length > 0)
                  {
                       if(new Number(pro.value)>0){
                          for(var i=0;i<lIdElem.length;i++)
                          {
                            var pid=xmlDoc.getElementsByTagName("province")[i].getAttribute("id");
                            var pname=xmlDoc.getElementsByTagName("province")[i].getAttribute("name");
                            if(pro.value==pid){
                            dropElement1.options.add(new Option(pname,pid));
                      }
                }
              }
                      if(new Number(cit.value)!=0){
                        for(var i=0;i<lIdElem1.length;i++)
                        {
                          var cid=xmlDoc.getElementsByTagName("city")[i].getAttribute("id");
                          var cname=xmlDoc.getElementsByTagName("city")[i].getAttribute("name");
                          if(cit.value==cid){
                                dropElement2.options.add(new Option(cname,cid));
                              }
                        }
                      }else{
                        dropElement2.options.add(new Option("请选择市","00"));
                      }
              if(new Number(cou.value)!=0){
                for(var i=0;i<lIdElem2.length;i++)
                {
                  var couid=xmlDoc.getElementsByTagName("county")[i].getAttribute("id");
                  var couname=xmlDoc.getElementsByTagName("county")[i].getAttribute("name");
                  if(cou.value==couid){
                        dropElement3.options.add(new Option(couname,couid));
                      }
                }
              }else{
                  dropElement3.options.add(new Option("请选择区","00"));
              }
                      //------------------------------------------------------------------------
                  for(var i=0;i<lIdElem.length;i++){
                            var pid=xmlDoc.getElementsByTagName("province")[i].getAttribute("id");
                            var pname=xmlDoc.getElementsByTagName("province")[i].getAttribute("name");
                            dropElement1.options.add(new Option(pname,pid));
                                }
                  }
                }
            }

Answer 2

        function selectProvince(obj)
        {
          var dropElement1=document.getElementById("1"); 
          var dropElement2=document.getElementById("2"); 
          var dropElement3=document.getElementById("3"); 
          RemoveDropDownList(dropElement2);
          RemoveDropDownList(dropElement3);
          var xmlDoc = LoadXML();
        if (window.ActiveXObject){
          var cOption = document.createElement("option");
          cOption.value = "0";
          cOption.text = "请选择市";
          dropElement2.add(cOption);          var aOption = document.createElement("option");
          aOption.value = "0";
          aOption.text = "请选择区";
          dropElement3.add(aOption);
          var lIdElem=xmlDoc.selectNodes("//city");
          var provinceNodes = xmlDoc.selectNodes("//city");
          if(lIdElem.length > 0)
            {
              var province;
              var city;
              var district;
              for(var i=0;i<lIdElem.length;i++)
              {
                province = provinceNodes[i];
                if(obj.value==province.getAttribute("provinceid")){
                var cOption = document.createElement("option");
                cOption.value = province.getAttribute("id");
                cOption.text = province.getAttribute("name");
                dropElement2.add(cOption);
                }
              }
            }
          }else{
                var lIdElem=xmlDoc.getElementsByTagName("city");
                          dropElement2.options.add(new Option("请选择市","00"));
                          dropElement3.options.add(new Option("请选择区","00"));
                  if(obj.value!=0){
                  for(var i=0;i<lIdElem.length;i++){
                            var cid=xmlDoc.getElementsByTagName("city")[i].getAttribute("id");
                            var cname=xmlDoc.getElementsByTagName("city")[i].getAttribute("name");
                            var pid=xmlDoc.getElementsByTagName("city")[i].getAttribute("provinceid");
                            if(obj.value==pid){
                            dropElement2.options.add(new Option(cname,cid));
                            }
                                }
                            }          }
       }
        function selectArea(obj)
        {
            var dropElement3=document.getElementById("3");
            RemoveDropDownList(dropElement3);
            var xmlDoc = LoadXML();
          if (window.ActiveXObject){
            var aOption = document.createElement("option");
            aOption.value = "0";
            aOption.text = "请选择区";
            dropElement3.add(aOption);
            var lIdElem=xmlDoc.selectNodes("//county");
            var cityNodes = xmlDoc.selectNodes("//county");
            if(lIdElem.length > 0)
              {
              var province;
              var city;
              var district;
              for(var i=0; i<lIdElem.length; i++)
                  {
                    city = cityNodes[i];
                    if(obj.value==city.getAttribute("cityid")){
                      var aOption = document.createElement("option");
                      aOption.value = city.getAttribute("name");
                      aOption.text = city.getAttribute("name");
                      dropElement3.add(aOption);
                    }
                  }
              }
            }else{
                var lIdElem=xmlDoc.getElementsByTagName("county");
                          dropElement3.options.add(new Option("请选择区","00"));
                  if(obj.value!=0){
                  for(var i=0;i<lIdElem.length;i++){
                            var couid=xmlDoc.getElementsByTagName("county")[i].getAttribute("id");
                            var couname=xmlDoc.getElementsByTagName("county")[i].getAttribute("name");
                            var cid=xmlDoc.getElementsByTagName("county")[i].getAttribute("cityid");
                            if(obj.value==cid){
                            dropElement3.options.add(new Option(couname,couid));
                            }
                                }
                            }          }
        }
        function RemoveDropDownList(obj)
        {
          if(obj)
          {
            var length=obj.options.length;
            if(length > 0)
            {
              for(var i=length; i>=0;i--)
              {
                obj.remove(i);
              }
            }
          }
        }
      window.onload=InitArea;
     </script>

Answer 3

        function RemoveDropDownList(obj)
        {
          if(obj)//如果参数obj不为空 则
          {
            var length=obj.options.length;
            if(length > 0)
            {
              for(var i=length; i>=0;i--)
              {
                obj.remove(i);
              }
            }
          }
        }
--------------
        function RemoveDropDownList(obj)
        {
          obj.options.length=0;
         }

Answer 4

封装一下代码.1 创建option2 选择城市或地区后填充select3 从XML里面取数据这三个封装好了之后，你的代码可以减少一半.

Answer 5

return top
仅仅给个不完善的思路供你参考。<script type=text/javascript>
////Class////
function $(){
         var o = arguments;
         return o.length == 1 ? (typeof o[0] == "function" ? (window.onload = o[0]) : (/^#/.test(o[0]) ? 
         document.getElementsByTagName(o[0].replace(/^#/,"")) : (document.getElementById(o[0])||o[0]))): 
         o.length == 2 ? o[1](o[0]) : o.length == 3 ? function(e, t, f){e.attachEvent ? 
         e.attachEvent('on'+ t, function(){f.call(e)}):e.addEventListener(t, f, false)}(o[0],o[1],o[2]): 
         null
}
$.ajax = function(data, back){
         var meth = data.meth||"GET", path = data.path||data, asyc = data.asyc||true, type = data.type||"Text", back = back||data.success;
         var Xobj = function(){
                  try {
                       return new ActiveXObject("Msxml2.XMLHTTP.6.0"||"Msxml2.XMLHTTP.4.0"||"Msxml2.XMLHTTP.3.0"||"Msxml2.XMLHTTP"||"Microsoft.XMLHTTP")
                  }catch(e){
                       try { 
                            return new XMLHttpRequest()
                       }catch(e){return false}
                  }
         }();
         !!Xobj && function(){
                  try {
                       Xobj.open(meth, path, asyc);
                       Xobj.onreadystatechange = function () {
                            Xobj.readyState == 4 && (Xobj.status == 200 || Xobj.status == 0) && back(Xobj["response"+type]) && (Xobj = null);
                  }
                       Xobj.send(null);
                  }catch(e){}
         }();
         return this
}
///////////$.ajax("http://www.baidu.com", function(o){alert(o)});$(function(){
         $.ajax({
                //meth : "",
                //asyc : "", 
                  type : "XML",
                  path : "http://blog.sina.com.cn/rss/kaifulee.xml",
                  success : function(o){
                       alert(o.xml);
                       $("show").value = o.xml;
                  }
         })
})
</script><textarea id="show" style="width:600px;height:500px"></textarea>

Answer 6

<script type=text/javascript>
////public method base////////////////
(function(){try{$}catch(e){}finally{this.$ = null}})();
var  $ = function(){
         var o = arguments;
         return o.length == 1 ? (typeof o[0] == "function" ? (window.onload = o[0]) : (/^#/.test(o[0]) ? 
         document.getElementsByTagName(o[0].replace(/^#/,"")) : (document.getElementById(o[0])||o[0]))): 
         o.length == 2 ? o[1](o[0]) : o.length == 3 ? function(e, t, f){e.attachEvent ? 
         e.attachEvent('on'+t, function(){f.call(e)}) : e.addEventListener(t, f, !1)}(o[0], o[1], o[2]): 
         null
}
$.ajax = function(data, back){
         var meth = data.meth||"GET", path = data.path||data, asyc = data.asyc||true, type = data.type||"Text", back = back||data.success;
         var Xobj = function(){
                  try {
                       return new ActiveXObject("Msxml2.XMLHTTP.6.0"||"Msxml2.XMLHTTP.4.0"||"Msxml2.XMLHTTP.3.0"||"Msxml2.XMLHTTP"||"Microsoft.XMLHTTP")
                  }catch(e){
                       try { 
                            return new XMLHttpRequest()
                       }catch(e){return false}
                  }
         }();
         !!Xobj && function(){
                  try {
                       Xobj.open(meth, path, asyc);
                       Xobj.onreadystatechange = function () {
                            Xobj.readyState == 4 && (Xobj.status == 200 || Xobj.status == 0) && back(Xobj["response"+type]) && (Xobj = null);
                  }
                       Xobj.send(null);
                  }catch(e){}
         }();
         return this
}
//////////////////////////////////////$.ajax("http://www.baidu.com", function(o){alert(o)});$(function(){
         $.ajax({
                //meth : "",
                //asyc : !!0, 
                  type : "XML",
                  path : "http://blog.sina.com.cn/rss/kaifulee.xml",
                  success : function(o){
                       alert(o.xml);
                       $("show").value = o.xml;
                  }
         })("show").value = "下面显示返回内容";
})
</script><textarea id="show" style="width:600px;height:500px"></textarea>

Answer 7

<script type=text/javascript>
////public method base////////////////
(function(){
        var OMY = function(){
                  var o = arguments;
                  return o.length == 1 ? (typeof o[0] == "function" ? (window.onload = o[0]) : (/^#/.test(o[0]) ? 
                  document.getElementsByTagName(o[0].replace(/^#/,"")) : (document.getElementById(o[0])||o[0]))): 
                  o.length == 2 ? o[1](o[0]) : o.length == 3 ? function(e, t, f){e.attachEvent ? 
                  e.attachEvent('on'+t, function(){f.call(e)}) : e.addEventListener(t, f, !1)}(o[0], o[1], o[2]): 
                  null
        };
        ~function(){try{$}catch(e){return false}}() != false && function(){for(var p in $)OMY[p] = $[p]}();
        this.$ = OMY;
})();
$.ajax = function(data, back){
         var meth = data.meth||"GET", path = data.path||data, asyc = data.asyc||true, type = data.type||"Text", back = back||data.success;
         var Xobj = function(){
                  try {
                       return new ActiveXObject("Msxml2.XMLHTTP.6.0"||"Msxml2.XMLHTTP.4.0"||"Msxml2.XMLHTTP.3.0"||"Msxml2.XMLHTTP"||"Microsoft.XMLHTTP")
                  }catch(e){
                       try { 
                            return new XMLHttpRequest()
                       }catch(e){return false}
                  }
         }();
         !!Xobj && function(){
                  try {
                       Xobj.open(meth, path, asyc);
                       Xobj.onreadystatechange = function () {
                            Xobj.readyState == 4 && (Xobj.status == 200 || Xobj.status == 0) && back(Xobj["response"+type]) && (Xobj = null);
                  }
                       Xobj.send(null);
                  }catch(e){}
         }();
         return this
}
//////////////////////////////////////$.ajax("http://www.baidu.com", function(o){alert(o)});$(function(){
         $.ajax({
                //meth : "",
                //asyc : !!0, 
                  type : "XML",
                  path : "http://blog.sina.com.cn/rss/kaifulee.xml",
                  success : function(o){
                       alert(o.xml);
                       $("show").value = o.xml;
                  }
         })("show").value = "下面显示返回内容";
})
</script><textarea id="show" style="width:600px;height:500px"></textarea>

Answer 8

个人感觉用XML数据格式不好 数据稍微有点大的时候就很容易卡
因为一个节点一个节点的查找做了很多无用功建议楼主用json数据，快得多我以前写的一个人员选择发邮件的脚本，也是ajax动态获取数据，大概有300条记录用xml下载完到解析出来用了3秒，用json没有明显感觉

Answer 9

使用xml也是没有办法事情，原因，我们是三方合作，由客户提供该xml文件，同时第三方还要执行此xml文件来定位其他信息。
不过对您说的json也很感兴趣，是否可以提供一些相关例子，以供参考。
其实，我已经用框架JQurey框架把上述的功能完成，同时也测试成功，我只是想找牛人帮我，优化这段JavaScript代码，供以后操作可用。