jquery读取xml文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>jQuery 读取XML文件-jQuery学习</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">

        h1{color:Green;text-align:center;}

        body{ background-color:#EEEEEE ; font-family:微软雅黑; }

        #showresult{width:600px;overflow:hidden;}

    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#read").click(function () {

                $.ajax({

                    //请求方式为get

                    type: "GET",

                    //xml文件位置

                    url: "sitemap.xml",

                    //返回数据格式为xml

                    dataType: "xml",

                    //请求成功完成后要执行的方法

                    success: function (xml) {

                        $(xml).find("url").each(function (i) {

                            //i从0开始，累加，如果要显示所有数据，将判断去除即可

                            if (i < 10) {

                                //链接地址

                                var location = $(this).find("loc").text();

                                //显示文字

                                var text = $(this).find("loc").text();

                                //动态加载方法:链接地址

                                $("<a>").attr("href", location)

                                //显示文字

                            .text(text)

                                //设置样式

                            .css({ "width": "700px", "float": "left", "margin-bottom": "5px" })

                                //加载到div

                            .appendTo("#showresult");

                            }

                        })

                    }

                });

                return false;

            });

        });

    </script>

</head>

<body>

    <div id="showresult">

        <h1>jQuery读取XML文件</h1>

        <a id="read" href="#" style="width:700px;">点击读取XML</a>

    </div>

</body>

</html>



js读取xml文件




<div id="blog_content" class="blog_content"><p><span style="color:#ff0000;">city.xml 文件</span></p><p><?xml version="1.0" encoding="UTF-8"?>

<root name="中国">

 <province name="请选择省" postcode="100000" >

    <city name="请选择市" postcode="100100" >

   <area name="请选择区" postcode="100101" />

 </city>

  </province>

  <province name="北京市" postcode="110000" >

    <city name="市辖区" postcode="110100" >

        <area name="东城区" postcode="110101" />

        <area name="西城区" postcode="110102" />

        <area name="崇文区" postcode="110103" />

        <area name="宣武区" postcode="110104" />

        <area name="朝阳区" postcode="110105" />

        <area name="丰台区" postcode="110106" />

        <area name="石景山区" postcode="110107" />

        <area name="海淀区" postcode="110108" />

        <area name="门头沟区" postcode="110109" />

        <area name="房山区" postcode="110111" />

        <area name="通州区" postcode="110112" />

        <area name="顺义区" postcode="110113" />

        <area name="昌平区" postcode="110114" />

        <area name="大兴区" postcode="110115" />

        <area name="怀柔区" postcode="110116" />

        <area name="平谷区" postcode="110117" />

    </city>

    <city name="县" postcode="110200" >

        <area name="密云县" postcode="110228" />

        <area name="延庆县" postcode="110229" />

    </city>

  </province>

  <province name="天津市" postcode="120000" >

    <city name="市辖区" postcode="120100" >

        <area name="和平区" postcode="120101" />

        <area name="河东区" postcode="120102" />

        <area name="河西区" postcode="120103" />

        <area name="南开区" postcode="120104" />

        <area name="河北区" postcode="120105" />

        <area name="红桥区" postcode="120106" />

        <area name="塘沽区" postcode="120107" />

        <area name="汉沽区" postcode="120108" />

        <area name="大港区" postcode="120109" />

        <area name="东丽区" postcode="120110" />

        <area name="西青区" postcode="120111" />

        <area name="津南区" postcode="120112" />

        <area name="北辰区" postcode="120113" />

        <area name="武清区" postcode="120114" />

        <area name="宝坻区" postcode="120115" />

    </city>

    <city name="县" postcode="120200" >

        <area name="宁河县" postcode="120221" />

        <area name="静海县" postcode="120223" />

        <area name="蓟县" postcode="120225" />

    </city>

  </province></p><p>  <province name="河北省" postcode="130000" >

    <city name="石家庄市" postcode="130100" >

        <area name="长安区" postcode="130102" />

        <area name="桥东区" postcode="130103" />

        <area name="桥西区" postcode="130104" />

        <area name="新华区" postcode="130105" />

        <area name="井陉矿区" postcode="130107" />

        <area name="裕华区" postcode="130108" />

        <area name="井陉县" postcode="130121" />

        <area name="正定县" postcode="130123" />

        <area name="栾城县" postcode="130124" />

        <area name="行唐县" postcode="130125" />

        <area name="灵寿县" postcode="130126" />

        <area name="高邑县" postcode="130127" />

        <area name="深泽县" postcode="130128" />

        <area name="赞皇县" postcode="130129" />

        <area name="无极县" postcode="130130" />

        <area name="平山县" postcode="130131" />

        <area name="元氏县" postcode="130132" />

        <area name="赵县" postcode="130133" />

        <area name="辛集市" postcode="130181" />

        <area name="藁城市" postcode="130182" />

        <area name="晋州市" postcode="130183" />

        <area name="新乐市" postcode="130184" />

        <area name="鹿泉市" postcode="130185" />

    </city>

    <city name="唐山市" postcode="130200" >

        <area name="路南区" postcode="130202" />

        <area name="路北区" postcode="130203" />

        <area name="古冶区" postcode="130204" />

        <area name="开平区" postcode="130205" />

        <area name="丰南区" postcode="130207" />

        <area name="丰润区" postcode="130208" />

        <area name="滦县" postcode="130223" />

        <area name="滦南县" postcode="130224" />

        <area name="乐亭县" postcode="130225" />

        <area name="迁西县" postcode="130227" />

        <area name="玉田县" postcode="130229" />

        <area name="唐海县" postcode="130230" />

        <area name="遵化市" postcode="130281" />

        <area name="迁安市" postcode="130283" />

    </city>

    <city name="秦皇岛市" postcode="130300" >

        <area name="海港区" postcode="130302" />

        <area name="山海关区" postcode="130303" />

        <area name="北戴河区" postcode="130304" />

        <area name="青龙满族自治县" postcode="130321" />

        <area name="昌黎县" postcode="130322" />

        <area name="抚宁县" postcode="130323" />

        <area name="卢龙县" postcode="130324" />

    </city>

    <city name="邯郸市" postcode="130400" >

        <area name="邯山区" postcode="130402" />

        <area name="丛台区" postcode="130403" />

        <area name="复兴区" postcode="130404" />

        <area name="峰峰矿区" postcode="130406" />

        <area name="邯郸县" postcode="130421" />

        <area name="临漳县" postcode="130423" />

        <area name="成安县" postcode="130424" />

        <area name="大名县" postcode="130425" />

        <area name="涉县" postcode="130426" />

        <area name="磁县" postcode="130427" />

        <area name="肥乡县" postcode="130428" />

        <area name="永年县" postcode="130429" />

        <area name="邱县" postcode="130430" />

        <area name="鸡泽县" postcode="130431" />

        <area name="广平县" postcode="130432" />

        <area name="馆陶县" postcode="130433" />

        <area name="魏县" postcode="130434" />

        <area name="曲周县" postcode="130435" />

        <area name="武安市" postcode="130481" />

    </city>

    <city name="邢台市" postcode="130500" >

        <area name="桥东区" postcode="130502" />

        <area name="桥西区" postcode="130503" />

        <area name="邢台县" postcode="130521" />

        <area name="临城县" postcode="130522" />

        <area name="内丘县" postcode="130523" />

        <area name="柏乡县" postcode="130524" />

        <area name="隆尧县" postcode="130525" />

        <area name="任县" postcode="130526" />

        <area name="南和县" postcode="130527" />

        <area name="宁晋县" postcode="130528" />

        <area name="巨鹿县" postcode="130529" />

        <area name="新河县" postcode="130530" />

        <area name="广宗县" postcode="130531" />

        <area name="平乡县" postcode="130532" />

        <area name="威县" postcode="130533" />

        <area name="清河县" postcode="130534" />

        <area name="临西县" postcode="130535" />

        <area name="南宫市" postcode="130581" />

        <area name="沙河市" postcode="130582" />

    </city>

    <city name="保定市" postcode="130600" >

        <area name="新市区" postcode="130602" />

        <area name="北市区" postcode="130603" />

        <area name="南市区" postcode="130604" />

        <area name="满城县" postcode="130621" />

        <area name="清苑县" postcode="130622" />

        <area name="涞水县" postcode="130623" />

        <area name="阜平县" postcode="130624" />

        <area name="徐水县" postcode="130625" />

        <area name="定兴县" postcode="130626" />

        <area name="唐县" postcode="130627" />

        <area name="高阳县" postcode="130628" />

        <area name="容城县" postcode="130629" />

        <area name="涞源县" postcode="130630" />

        <area name="望都县" postcode="130631" />

        <area name="安新县" postcode="130632" />

        <area name="易县" postcode="130633" />

        <area name="曲阳县" postcode="130634" />

        <area name="蠡县" postcode="130635" />

        <area name="顺平县" postcode="130636" />

        <area name="博野县" postcode="130637" />

        <area name="雄县" postcode="130638" />

        <area name="涿州市" postcode="130681" />

        <area name="定州市" postcode="130682" />

        <area name="安国市" postcode="130683" />

        <area name="高碑店市" postcode="130684" />

    </city>

    <city name="张家口市" postcode="130700" >

        <area name="桥东区" postcode="130702" />

        <area name="桥西区" postcode="130703" />

        <area name="宣化区" postcode="130705" />

        <area name="下花园区" postcode="130706" />

        <area name="宣化县" postcode="130721" />

        <area name="张北县" postcode="130722" />

        <area name="康保县" postcode="130723" />

        <area name="沽源县" postcode="130724" />

        <area name="尚义县" postcode="130725" />

        <area name="蔚县" postcode="130726" />

        <area name="阳原县" postcode="130727" />

        <area name="怀安县" postcode="130728" />

        <area name="万全县" postcode="130729" />

        <area name="怀来县" postcode="130730" />

        <area name="涿鹿县" postcode="130731" />

        <area name="赤城县" postcode="130732" />

        <area name="崇礼县" postcode="130733" />

    </city>

    <city name="承德市" postcode="130800" >

        <area name="双桥区" postcode="130802" />

        <area name="双滦区" postcode="130803" />

        <area name="鹰手营子矿区" postcode="130804" />

        <area name="承德县" postcode="130821" />

        <area name="兴隆县" postcode="130822" />

        <area name="平泉县" postcode="130823" />

        <area name="滦平县" postcode="130824" />

        <area name="隆化县" postcode="130825" />

        <area name="丰宁满族自治县" postcode="130826" />

        <area name="宽城满族自治县" postcode="130827" />

        <area name="围场满族蒙古族自治县" postcode="130828" />

    </city>

    <city name="沧州市" postcode="130900" >

        <area name="新华区" postcode="130902" />

        <area name="运河区" postcode="130903" />

        <area name="沧县" postcode="130921" />

        <area name="青县" postcode="130922" />

        <area name="东光县" postcode="130923" />

        <area name="海兴县" postcode="130924" />

        <area name="盐山县" postcode="130925" />

        <area name="肃宁县" postcode="130926" />

        <area name="南皮县" postcode="130927" />

        <area name="吴桥县" postcode="130928" />

        <area name="献县" postcode="130929" />

        <area name="孟村回族自治县" postcode="130930" />

        <area name="泊头市" postcode="130981" />

        <area name="任丘市" postcode="130982" />

        <area name="黄骅市" postcode="130983" />

        <area name="河间市" postcode="130984" />

    </city>

    <city name="廊坊市" postcode="131000" >

        <area name="安次区" postcode="131002" />

        <area name="广阳区" postcode="131003" />

        <area name="固安县" postcode="131022" />

        <area name="永清县" postcode="131023" />

        <area name="香河县" postcode="131024" />

        <area name="大城县" postcode="131025" />

        <area name="文安县" postcode="131026" />

        <area name="大厂回族自治县" postcode="131028" />

        <area name="霸州市" postcode="131081" />

        <area name="三河市" postcode="131082" />

    </city>

    <city name="衡水市" postcode="131100" >

        <area name="桃城区" postcode="131102" />

        <area name="枣强县" postcode="131121" />

        <area name="武邑县" postcode="131122" />

        <area name="武强县" postcode="131123" />

        <area name="饶阳县" postcode="131124" />

        <area name="安平县" postcode="131125" />

        <area name="故城县" postcode="131126" />

        <area name="景县" postcode="131127" />

        <area name="阜城县" postcode="131128" />

        <area name="冀州市" postcode="131181" />

        <area name="深州市" postcode="131182" />

    </city>

  </province></p><p></root></p><p> </p><p><span style="color:#ff0000;">由于文件太长这里就写这几个省吧</span></p><p><span style="color:#ff0000;"> </span></p><p><span style="color:#ff0000;">city.html</span></p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>city.html</title>

 

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

    <div>

    <span><select id="sheng" style="width: 100px"><option> 

     请选择省

    </option></select></span>

    <span><select id="shi" style="width: 100px">

    <option>

  请选择相应市

 </option>

    </select></span>

    <span><select id="xian" style="width: 100px">

    <option>

  请选择相应区

 </option>

    </select></span>

    </div>

  </body>

</html>

<script type="text/javascript">

<!--

function getXmlDoc() {

 var xmldoc;

 try{

   //IE浏览器

  xmlDoc = new ActiveXObject("microsoft.XMLDOM");

 }catch(e){

  try{

   //firefox 其他浏览器

   xmlDoc = document.implementation.createDocument("","",null);

  }catch(er){

  alert("您的浏览器太低了");

  }

 }

 //关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行

 xmlDoc.async = false;

  //转载xml文件

 xmlDoc.load("city.xml");

 return xmlDoc;

}</p><p>window.onload = function() {

 //通过方法获取对象

 var xmlDoc = getXmlDoc();

 //获取xml文件的根节点

 var root = xmlDoc.documentElement;

 //获得所有的省节点

 var provinces = root.childNodes;

 //获取页面中要显示的省的控件dom对象

 var sheng = document.getElementById("sheng");

 var shi = document.getElementById("shi");

 var xian = document.getElementById("xian");

 //遍历所有的省

 for(var i=0;i<provinces.length;i++) {

  //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题

  if(provinces[i].nodeType == 1) {

   //创建option节点对象

   var shengopt = document.createElement("option");

   //为省节点添加文本节点

   shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name")));

   //为省节点添加属性

   shengopt.setAttribute("value",provinces[i].getAttribute("postcode"));

   //添加省道页面dom对象中

   sheng.appendChild(shengopt);

  }

 }

 //当省节点发生改变时 触发事件

 sheng.onchange = function() {

  //获取省节点所有的option对象的集合

  var shengs = sheng.options;

  //获取选中option对象的selectedIndex(下标值)

  var num = shengs.selectedIndex;

  //清空市 区    

  shi.length = 1;

  xian.length = 1;

  var ppostocode = shengs[num].getAttribute("value");

  //遍历所有的省

  for(var i=0;i<provinces.length;i++) {

    //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题

   if(provinces[i].nodeType == 1) {

    var postcode = provinces[i].getAttribute("postcode");

    if(postcode == ppostocode) {

     var cities = provinces[i].childNodes;

     shi.length = 1;

     for(var i=0;i<cities.length;i++) {

      if(cities[i].nodeType == 1) {

       var shiopt = document.createElement("option");

       shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name")));

       shiopt.setAttribute("value",cities[i].getAttribute("postcode"));;

       shi.appendChild(shiopt);

      }

     }

     break;

    }

   }

  }

 }

 shi.onchange = function() {

  var shis = shi.options;

  var num = shis.selectedIndex;

  var spostcode = shis[num].getAttribute("value");

  for(var i=0;i<provinces.length;i++) {

   if(provinces[i].nodeType == 1) {

    var cities = provinces[i].childNodes;

    for(var j=0;j<cities.length;j++) {

     if(cities[j].nodeType == 1) {

      var postcode = cities[j].getAttribute("postcode");

      if(postcode == spostcode) {

       xian.length = 1;

       var areas = cities[j].childNodes;

       for(var k=0;k<areas.length;k++) {

        if(areas[k].nodeType == 1) {

         var xianopt = document.createElement("option");

         xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));

         xianopt.setAttribute("value",areas[k].getAttribute("postcode"));

         xian.appendChild(xianopt);

        }

       }

       break;

      }

     }

    }

   }

  }

 }

}</p><p>

//-->

</script>

<!--

DOM 解析中的浏览器差异所有现代浏览器都支持 W3C DOM 规范。不过，浏览器之间是有差异的。

重要的区别有两点：</p><p>1、加载 XML 的方式

 //IE浏览器

     var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

 //firefox 其他浏览器

    var xmlDoc = document.implementation.createDocument("","",null);

2、处理空白和换行的方式

  Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。

  思考: 那么怎么解决这种差异呢，下面是一种方法：

   for(var i=0;i<provinces.length;i++){ //在输出所有的子节点的时候

       if(provinces[i].nodeType==1){//在这里判断该节点是否是元素节点

          }

    }

  要注意的是: xmlDoc.async = false; 写成这样  IE  ， fireFox 都可以

     xmlDoc.async = "false";  IE  可以  fireFox 会报错

 --></p></div>





												


											
javascript读取xml的方法【转载】的更多相关文章
	

    
								
  1. javascript读取xml文件读取节点数据的例子
		
    分享下用javascript读取xml文件读取节点数据方法. 读取的节点数据,还有一种情况是读取节点属性数据. <head> <title></title> < ...
    
		
    2. 
						
  2. Java获取路径方法&相对路径读取xml文件方法
		
    (1).request.getRealPath("/");//不推荐使用获取工程的根路径 (2).request.getRealPath(request.getRequestURI ...
    
		
    3. 
						
  3. asp.net写入读取xml的方法
		
    添加命名空间 using System.Xml; 我自己的代码(添加其中的节点) XmlDocument xmlDoc = new XmlDocument();xmlDoc.Load(Server.M ...
    
		
    4. 
						
  4. javascript读取xml文件
		
    什么是 XML? XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输数据,而非显示数据 XML 标签没 ...
    
		
    5. 
						
  5. JavaScript读取txt文本文件方法详解
		
    http://blog.163.com/sophie8910@126/blog/static/8304612620122834121264/ 第一步:创建一个可以将文件翻译成文件流的对象. Var f ...
    
		
    6. 
						
  6. sqlserver 读取xml 字符串方法
		
    declare @xml xml declare @propertyName varchar(50)  declare @str nvarchar(max)   set @propertyName = ...
    
		
    7. 
						
  7. js读取xml,javascript读取XML
		
    IE下示例代码: var xmlDoc = "<root><AlleyWay><Code>1103</Code><Name>胡同2 ...
    
		
    8. 
						
  8. PHP读取xml方法讲解
		
    一,什么是xml,xml有什么用途 XML(Extensible Markup Language)即可扩展标记语言,它与HTML一样,都是SGML(Standard Generalized Marku ...
    
		
    9. 
						
  9. PHP读取xml方法介绍
		
    一,什么是xml,xml有什么用途 XML(Extensible Markup Language)即可扩展标记语言,它与HTML一样,都是SGML(Standard Generalized Marku ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ftp上传下载脚本
			
    #!/usr/bin/env python #encoding=utf-8 # @Date: 2015-08-10 import datetime from ftplib import FTP &qu ...
    
			
    2. 
						
  2. 【转】eclipse -- the project was not built due to a resource exists with a different case...
			
    原文网址:http://blog.csdn.net/mylinx/article/details/44280563 进行编码时,工程前面莫名有个红X,正当百思不得其解时,发现在[problems]下有 ...
    
			
    3. 
						
  3. 2012蓝桥杯本科组C/C++决赛题
			
    星期几 [结果填空] (满分5分) 1949年的国庆节(10月1日)是星期六. 今年()的国庆节是星期一. 那么,从建国到现在,有几次国庆节正好是星期日呢? 只要答案,不限手段! 可以用windows ...
    
			
    4. 
						
  4. 2012蓝桥杯本科组C/C++预赛题
			
    微生物增殖 假设有两种微生物 X 和 Y X出生后每隔3分钟分裂一次(数目加倍),Y出生后每隔2分钟分裂一次(数目加倍). 一个新出生的X,半分钟之后吃掉1个Y,并且,从此开始,每隔1分钟吃1个Y.  ...
    
			
    5. 
						
  5. python推荐淘宝物美价廉商品 2.0
			
    改动: 新增功能 :可选择只看天猫或淘宝 代码模块化封装,参数配置或输入单独在一个py文件管理,主函数功能只留出参数传入在setting配置的py文件里. main.py代码: # -*- codin ...
    
			
    6. 
						
  6. Hard 随机洗牌函数 @CareerCup
			
    第i个元素和index在[i,length-1]之间的一个数随机交换 package Hard; import CtCILibrary.AssortedMethods; /** * * Write a ...
    
			
    7. 
						
  7. Ubuntu系统下MySQL读取文件数据ERROR解决
			
    博文链接:http://haoyuanliu.github.io/2016/04/29/mysql/ 对,我是来骗访问量的!O(∩_∩)O~~ 在使用MySQL进行文件数据读取的时候,在终端敲入命令行 ...
    
			
    8. 
						
  8. Thread Join()的用法
			
    Java Thread类有个 join() 方法,先前一直不知道是怎么用的,直到看到这篇文章.http://auguslee.iteye.com/blog/1292203 Java Thread中,  ...
    
			
    9. 
						
  9. MySQL更新时Error Code:1093和Error Code:1175的解决办法
			
    Error Code: 1093. You can't specify target table 'ws_product' for update in FROM clause 这个是我们在使用upda ...
    
			
    10. 
						
  10. YYCache 源码分析(二)
			
    本文分析YYMemoryCache实现原理: YYMemoryCache是内存缓存,所以存取速度非常快,主要用到两种数据结构的LRU淘汰算法 1.LRU Cache的容量是有限的,当Cache的空间都 ...
    
			
    11.