邮编区号查询JS+XML版

2022-07-15 80酷酷网 80kuku.com

　　js|xml

【原创作者】丛兴滋（cncxz）[E-mail：]
【关键词】javascript xml 邮编区号
【代码下载】

这几天制作一个系统的邮编区号查询功能，突发奇想制作了这个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 +"' 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 id="control" id="SearchBar" class="SearchBar" name="Select_Field" id="Select_Field">
   <option value="Province" selected>省份</option>
   <option value="County">地区</option>
   <option value="Zipcode">邮编</option>
   <option value="Areacode">区号</option>
  </select>
  <select name="Select_Reg" id="Select_Reg">
   <option value="0" selected>等于</option>
   <option value="1">包含</option>
   <option value="2">以...开头</option>
   <option value="3">以...结尾</option>
  </select>
  <input name="Text_Words" type="text" id="Text_Words" value="山东" class="textfield">
  <span class="button">搜索</span>
</div>
<div id="insertdiv" id="footdiv" class="foot" id="Waiting" width="200" border="0" align="center" cellpadding="1" cellspacing="1" margin:10px 0px 10px 0px;">
      <tr>
        <td direction="right" height="100%" width="100%" scrollamount="9" scrolldelay="0">
    <span height:20px; background-color:#999999; margin:-5px 2px -5px 2px;"></span>
    <span height:20px; background-color:#999999; margin:-5px 2px -5px 2px;"></span>
    <span height:20px; background-color:#999999; margin:-5px 2px -5px 2px;"></span>
   </marquee>
  </td>
      </tr>
    </table>
</div>

</body>
</html>