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

// 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>https://marplo.net/php-mysql/</url>
        <descriere>Curs gratuit, scripturi si tutoriale PHP-MySQL</descriere>
    </site>
    <site categorie="Programare Web">
        <url>https://marplo.net/ajax/</url>
        <descriere>Curs gratuit, lectii si tutoriale Ajax</descriere>
    </site>
    <site categorie="Limbi straine">
        <url>https://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 "https://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

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut e folosit in tag-ul <img> pentru adresa imaginii?
href src rel
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS ascunde elementul in pagina?
display: none; display: inline; position: relative;
#id {
  display: none;
}
Ce instructiune opreste executia lui while() sau for() ?
continue prompt() break
for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}
Indicati functia utilizata pentru a crea constante.
define() include() defined()
define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;
Care este forma de plural a substativului "class" (clasa)?
classes clases clasis
This school has three classes.
- Scoala asta are trei clase.
Care este pluralul substativului "voz" (voce)?
vose voze voces
Escuché dos voces.
- Am auzit doua voci.
AJAX cu XML

Last accessed pages

  1. Verbe modale - Exercitii incepatori (12102)
  2. Articolul din limba engleza - The article (63186)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (61411)
  4. Creare si editare pagini HTML (80026)
  5. Gramatica limbii engleze - Prezentare Generala (205042)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (1581)
  2. Exercitii engleza - English Tests and exercises - Grammar (1356)
  3. Gramatica limbii engleze - Prezentare Generala (1337)
  4. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1159)
  5. Prezentul simplu - Exercitii si teste incepatori (771)