邮编区号查询JS+XML版

js|xml

 
【原创作者】丛兴滋(cncxz)[E-mail:cncxz@126.com]
【关 键 词】javascript xml 邮编区号
【代码下载】http://www.thisky.cn/down/jsxmlzip.rar

    这几天制作一个系统的邮编区号查询功能,突发奇想制作了这个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];   
   if (myNode.nodeName.toLowerCase()=="table") {myNode.style.display="none";}
  }
  document.getElementById(showID).style.display="";
 }
 function ItemOver(){
  var t=event.srcElement.parentElement;
  t.origClassName=t.className;
  t.className="Over";
 }
 function ItemOut(){
  var t=event.srcElement.parentElement;
  t.className=t.origClassName;  
 }
 
 function Data_Search(KeyWords,KeyField,regExpType){  
  KeyWords=KeyWords.replace(/(^\s*)|(\s*$)/g, "");
  KeyField=KeyField.replace(/(^\s*)|(\s*$)/g, "");
  regExpType=parseInt(regExpType,10);
  if(KeyWords==""||KeyWords==null){
   alert("请输入查询关键词!\n");
  }else{
   document.getElementById("Waiting").style.display="";
   var myHolder=document.getElementById("insertdiv");  
   var myFoot=document.getElementById("footdiv");
   myHolder.innerHTML="";
   myFoot.innerHTML="";    
   setTimeout("Data_Load('"+KeyWords+"','"+KeyField+"',"+regExpType+")",1500); 
  }  
 }
//-->
</script>
</head>

<body>
<div id="control" style="width:560px;">
 <div id="SearchBar" class="SearchBar" style="width:100%;">
  <select 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" style="width:100%;"></div>
 <div id="footdiv" class="foot" style="width:100%;"></div>
 <table id="Waiting" width="200" border="0" align="center" cellpadding="1" cellspacing="1" style="display:none;background-color:#dddddd; margin:10px 0px 10px 0px;">
      <tr>
        <td style="background-color:#ffffff;">
   <MARQUEE direction="right" height="100%" width="100%" scrollamount="9" scrolldelay="0">
    <span style="width:6px; height:20px; background-color:#999999; margin:-5px 2px -5px 2px;"></span>
    <span style="width:6px; height:20px; background-color:#999999; margin:-5px 2px -5px 2px;"></span>
    <span style="width:6px; height:20px; background-color:#999999; margin:-5px 2px -5px 2px;"></span>
   </marquee>
  </td>
      </tr>
    </table> 
</div>

</body>
</html>

时间: 2024-12-01 20:37:46

邮编区号查询JS+XML版的相关文章

《C语言及程序设计》实践参考——区号查询

返回:贺老师课程教学链接 [项目3-区号查询] 在文件PostCode.txt中,提供了全国各省城市的长途区号和邮政编码.请以这个文件为数据来源设计程序,输入城市名,输出该城市的相关的信息. [参考解答] #include <stdio.h> #include <stdlib.h> #include <string.h> int readDate(); int Search(char*,int); void Show(int); struct Code { char p

js手机号码,邮编,区号,身份证 验证程序

js手机号码,邮编,区号,身份证 验证程序 手机号码查询 function checkMobile(){  var sMobile = document.mobileform.mobile.value  if(!(/^13[0-9]d{4,8}$/.test(sMobile))){   alert("请输入手机号码(至少前7位)");   document.mobileform.mobile.focus();   return false;  } } //邮编查询 function c

全国省份,城市,地区全数据(SQL版与XML版)包括各城市邮编

应一位园子里的朋友的要求,发一下这个数据,所有数据都是本人自己在网上找的,然后整理了一下: 这套数据共包括: 省份34个(包括港澳台地区): 城市345个(每个城市包括一个可通用的邮政编码): 城市对应的地区2862个(这个地区只的是城市中的小的区,比如:北京的海淀区). SQL版: SQL脚本下载:点击下载 运行脚本时候将第一行的 USE [DBCT_Dev] 中的 DBCT_Dev 改为要插入数据的数据库名,还可以修改各个表名,默认的表名为:省份[S_Province],城市[S_City]

javascript支持区号输入的省市二级联动下拉菜单_javascript技巧

省市二级联动下拉菜单,增加了区号输入.多组选项共用一组数据. 选择地区,可以获取区号,填写区号自动选取地区. 某些地市的区号收集中. 省份选择城区 省份选择城区 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

SQL 联合查询与XML解析实例详解_MsSql

SQL 联合查询与XML解析实例           这里举例说明如何实现该功能: (select a.EBILLNO, a.EMPNAME, a.APPLYDATE, b.HS_NAME, replace(replace(a.SUMMARY,char(10), ''),char(13),'') as SUMMARY, cast(c.XmlData as XML).value('(/List/item/No/text())[1]','NVARCHAR(300)') as No, cast(c.X

sql2000全文检索的问题,如我输入查询内容:“图壁厂1号”查询出来的内容不正确

问题描述 具体是这样:查询内容:结果:"图壁厂1号"只要含有"图壁厂"三个字的都出来了"图壁厂11号"查询正确意思就是说只要是那个1号的"1"是小于10的数字,查询都不正确,只要是大于10的查询都正确我想问问sql2000的全文检索在获取关键字的时候怎么取的?我的这个为什么不正确? 解决方案 解决方案二:大于小于没听明白那个似乎是图示列表的说明也没看明白解释清点吧解决方案三:就是说查询"图壁厂1号"或者&q

春运火车票“网购”10分钟搞定 电话加拨区号更易接通

视频:春运购票首日体验 网络电话双通畅 来源:中国新闻网 中新网1月8日电(财经频道 种卿) 2013年春运首日(1月26日)的火车票7日率先在电话.网络开售.中新网财经频道记者体验网络订票过程中,在网络状态良好的环境下,订票过程可以顺利进行:相比网络订票可能存在的不稳定因素,电话订票的成功率则更高,并且,如果在订票电话95105105前加拨非热门地区区号则更容易接通. 网络订票畅通 手机客户端暂未开通 1月7日,春运首日(1月26日)的火车票正式在网络和电话两个售票平台发售.记者今日体验网络购

脚本代码:实例解析Js+XML的操作方法

js|xml|脚本 我的xml文件Login.xml如下.<?xml version="1.0" encoding="utf-8" ?><Login>    <Character>        <C Text="热血" Value="0"></C>        <C Text="弱气" Value="1"><

一拖三下拉菜单(js+xml+asp)

js|xml|菜单|下拉 <script>var m_oXMLDoc = new ActiveXObject("Microsoft.XMLDOM");//--------------cid为父级IDvar m_sBaseSrc = "Tree.asp?cid=";//---------------id 为所属类型-----var m_sBaseSrc1 = "&id=";var m_post=3; function BindS