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 onClick="Javascript:Data_Search(document.getElementById('Text_Words').value,document.getElementById('Select_FIEld').value,document.getElementById('Select_Reg').value)" 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>