WEB开发网
开发学院WEB开发Jsp 具有邮编区号查询功能的js+xml版 阅读

具有邮编区号查询功能的js+xml版

 2008-01-05 10:17:23 来源:WEB开发网   
核心提示:这几天制作一个系统的邮编区号查询功能,突发奇想制作了这个js+xml版的,具有邮编区号查询功能的js+xml版,因为xml数据量较大(2000多条记录),所以若是网速较慢的话,每页"+ myPageSize+"条,分"+myPageNum+"页显示,会有画面停顿的现象,我曾打算预

  这几天制作一个系统的邮编区号查询功能,突发奇想制作了这个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];

Tags:具有 邮编 区号查询

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接