如何用jQuery加载并解析XML(待更新)

[目录]

  • XML
    • 什么是XML?
    • XML语法
    • 正确的XML格式范例
  • 加载XML
    • Content-Type设置
    • 获取XML
    • 解析XML
  • 禁用缓存
  • 加载不上?

XML

什么是XML?

XML(eXtensible Markup Language)即可扩展标记语言。

XML语法

在XML中采用如下的语法

  1. 任何起始标签都必须有一个结束标签;
//以下代码错误,XML必须是封闭的,它没有闭合
<?xml version="1.0" encoding="UTF-8"?> 
<name>zhangsan
  1. 可以采用另一种简化语法,即在一个标签中同时表示起始和结束标签。这种语法是:<tag/>。(ps:很像html中的单标签是不?^ ^)在XML解析器中会将其翻译成<tag></tag>。

  2. 标签必须按照合理的顺序进行嵌套,因此结束标签必须按镜像顺序匹配起始标签。

//以下代码错误,因为在没有关闭所有内部括号之前,不能关闭外面的括号
<?xml version="1.0" encoding="UTF-8"?> 
<name>zhangsan<i>sample</name>haha</i>
  1. 所有的属性都要有值,并且需要在值的周围加上双引号。

  2. XML文档只能有一个顶层元素。

//以下代码错误,因为它有多个顶层元素
<?xml version="1.0" encoding="UTF-8"?> 
<name>zhangsan</name>
<id>1</id>
<name>wangwu</name>
<id>2</id>
  1. XML可以使用自己发明的标签。
    因为XML中没有预定义标签,所以XML允许创作者定义自己的标签和自己的文档结构。

正确的XML格式范例

<?xml version="1.0" encoding="UTF-8"?> 
<stulist>
      <student email="123456@qq.com">
              <name>xiaoming</name>
              <age>20</age>
      </student>
      <student email="234567@qq.com">
              <name>xiaogang</name>
               <age>21</age>
      </student>
</stulist>

加载XML

Content-Type设置

加载XML的时候,如果Content-Type本身就是一个XML文件则是不需要设置;如果是后台程序动态生成,那么就需要设置Content-Type为"text/xml",否则jQuery就会以默认的"text/html"方式处理,导致解析失败。
以下是几种常见语言中设置Content-Type的方式。

  • header("Content-Type:text/xml"); //PHP
  • response.ContentType="text/xml"; //ASP
  • response.setContentType("text/xml"); //JSP

获取XML

如果有了正确的XML结构的文件,那么就可以通过jQuery的Ajax函数进行读取了,jQuery代码如下:

$.ajax({
  url:'ajax.xml',
  type:'GET',
  dataType:'xml',
  timeout:1000,       //设定超时
  cache:false,         //禁用缓存
  error:function(xml){
          alert("加载XML文档出错");
  },
  success:function(xml){
          //这里用于解析XML
  }
})

这样就可以读取XML,当然也可以用简单的$.get()方法和$.post()方法

$.get('ajax.xml',function(xml){
        //这里用于解析XML
        console.log(xml);
});
console1.png

解析XML

解析XML文档和解析DOM一样,也可以用find()、children()等函数来解析和用each()方法来进行遍历,另外也可以用text()和attr()方法来获取节点文本和属性。例如在success回调里解析XML:

success:function(xml){
        $(xml).find("student").each(function(i){ //查找所有student节点并遍历
                var age = $(this).children("age"); //取得子节点
                var age_value = age.text();  //取节点文本
                console.log(age_value);  //id的值
                console.log($(this).attr("email"));  //显示student的属性
        })
}


//下面这种写法也对哦
$.get("xml.xml",function(xml){
         $(xml).find("student").each(function(i,val){
             var age = $(val).children("age");
             var age_value = age.html();
             console.log(age_value);   
             console.log($(val).attr("email"));
         })
     })

结果如图所示:

console2.png

通过上面的代码,能成功获取到相应的数据,接下来就可以将解析出来的数据添加到已有的HTML文件中。

禁用缓存

这个问题在书上看到,具体实践中也没有碰到过,所以就先记录下来把。
我们在项目中经常会遇到一个问题,就是数据已经更新了,但传递的还是以前的数据,要避免这种情况,就应该禁用缓存。

  • 如果是使用$.ajax的方法,只需要在cache属性中设置false, 要注意false是布尔值不是字符串
  • 如果是使用$.post的方法,默认就是禁用缓存的。
  • 如果是使用$.get的方法,可以通过设置时间戳来避免缓存:
 $.get('ajax.xml?'+(+new Date).function(xml){
        //...
});
//(+new Date)等价于 new Date().getTime()

注:之所以不用随机数,是因为随机数大量使用会出现重复的概率挺大,而用时间戳就不会出现这种情况。

加载不上?

  • 检查一下Content-Type有没有设置好?(看文中的 Content-Type设置 部分)
  • 检查一下XML结构是否正确(看文中 XML语法 部分)
  • 用ajax加载的时候一定要起服务,不能在本地环境下使用,否则会报错
error.png
  • 解析xml的jq语法有没有错误,提示的是,如果子节点有很多个,要使用each遍历,可以使用$(this)获取当前节点,也可以使用$(val)获取当前节点,为什么是$(val),是因为each里面的第二个参数val出来的是DOM元素,所以要进行DOM元素和JQ元素的转化。

  • 还有就是如果数据不更新,是不是没有禁用缓存。

(目前想到这些,还有在不定期更新哦~~~~~)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,922评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,591评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,546评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,467评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,553评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,580评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,588评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,334评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,780评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,925评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,573评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容