当前位置:首页>网络学院>程序开发>XML教程>文章内容

邮编区号查询JS+XML版

[ 来源:www.it55.com | 作者: | 时间:2007-07-14 | 收藏 | 推荐 ] 【

 

【原创作者】丛兴滋(cncxz)[E-mail:cncxz@126.com]
【关 键 词】javascript xml 邮编区号
【代码下载】http://www.thisky.cn/down/jsxmlzip.rar 45398 www.it55.com it55学习IT知识,享受IT生活 4dfkjn

    这几天制作一个系统的邮编区号查询功能,突发奇想制作了这个js+xml版的,因为xml数据量较大(2000多条记录),所以若是网速较慢的话,会有画面停顿的现象,我曾打算预加载xml数据,可惜没能实现(光找到了预加载图片的方法,你要知道预加载xml的方法可以告诉我,谢谢)。下面是邮编区号查询js+xml版的核心代码: sflj www.it55.com kg^&fgd

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>

免费资源www.it55.com


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;}

IT资讯之家 www.it55.com

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');
}

45398 www.it55.com it55学习IT知识,享受IT生活 4dfkjn

.Item{
 font-size:12px;height:20px;
 text-indent:5px;
 border-bottom:1px solid #dddddd;
 background-color:#fafafa;
} sflj www.it55.com kg^&fgd

.Over{
 font-size:12px;height:20px;
 text-indent:5px;
 border-bottom:1px solid #dddddd;
 background-color:#f5f5f5;
}

http://www.it55.com/

.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");   sflj www.it55.com kg^&fgd
  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>");     sflj www.it55.com kg^&fgd
     myTable.className="mainTable";
     myTr=myTable.insertRow();

(编辑:IT资讯之家 www.it55.com

返回顶部
共3页: 上一页 1 [2] [3] 下一页  

网友评论

[以下评论为网友观点,不代表本站。请自觉遵守互联网相关政策法规,所有连带责任均有评论者自负。]
[不超过250字]

图片文章