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

SIOSXIAOQIANG 2010-03-17 01:52:34
如题,我先说下,这段代码可以兼容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>

...全文
371 16 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
浴火_凤凰 2010-03-19
  • 打赏
  • 举报
回复
DOM操作太多了!!!!!
SIOSXIAOQIANG 2010-03-19
  • 打赏
  • 举报
回复
[Quote=引用 11 楼 prototyper 的回复:]
JScript code

<script type=text/javascript>
////public method base////////////////
(function(){
var OMY = function(){
var o = arguments;
return o.len……
[/Quote]
我拜托你啊,要是使用框架,我还用这么问了吗?
请看清楚问题“优化这段代码”!
SIOSXIAOQIANG 2010-03-19
  • 打赏
  • 举报
回复
[Quote=引用 15 楼 ailin84 的回复:]
个人感觉用XML数据格式不好 数据稍微有点大的时候就很容易卡
因为一个节点一个节点的查找做了很多无用功

建议楼主用json数据,快得多

我以前写的一个人员选择发邮件的脚本,也是ajax动态获取数据,大概有300条记录

用xml下载完到解析出来用了3秒,用json没有明显感觉
[/Quote]
使用xml也是没有办法事情,原因,我们是三方合作,由客户提供该xml文件,同时第三方还要执行此xml文件来定位其他信息。
不过对您说的json也很感兴趣,是否可以提供一些相关例子,以供参考。
其实,我已经用框架JQurey框架把上述的功能完成,同时也测试成功,我只是想找牛人帮我,优化这段JavaScript代码,供以后操作可用。
ailin84 2010-03-19
  • 打赏
  • 举报
回复
个人感觉用XML数据格式不好 数据稍微有点大的时候就很容易卡
因为一个节点一个节点的查找做了很多无用功

建议楼主用json数据,快得多

我以前写的一个人员选择发邮件的脚本,也是ajax动态获取数据,大概有300条记录

用xml下载完到解析出来用了3秒,用json没有明显感觉
prototyper 2010-03-18
  • 打赏
  • 举报
回复
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>
SIOSXIAOQIANG 2010-03-18
  • 打赏
  • 举报
回复
期待高手。来!
SIOSXIAOQIANG 2010-03-18
  • 打赏
  • 举报
回复
[Quote=引用 6 楼 danica7773 的回复:]
封装一下代码.

1 创建option

2 选择城市或地区后填充select

3 从XML里面取数据

这三个封装好了之后,你的代码可以减少一半.
[/Quote]
楼上的说得好,我要是会,就不用求助了。
honylan 2010-03-18
  • 打赏
  • 举报
回复
郁闷死我啦,连发个贴都发不了,想提个问题都不能,可用分不够
prototyper 2010-03-18
  • 打赏
  • 举报
回复

<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>

prototyper 2010-03-18
  • 打赏
  • 举报
回复

<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>
打字员 2010-03-17
  • 打赏
  • 举报
回复
封装一下代码.

1 创建option

2 选择城市或地区后填充select

3 从XML里面取数据

这三个封装好了之后,你的代码可以减少一半.
SIOSXIAOQIANG 2010-03-17
  • 打赏
  • 举报
回复
[Quote=引用 4 楼 shan1119 的回复:]
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 R……
[/Quote]
谢谢。
shan1119 2010-03-17
  • 打赏
  • 举报
回复
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;
}
SIOSXIAOQIANG 2010-03-17
  • 打赏
  • 举报
回复
希望有人来帮助我。谢谢。
SIOSXIAOQIANG 2010-03-17
  • 打赏
  • 举报
回复

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>
SIOSXIAOQIANG 2010-03-17
  • 打赏
  • 举报
回复
可以兼容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));
}
}
}
}

87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧