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。谢谢！