具有郵編區號查詢功能的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(Key Words,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("Z　　myTd=myTr.insertCell();
　　myTd.innerText=myNodes(i).getAttribute("Areacode");
　　
　　myTr.attachEvent("onmou SEOver",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字符編碼經驗總結