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

2019-11-18 12:48:57

字体：大中小

来源：转载

供稿：网友

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

上一篇：新手入门之浅谈XML和HTML的关系

下一篇：WEB开发中的JAVA字符编码经验总结