jQuery: XML and CDATA sections

One of the main abilities of jQuery is its advanced XML parsing during an AJAX request. All of this preprocessing lies under the hood, but becomes more evident when it comes to XML CDATA sections. In XML, CDATA sections are particular sections of the document enclosed between <![CDATA[ and ]]>, which basically tell the XML parser to handle their contents as character data, that is, to not parse such contents as markup. For example, in an RSS or Atom feed you can find something like this:

<content type="html" xml:lang="en" xml:base="http://www.site.com/">
<![CDATA[
<p>...</p>
]]>
</content>

You can fetch the markup contained within each content element and inject it into your page. The interesting thing to note here is that CDATA and text are two different types of nodes in the DOM hierarchy. Technically speaking, a text node and a CDATA node are different from a DOM perspective. However, with jQuery you can always do the following:

$(function() {

  $.ajax({
    type: 'GET',
    dataType: 'xml',
    url: 'news-atom.xml',
    success: function(xml) {
    
      $(xml).find('entry').each(function() {
      
        var entry = $(this);
      
        var html = '<div class="entry">';
        
        html += '<h2>' + entry.find('title').text() + '</h2>';
        
        html += entry.find('content').text();
        
        html += '</div>';
        
        $(html).appendTo('body');
      
      
      
      
      });
    
    
    
    }
    
  });

});

The fact is that the text() method is also able to return all the contents of a CDATA section, despite the fact that this kind of DOM node is completely different from normal text. This feature allows us to write XML, RSS and Atom files without worrying about the type of node to use.

Leave a Reply

Note: Only a member of this blog may post a comment.