这几天制作一个系统的邮编区号查询功能，突发奇想制作了这个js+xml版的，因为xml数据量较大（2000多条记录），所以若是网速较慢的话，会有画面停顿的现象，我曾打算预加载xml数据，可惜没能实现（光找到了预加载图片的方法，你要知道预加载xml的方法可以告诉我，谢谢）。下面是邮编区号查询js+xml版的核心代码：
1、data.xml文件代码（这里只列了5条，明白他的结构就可以）：
<?xml version="1.0" encoding="gb2312"?>
<!-- 邮编区号数据 -->
<mydata>
<item province="北京" county="北京" zipcode="100000" areacode="010" />
<item province="北京" county="通县" zipcode="101100" areacode="010" />
<item province="北京" county="昌平" zipcode="102200" areacode="010" />
<item province="北京" county="大兴" zipcode="102600" areacode="010" />
<item province="北京" county="密云" zipcode="101500" areacode="010" />
</mydata>
2、index.htm文件代码（这个就是主界面拉）
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>js+xml的邮编区号查询</title>
<style type="text/css">
<!--
body,td,th {
font-size: 12px;}
body {
text-align:center;
background-color:#fefefe;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.maintable{
background-color:#ffffff;border:1px solid #dddddd;
}
.foot{
line-height:20px;text-align:left;
}
.foot a:link,.foot a:visited,.foot a:active{
background-color: #f0f0f0;width:45px; height:20px;
margin:5px 0px 0px 0px;padding:3px 3px 2px 3px;
border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;
border-top:1px solid #f5f5f5;border-left:1px solid #f5f5f5;
color:#000000;text-align:center;
line-height:14px;font-size:12px;
}
.head td{
font-size:14px; letter-spacing:2px;
border-bottom:1px solid #dddddd;
text-align:center;height:24px;
filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#fafafa', endcolorstr='#f0f0f0', gradienttype='0');
}
.item{
font-size:12px;height:20px;
text-indent:5px;
border-bottom:1px solid #dddddd;
background-color:#fafafa;
}
.over{
font-size:12px;height:20px;
text-indent:5px;
border-bottom:1px solid #dddddd;
background-color:#f5f5f5;
}
.searchbar {
font-size:12px; letter-spacing:2px;
border-bottom:1px solid #dddddd;
padding:5px 0px 3px 0px;
margin:4px 0px 4px 0px;
text-align:center;height:24px;
filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#f5f5f5', endcolorstr='#eeeeee', gradienttype='0');
}
.searchbar input.textfield{
border-top:1px solid #dddddd;border-left:1px solid #dddddd;
border-right:1px solid #ffffff;border-bottom:1px solid #ffffff;
background-color: #f5f5f5;line-height:18px;
width:240px;height: 22px;
}
.searchbar span.button{
border: 1px outset #f0f0f0;
background-color: #fafafa;
width:50px;height: 20px;
padding:3px 3px 2px 3px;
cursor:hand;
}
-->
</style>
<script language="javascript">
<!--
function data_load(keywords,keyfield,regexptype){
var myxmlpath="data.xml"; //设置xml文件路径
var myholder=document.getelementbyid("insertdiv");
var myfoot=document.getelementbyid("footdiv");
var mytableid="table_";
var myxmldoc = new activexobject("microsoft.xmldom");
myxmldoc.async="false";
myxmldoc.load(myxmlpath);
var xmlobj=myxmldoc.documentelement;
var mynodes = myxmldoc.documentelement.childnodes;
var mycount=0;
var mypagesize=20;
var mypageindex=1;
var mytable,mytr,mytd;
for (var i=0;i<mynodes.length;i++){
var mycheck=data_filter(keywords,mynodes(i).getattribute(keyfield),regexptype);
if(mycheck==true){
mycount++;
if((mycount-1)==(mypageindex-1)*mypagesize){
mytable=document.createelement("<table id='"+ mytableid + mypageindex +"' style='display:none; width:100%;' border=0>");
mytable.classname="maintable";
mytr=mytable.insertrow();
mytr.classname="head"; //设置表头css
mytd=mytr.insertcell();
mytd.innertext="省份";
mytd=mytr.insertcell();
mytd.innertext="地区";
mytd=mytr.insertcell();
mytd.innertext="邮编";
mytd=mytr.insertcell();
mytd.innertext="区号";
}
mytr=mytable.insertrow();
mytd=mytr.insertcell();
mytr.classname="item"; //设置内容css
mytd.innertext=mynodes(i).getattribute("province");
mytd=mytr.insertcell();
mytd.innertext=mynodes(i).getattribute("county");
mytd=mytr.insertcell();
mytd.innertext=mynodes(i).getattribute("zipcode");
mytd=mytr.insertcell();
mytd.innertext=mynodes(i).getattribute("areacode");
mytr.attachevent("onmouseover",itemover);
mytr.attachevent("onmouseout",itemout);
if(mycount==(mypageindex)*mypagesize){
myholder.appendchild(mytable); //增加表格
var myspan=document.createelement("<span>");
myspan.innerhtml=" <a href='#' onclick='javacript:pagechange(/""+ mytableid + mypageindex +"/")'>第"+mypageindex+"页</a> ";
myfoot.appendchild(myspan);
mypageindex++;
}
}
}
if(mycount>0){
if(mycount>(mypageindex-1)*mypagesize&&mycount!=mypageindex*mypagesize){
myholder.appendchild(mytable); //增加表格
var myspan=document.createelement("<span>");
myspan.innerhtml=" <a href='#' onclick='javacript:pagechange(/""+ mytableid + mypageindex +"/")'>第"+mypageindex+"页</a> ";
myfoot.appendchild(myspan);
mypageindex++;
}
var myinfo=document.createelement("<span>");
var mypagenum=(mypageindex*mypagesize>mycount)?(mypageindex-1):mypageindex;
myinfo.innerhtml="共计【"+mycount+"】条信息，每页"+ mypagesize+"条，分"+mypagenum+"页显示。";
myfoot.appendchild(myinfo);
pagechange(mytableid +"1");
}else{
var myinfo=document.createelement("<span>");
myinfo.innerhtml=" 对不起，没找到任何相关数据...";
myfoot.appendchild(myinfo);
}
document.getelementbyid("waiting").style.display="none";
}
function data_filter(inputwords,inputfieldvalue,regexptype){
inputwords=inputwords.replace(/(^/s*)|(/s*$)/g, "");
inputfieldvalue=inputfieldvalue.replace(/(^/s*)|(/s*$)/g, "");
switch(regexptype){
case 0: //等于
if(inputwords==inputfieldvalue){
return true;
}else{
return false;
}
break;
case 1: //包含
if(inputfieldvalue.indexof(inputwords)>-1){
return true;
}else{
return false;
}
break;
case 2: //以...开头
if(inputfieldvalue.substring(0,inputwords.length)==inputwords){
return true;
}else{
return false;
}
break;
case 3: //以...结尾
if(inputfieldvalue.substring(inputfieldvalue.indexof(inputwords),inputfieldvalue.length)==inputwords){
return true;
}else{
return false;
}
break;
default: //等于
if(inputwords==inputfieldvalue){
return true;
}else{
return false;
}
break;
}
return false;
}
function pagechange(showid){
var myholder=document.getelementbyid("insertdiv");
for(var i=0;i<myholder.childnodes.length; i++){
var mynode = myholder.childnodes[i];
闽公网安备 35060202000074号