read xml by jquery

Question

XML

 <?xml version='1.0' encoding='utf-8' ?>
        <RecentTutorials>
        <Tutorial author='The Reddest'>
        <Title>Silverlight and the Netflix API</Title>
        <Categories>
              <Category>Tutorials</Category>
              <Category>Silverlight 2.0</Category>
              <Category>Silverlight</Category>
              <Category>C#</Category>
              <Category>XAML</Category>
        </Categories>
        <Date>1/13/2009</Date>
        </Tutorial>
        </RecentTutorials>

Script

$.ajax({
   type: "post",
   url: "Default.aspx?cmd=Setting",
   success: parseXml
});

    alert(xml);//show xml File Success
    $(xml).find("Tutorial").each(function()
    {
         $("#b").append($(this).attr("author") );
    }

XML files have not read While alert(xml); show XML File

Answer 1

Rather than $(), use $.parseXML to parse an XML string. (Update: See note below, parseXML was added in jQuery 1.5 but it's easy to add it to an older version if you want.) It will give you a raw XML document; you'd then use $() on it to get a jQuery wrapper on that doc.

Like this:

var xml =
    "<?xml version='1.0' encoding='utf-8' ?>" +
    "<RecentTutorials>" +
    "<Tutorial author='The Reddest'>" +
    "<Title>Silverlight and the Netflix API</Title>" +
    "<Categories>" +
    "<Category>Tutorials</Category>" +
    "<Category>Silverlight 2.0</Category>" +
    "<Category>Silverlight</Category>" +
    "<Category>C#</Category>" +
    "<Category>XAML</Category>" +
    "</Categories>" +
    "<Date>1/13/2009</Date>" +
    "</Tutorial>" +
    "</RecentTutorials>";

$($.parseXML(xml)).find("Tutorial").each(function() {
    var author = $(this).attr("author");
});

Live example

If you're loading the XML via ajax, you typically don't have to do that as jQuery will do it for you as part of the loading sequence and then give you the XML doc as the data parameter to your success callback, but if you just have an arbitrary string and you want to parse it, parseXML is the tool for the job.

ajax example:

$.ajax({
  url: "the/url/to/load/the/xml/from",
  method: "GET",
  dataType: "xml",
  success: function(data) {
      var xdoc = $(data);    // Note that jQuery has already done the parsing for us
      display("Getting tutorials");
      var tutorials = xdoc.find("Tutorial");
      display("Found: " + tutorials.length);
      tutorials.each(function() {
          display("Tutoral author: " + $(this).attr("author"));
      });
  },
  error: function(jxhr, status, err) {
      display("Ajax error: status = " + status + ", err = " + err);
  }
});

Live copy

---

Update: parseXML was added to jQuery in v1.5. If you can, upgrade to the latest to use it. If you can't, if you have to use an out-dated version, you can easily add the function to your own script. Unlike many parts of jQuery, it's nicely self-contained in the jQuery source:

jQuery.parseXML = function( data , xml , tmp ) {

    if ( window.DOMParser ) { // Standard
        tmp = new DOMParser();
        xml = tmp.parseFromString( data , "text/xml" );
    } else { // IE
        xml = new ActiveXObject( "Microsoft.XMLDOM" );
        xml.async = "false";
        xml.loadXML( data );
    }

    tmp = xml.documentElement;

    if ( ! tmp || ! tmp.nodeName || tmp.nodeName === "parsererror" ) {
        jQuery.error( "Invalid XML: " + data );
    }

    return xml;
};

Here's a live copy of my first example, but using jQuery 1.4.4 plus the above.