AJAX cu XML

Curs Ajax

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):

- 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": - 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

• childNodes - Returneaza un Array secvential cu toate nodurile incluse in cel apelat
• firstChild - Returneaza primul element inclus in cel apelat
• nodeName - Returneaza numele nodului apelat (denumirea atributului sau tag-ului XML)
• nodeValue - Obtine valoarea text din acel nod
• attributes - Returneaza un Array secvential cu toate atributele din acel nod

Metode uzuale DOM

• getElementsByTagName(nume) - Obtine intr-un Array toate elementele (tag-uri) "nume"
• appendChild(node) - Adauga un nou element nod (node) in cel curent
• removeChild(node) - Sterge elementul nod, specificat la "node", din cel curent
• getNamedItem(nume) - Preia ca element nod atributul "nume", din cel apelat
• getAttribute('nume') - Returneaza valoarea atributului "nume" din nodul apelat

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

- 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
2. Exemplu getElementsByTagName si getAttribute()
3. Ex. cu childNodes si nodeValue

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: Tabel cu Ajax XML

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

I`m living here.
- Traiesc /Locuiesc aici.

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.