Pokud máte někde na serveru XML a chcete z něj vytáhnout data a prezentovat je ve vaší webové stránce, pak vězte, že s pomocí jQuery je to hračka. Hlavním omezením parsování XML pomocí jQuery, resp. javascriptu je velikost XML. U souborů vetších než 500 kB může už být s parsováním problém. Pokud budete XML, které chcete parsovat načítat AJAXem, musí být XML na stejné doméně jako váš parsovací skript.

V ukázce místo XML budeme parsovat XHTML (úvodní stránku Wikipedie). Funčkní skript si můžete vyzkoušet na http://jsbin.com/vsm1/4/. Abych si mohl XML k parsování dotáhnout AJAXem ($.get()), zkopíroval jsem si úvodní stránku Wikipedie na http://jsbin.com/idesi/2/.

Do inputu v ukázce stačí zadat libovolný jQuery selektor. V dokumentu budou nalezeny všechny uzly odpovídající selektoru a zobrazeny všechny jejich XML atributy. 

<body>
  Enter jQuery selector: <input type="text" id="inp" value="a[href]" />
<input type="button" id="run" value="Find" />
  <br/>
<div id="outInfo"></div> 
</body>

$("#run").click(function () {
    var nodeSelector = $("#inp").val();
  alert("Looking for nodes matching: "+nodeSelector);
    $.get("http://jsbin.com/idesi/2/", function(data){

    aElems = [];
    $(data).find(nodeSelector).each(function() {
      elemAttrs = $(this)[0].attributes;
      aAttrs = [];
      for (var i in elemAttrs) {
        if(elemAttrs[i].specified && ! /^jQuery/.test(elemAttrs[i].name)) {
          aAttrs.push("<li><strong>"+elemAttrs[i].name+"</strong>: "+elemAttrs[i].value+"</li>");
        }
      }
      aElems.push("<ul>"+aAttrs.join("")+"</ul>");
    });
    $("#outInfo").append(aElems.join(""));
   });
});

Kód není příliš komplikovaný, zastavím se jen u některých částí:

  • pomocí $(this)[0].attributes se dostaneme k mapě (asociativnímu poli) názvů a hodnot atributů jednolivého nodu (bližší vysvětlení: $(this)[0] a .attributes)
  • v přikladu iterujeme ve dvou cyklech
    • vnější pomocí each() hledá XML uzly odpovídající zadanému selektoru
    • vnitřní prochází atributy nalezeného XML uzlu
  • podmínka if(elemAttrs[i].specified && ! /^jQuery/.test(elemAttrs[i].name)) zajistí ignorování všech pseudoatributů, které jsou navázány na DOM uzel (liší se v různých prohlížečích), ale nejsou ve skutečnosti ve zdrojovém XML (vyzkoušejte bez této podmínky)
  • výpis atributů vyhovujícíh uzlů ke pomocí odrážkového seznamu; pro skládání HTML jsou v kódu v jednotlivých iteracích atributy ukládány do poleaAttrs[], které je nakonec spojeno do řetezce; tento postup je efektivnější než modifikace DOMu (např. pomocí append()) v každé iteraci a možná i klasické skládání řetězce pomocí +
  • pole aElems je použito ve vnějším cyklu pro uchování kousků HTML pro jednotlivé uzly
A to je vše:-)