`
zpopopo
  • 浏览: 10053 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery ajax - 如何使用XML

阅读更多
我在日志里介绍了很多使用jQuey load的方法来实现ajax。load()应该是jQuery里ajax的最简单的运用了,你不用了解ajax是怎么一回事,就可以把某个脚本的输出(通常是text/html类型)动态的赋给页面的某个元素(例如div和p)。但是在实际的运用中,你可能会发现load()常常不能满足要求,例如:你想对一个表单的多个控件使用ajax进行更新,可是load()一次只可以对其中一个控件起作用;如果使用多个load(),那么会增加服务器的负荷,因此肯定不是一个好办法。本文要介绍jQuery的ajax()方法,它是类似传统的ajax方法。jQuery的ajax()方法涉及的知识点很多,具体可以参考jQuery中文参考文档。这里要介绍的是如何使用XML数据类型以及如何对XML进行读取。

1.使用PHP输出XML,如果你只是使用echo,那么要注意要先输出正确的header: Content-Type是text/xml。如果你要给XML的某个节点用HTML代码赋值,你必须把HTML放在<![CDATA[" 和"]]>之间。例子如下: genXML.php

<?php
echo "header("Content-Type: text/xml; charset=UTF-8");";
echo <<< XML
<?xml version="1.0" encoding="UTF-8"?>
<rsp>
  <name>Adam</name>
  <site>http://www.61dh.com</site>
  <note>
    <![CDATA[
      HTML代码可以放在这里
    ]]>
  </note>
</rsp>
XML;
?>2. HTML样本:

<div id="name"></div>
<div id="note"></div>3.接下来我们要使用jQuery的ajax()方法,读取genXML.php的输出(xml),然后把相关节点的内容赋给HTML元素:#name和#node。代码如下:

$.ajax({
  url: "genXML.php", //本例中,url为genXML.php
  type: 'GET', //根据实际情况,可以是'POST'或者'GET'
  //data: "name=adam&location=61dh",本例中没有用到data
  dataType: 'xml', //指定数据类型
  timeout: 1000, //设置超时1000 = 1秒
  error: function(){
    alert('Error loading XML document'); }, //错误提示
  success: function(xml){ //ajax请求成功后 do something with xml
    //把XML的相关节点值赋给HTML里相关ID
    $('#name').html($(xml).find('name').text());
    $('#note').html($(xml).find('note').text());
  }
});我在上面的代码里已经做了比较详细地注释,值得再提的是使用jQuery提供find()的方法可以很简单的读取XML某个节点的值,例如:$(xml).find('name').text(); //读取节点name;然后使用html()的方法赋值给HTML里的某个元素。

注: 我在日志里写了很多有关jQuery的文章而且还挺受欢迎:-),所以我把它专门作为一个菜单放在上方导航条里。希望这些文章对jQuery初学者有所帮助。如果你有任何的问题和建议,请给我留言或者发Email。谢谢!

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics