Caricare e parsare un file XML

XML è presente nell'acronimo di AJAX, perchè è il formato più comune per l'interscambio di dati

Lo useremo per la lettera D del nostro dizionario:

<?xml version="1.0" encoding="UTF-8"?>

	<entries>

		<entry term="DANCE" part="v.i.">

			<definition>

				To leap about to the sound of tittering music, preferably with 

				arms about your neighbor's wife or daughter.  There are many 

				kinds of dances, but all those requiring the participation of 

				the two sexes have two characteristics in common:  they are 

				conspicuously innocent, and warmly loved by the vicious. 

			</definition>

		</entry>

		<entry term="DAY" part="n.">

			<definition>

				A period of twenty-four hours, mostly misspent.  This period is 

				divided into two parts, the day proper and the night, or day 

				improper <![CDATA[&mdash;]]> the former devoted to sins of 

				business, the latter consecrated to the other sort.  These two 

				kinds of social activity overlap.

				</definition>

		</entry>

		<entry term="DEBT" part="n.">

			<definition>

				An ingenious substitute for the chain and whip of the 

				slave-driver.

			</definition>

		<quote author="Barlow S. Vode">

			<line>As, pent in an aquarium, the troutlet</line>

			<line>Swims round and round his tank to find an outlet,</line>

			<line>Pressing his nose against the glass that holds him,</line>

			<line>Nor ever sees the prison that enfolds him;</line>

			<line>So the poor debtor, seeing naught around him,</line>

			<line>Yet feels the narrow limits that impound him,</line>

			<line>Grieves at his debt and studies to evade it,</line>

			<line>And finds at last he might as well have paid it.</line>

		</quote>

	</entry>

	<entry term="DEFAME" part="v.t.">

		<definition>

			To lie about another.  To tell the truth about another.

		</definition>

	</entry>

</entries>

Tutto ciò sta in un file con estensione.xml, ma può essere anche una risposta da una url remota. Per ricevere una risposta in xml si ua in JQuery il metodo $.get() che in realtà serve ad avere come risposta TESTO ma che è in grado di capire dall'HEADER della risposta stessa è in forato XML

Javascript code per la gestione del caricamento:

	$(document).ready(function() {
  $('#letter-d .button').click(function() {
    $.get('d.xml', function(data) {
    });
  });
});

Javascript code per il parsing dell'XML:

	$(document).ready(function() {
  $('#letter-d .button').click(function() {
    $.get('d.xml', function(data) {
      $('#dictionary').empty();
      $(data).find('entry').each(function() {
        var $entry = $(this);
        var html = '<div class="entry">';
        html += '<h3 class="term">' + $entry.attr('term') + '</h3>';
        html += '&lt;div class=&quot;part&quot;&gt;' + $entry.attr('part') + '</div>';
        html += '<div class="definition">'
        html += $entry.find('definition').text();
        var $quote = $entry.find('quote');
        if ($quote.length) {
          html += '<div class="quote">';
          $quote.find('line').each(function() {
            html += '<div class="quote-line">' + $(this).text() +  
                                                           '</ div>';
          });
          if ($quote.attr('author')) {
            html += '<div class="quote-author">' +  
                                    $quote.attr('author') + '</ div>';
          }
          html += '</ div>';
                  }
        html += '</ div>';
        html += '</ div>';
        $('#dictionary').append($(html));
      });
    });
  });
});

Analizziamo le parti importanti delcodice:

• $(data).find('entry').each(function() { - uso il metodo find e sintassi xpath per ricavare un array su cui poi ciclo con il metodo each()
• $entry.attr('part') - uso il metodo attr() per ricavare i valori degli attributi
• html += $entry.find('definition').text(); - uso il metodo text() per ottenere i testi all'interno dei nodi

La sintassi XPath è particolarmente adatta ai file xml. Potrei per esempio voler visualizzare le citazioni di un certo autore con un certo attributo:

 var $quote = $entry.find('quote[@author="Barlow S. Vode"]');

Dictionary step 4 - XML