AJAX cu XML

XML (Extensible Markup Language) este un format special de structurare si stocare a datelor in fisiere cu extensia .xml cu o sintaxa bazata pe tag-uri, daca nu stiti ce face si cum se lucreaza cu documente XML, studiati tutorialul de la pagina Documente XML.
In unele cazuri, raspunsul primit de Ajax (datele transmise de la scriptul de pe server) poate fi continutul unui document XML. Aceasta metoda de lucru fiind frecvent utilizata in aplicatiile API de transfer a datelor de la un server la altul (de la un server extern la site-ul care a solicitat transferul). Sau prin Ajax, se poate citi direct un fisier XML.
In acest tutorial este prezentat modul de afisare in pagina web a datelor dintr-un fisier XML, preluate cu Ajax.

1. Incarcarea datelor cu format XML

Prima etapa este obtinerea datelor din XML. Acestea pot fi primite de la PHP (sau alta aplicatie de server) sub forma unui sir, sau pot fi preluate direct de la adresa unui fisier.xml.
Dupa ce au fost primite datele, acestea trebuie incarcate (memorate) intr-un obiect DOM JavaScript.

a) Daca datele XML sunt primite la Ajax de la un script de pe server, intr-un sir text, codul de incarcare a formatului XML intr-un obiect DOM JS e urmatorul (explicatiile necesare sunt in cod):

// Functie pt. incarcare continut sir XML in obiect DOM XML
function getXML_sir(txt_xml) {
    // Daca Browser-ul este altul decat IE
    if(window.DOMParser) {
          // Creaza obiectul pt. DOM XML si retine "arborele" cu datele intr-o variabila "xmlDoc"
        getxml = new DOMParser();
        xmlDoc = getxml.parseFromString(txt_xml,"text/xml");
    }
    else {
        // Pt. Internet Explorer
        // Creaza obiectul pt. DOM XML in variabila "xmlDoc"
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async="false";         // Poate fi utilizat pt. fortarea de incarcarea intai a unui fisier XML
        xmlDoc.getXML_sir(txt_xml);
    }
    return xmlDoc;
}

// Variabila cu datele primite de la server
var sir_xml = 'Sirul text in care e stocat continutul XML primit prin ajax de la server (apelat prin GET sau POST)';

// Se apeleaza functia "getXML_sir()" cu "sir_xml"
var xml_dom = getXML_sir(sir_xml);
- Internet Explorer foloseste functia "getXML_sir()" pentru a incarca sirul cu date XML intr-un obiect DOM, celelalte browsere folosesc functia "DOMParser()" cu metoda "parseFromString(sirXML,'text/xml')"
- In variabila "sir_xml" se retin datele pe care Ajax le primeste de la scriptul php, si anume, un sir text cu date in format XML.

b) - Daca datele XML trebuie preluate direct de Ajax din "fisier.xml", se foloseste obiectul "XMLHttpRequest":
// Functia ce va prelua si incarca intr-un obiect XML DOM continutul unui XML (adresa din parametru "fisier")
function getXML_file(fisier) {
    var xhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // XMLHttpRequest object
    // Defineste si trimite cererea pt. apelare "fisier"
    xhttp.open("GET", fisier ,false);
    xhttp.send(null);

    // Retine si returneaza raspunsul, transformat in XML DOM
    xmlDoc = xhttp.responseXML;

    return xmlDoc;
}

// Variabila cu adresa fisierului XML
var file_xml = 'fisier.xml';

// Se apeleaza functia "getXML_file()" cu "file_xml"
var xml_dom = getXML_file(file_xml);
- Proprietatea "responseXML" transforma datele obtinute direct in XML DOM.

2. Parsarea documentului XML

Dupa ce a fost preluat si transformat in XML DOM continutul unui sir sau document XML, urmeaza rolul functiilor JavaScript care trebuie sa-l parseze (parcurga si separe), in general cu scopul de a afisa datele in pagina.
Deoarece datele din XML sunt structurate intr-un format bazat pe tag-uri, se pot folosi proprietatile si metodele specifice DOM JavaScript pentru parsarea lor. Iata cateva din cele mai folosite.

Proprietati uzuale XML DOM

Metode uzuale DOM

Utilizare proprietati si metode DOM cu XML

In continuare vor fi prezentate cateva exemple cu aceste proprietati si metode pentru afisarea in pagina a unor date dintr-un document XML.
Pentru aceste exemple va fi folosit urmatorul document XML, cu numele "fisier.xml".

- Cod fisier.xml

<?xml version="1.0" encoding="utf-8"?>
<cursuriweb>
    <site categorie="Programare Web">
        <url>http://www.marplo.net/php-mysql/</url>
        <descriere>Curs gratuit, scripturi si tutoriale PHP-MySQL</descriere>
    </site>
    <site categorie="Programare Web">
        <url>http://www.marplo.net/ajax/</url>
        <descriere>Curs gratuit, lectii si tutoriale Ajax</descriere>
    </site>
    <site categorie="Limbi straine">
        <url>http://www.marplo.net/engleza/</url>
        <descriere>Cursuri gratuite, exercitii si rersurse pentru invatat limba engleza</descriere>
    </site>
</cursuriweb>

- Dupa ce se obtin cu Ajax datele din acest document XML si sunt transformate in obiect XML DOM (cu una din functiile de mai sus: "getXML_sir()" daca sunt intr-un sir text, sau cu "getXML_file" daca sunt luate direct din fisier), se stocheaza acest obiect intr-o variabila, aici denumita "xml_dom". Aceasta variabila devine baza de aplicare a proprietatilor si metodelor DOM.
Explicatiile necesare sunt in cod.

1. Exemplu cu firstChild si nodeName
<script type="text/javascript"><!--
// Se adauga functia "getXML_file()" sau "getXML_sir()" (in functie de modul de preluare a datelor XML
// Aici va fi folosita "getXML_file()"

var xml_dom = getXML_file('fisier.xml');         // Se apeleaza functia "getXML_file()" cu "fisier.xml"

var root = xml_dom.firstChild;         // Se obtine primul element (tag-ul radacina), ce le contine pe toate celelalte
var tag_root = root.nodeName;         // Preia numele tagului radacina

alert(tag_root);         // Va afisa "cursuriweb"
//--></script>


2. Exemplu getElementsByTagName si getAttribute()
<script type="text/javascript"><!--
// Se adauga functia "getXML_file()" sau "getXML_sir()" (in functie de modul de preluare a datelor XML
// Aici va fi folosita "getXML_file()"

var xml_dom = getXML_file('fisier.xml');         // Se apeleaza functia "getXML_file()" cu "fisier.xml"

var arr_sites = xml_dom.getElementsByTagName('site');         // Obtine un Array cu toate elementele cu tag "site" din xml_dom
var site2_cat = arr_sites[1].getAttribute('categorie');         // Obtine valoarea atributului "categorie" din al doilea element cu tag-ul "site"

alert(site2_cat);         // Va afisa "Programare Web"
//--></script>


3. Ex. cu childNodes si nodeValue
<script type="text/javascript"><!--
// Se adauga functia "getXML_file()" sau "getXML_sir()" (in functie de modul de preluare a datelor XML
// Aici va fi folosita "getXML_file()"

var xml_dom = getXML_file('fisier.xml');         // Se apeleaza functia "getXML_file()" cu "fisier.xml"

var site2 = xml_dom.getElementsByTagName('site')[1];         // Preia al doilea element cu tag-ul "site" din xml_dom
var site2_tag1 = site2.getElementsByTagName('url')[0];         // Obtine primul element (tag) "url" din site2

// Preia valoarea primului nod din site2_tag1 (acest nod este elementul cu textul incadrat de tag-ul "url")
// Nu ar fi functionat direct "site2_tag1.nodeValue" deoarece textul dintre tag-uri e recunoscut tot ca un nod
var site2_tag1v = site2_tag1.childNodes[0].nodeValue;

alert(site2_tag1v);         // Va afisa "http://www.marplo.net/ajax/"
//--></script>

3. Exemplu complet de parsare si afisare date din XML

In exemplu urmator va fi folosit acelasi document XML din "fisier.xml", datele din el vor fi parcurse, preluate si ordonate spre afisare intr-un tabel HTML. Codul este conceput pe baza faptului ca se cunoaste dinainte structura si denumirile tag-urilor si atributelor din documentul XML.

<div id="ajax_xml">Aici e zona unde va fi afisat tabelul cu datele XML preluate prin Ajax</div>

<script type="text/javascript"><!--
// Functia Ajax ce va prelua si incarca intr-un obiect XML DOM continutul unui XML (adresa din parametru "fisier")
function getXML_file(fisier) {
  var xhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object
  // Defineste si trimite cererea pt. apelare "fisier"
  xhttp.open("GET", fisier ,false);
  xhttp.send(null);

  // Retine si returneaza raspunsul, transformat in XML DOM
  xmlDoc = xhttp.responseXML;

  return xmlDoc;
}

// Functia ce va returna un tabel HTML cu date preluate dintr-un document XML
function htmlTab_xml(file_xml) {
  // Variabila in care este stocat tabelul HTML cu datele ce vor fi adaugate
  var html_tab = '<table id="id_tabel" align="center" width="99%"><tr><th>Categorie</th><th>Adresa Site</th><th>Descriere</th></tr>';

  var xml_dom = getXML_file(file_xml);           // Se apeleaza functia "getXML_file()" cu "file_xml"

  var arr_sites = xml_dom.getElementsByTagName('site');         // Preia intr-un Array toate elementele cu tag-ul "site"

  // Parcurge matricea "arr_sites"
  for(var i=0; i<arr_sites.length; i++) {
    var site_cat = arr_sites[i].getAttribute('categorie');         // Obtine valoarea atributului "categorie" din tag-ul "site" parcurs

    // Preia toate elementele cu tag "url" din elementul "site" parcurs, si
    // - din primul element tag "url" obtine valoarea text din el
    var site_url = arr_sites[i].getElementsByTagName('url')[0].childNodes[0].nodeValue;

    // Preia toate elementele cu tag "descriere" din elementul "site" parcurs, si
    // - din primul element tag "descriere" obtine valoarea text din el
    var site_desc = arr_sites[i].getElementsByTagName('descriere')[0].childNodes[0].nodeValue;

    // Adauga valorile cu datele obtinute in tabelul HTML inceput in variabila "html_tab"
    // In tag-uri specifice tabelului, pt rand si coloane
    html_tab += '<tr><td>'+ site_cat+ '</td><td>'+ site_url+ '</td><td>'+ site_desc+ '</td></tr>';
  }

  html_tab += '</table>';           // Inchide tag-ul pt. tabel

  return html_tab;
}

var file_xml = 'fisier.xml';          // Variabila cu adresa fisierului XML

// Adauga in tag-ul html cu id="ajax_xml" tabelul obtinut prin apelarea functiei "htmlTab_xml()"
document.getElementById('ajax_xml').innerHTML = htmlTab_xml(file_xml); 
//-->
</script>
- Ca sa vedeti rezultatul acestui script Ajax, folosit cu documentul XML al carui continut este prezentat mai sus (in "fisier.xml"), dati click pe:
Aici e zona unde va fi afisat tabelul cu datele XML preluate prin Ajax

Incarcare imagini pe server ... <<-- Anterior --- Urmator -->> AJAX cu JSON

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care meta tag se foloseste pentru scurta descriere a paginii?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 caractere ce descriu continutul paginii" />
Ce proprietate CSS opreste efectul dat de "float"?
clear text-align position
#some_id {
  clear: both;
}
Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicati functia PHP ce returneaza numarul de elemente dintr-un array.
is_array() count() strlen()
$arr = array(7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".
happly happily hapily
I live happily.
- Traiesc fericit (in mod fericit).
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".
felizamente felizmente felices
Vivo felizmente.
- Traiesc fericit (cu fericire).
AJAX cu XML - Tutoriale Ajax