Descriere: AJAX cu XML
Download:
Autor: Anonim
Sursa (Link-ul oficial): Propria parere: Folositor.
Tutorialul:
XML (Extensible Markup Language) este un format special de structurare și stocare a datelor în fișiere cu extensia .xml cu o sintaxă bazată pe tag-uri. Dacă nu știți ce face și cum se lucrează cu documente XML, studiați tutorialul de la pagina Documente XML.
În unele cazuri, răspunsul primit de Ajax (datele transmise de la scriptul de pe server) poate fi conținutul unui document XML. Această metodă de lucru fiind frecvent utilizată în aplicațiile 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 fișier XML.
În acest tutorial este prezentat modul de afișare în pagina web a datelor dintr-un fișier XML, preluate cu Ajax.
1. Încărcarea datelor cu format XML
Prima etapă este obținerea datelor din XML. Acestea pot fi primite de la PHP (sau altă aplicație de server) sub forma unui șir, sau pot fi preluate direct de la adresa unui fișier .xml.
După ce au fost primite datele, acestea trebuie încărcate (memorate) într-un obiect DOM JavaScript.
a) Dacă datele XML sunt primite la Ajax de la un script de pe server, într-un șir text, codul de încărcare a formatului XML într-un obiect DOM JS e următorul (explicațiile necesare sunt în cod):
Cod: Selectaţi tot
// 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); - În variabila "sir_xml" se rețin datele pe care Ajax le primește de la scriptul php, și anume, un șir text cu date în format XML.
b) - Dacă datele XML trebuie preluate direct de Ajax din "fisier.xml", se folosește obiectul "XMLHttpRequest":
Cod: Selectaţi tot
// Functia ce va prelua si incarca intr-un obiect XML DOM
// continutul unui XML (adresa din parametru "fisier")
function getXML_file(fisier) {
// Daca navigatorul web suporta XMLHttpRequest
if (window.XMLHttpRequest) {
// Creaza variabila care va contine instanta la XMLHttpRequest
xhttp = new XMLHttpRequest();
}
else {
// Pt. IE 5/6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 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); 2. Parsarea documentului XML
După ce a fost preluat și transformat în XML DOM conținutul unui șir sau document XML, urmează rolul funcțiilor JavaScript care trebuie să-l parseze (parcurgă și separe), în general cu scopul de a afișa datele în pagină.
Deoarece datele din XML sunt structurate într-un format bazat pe tag-uri, se pot folosi proprietățile și metodele specifice DOM JavaScript pentru parsarea lor. Iată câteva din cele mai folosite.
Proprietăți uzuale XML DOM
childNodes - Returnează un Array secvențial cu toate nodurile incluse în cel apelat
firstChild - Returnează primul element inclus în cel apelat
nodeName - Returnează numele nodului apelat (denumirea atributului sau tag-ului XML)
nodeValue - Obține valoarea text din acel nod
attributes - Returnează un Array secvențial cu toate atributele din acel nod
Metode uzuale DOM
getElementsByTagName(nume) - Obține într-un Array toate elementele (tag-uri) "nume"
appendChild(node) - Adaugă un nou element nod (node) în cel curent
removeChild(node) - Șterge elementul nod, specificat la "node", din cel curent
getNamedItem(nume) - Preia ca element nod atributul "nume", din cel apelat
getAttribute('nume') - Returnează valoarea atributului "nume" din nodul apelat
Utilizare proprietăți și metode DOM cu XML
În continuare vor fi prezentate câteva exemple cu aceste proprietăți și metode pentru afișarea în pagină a unor date dintr-un document XML.
Pentru aceste exemple va fi folosit următorul document XML, cu numele "fisier.xml".
- Cod fisier.xml
Cod: Selectaţi tot
<?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> Explicațiile necesare sunt în cod.
1. Exemplu cu firstChild și nodeName
Cod: Selectaţi tot
<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()"
// Se apeleaza functia "getXML_file()" cu "fisier.xml"
var xml_dom = getXML_file('fisier.xml');
// Se obtine primul element (tag-ul radacina), ce le contine pe toate celelalte
var root = xml_dom.firstChild;
var tag_root = root.nodeName; // Preia numele tagului radacina
alert(tag_root); // Va afisa "cursuriweb"
//--></script> Cod: Selectaţi tot
<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()"
// Se apeleaza functia "getXML_file()" cu "fisier.xml"
var xml_dom = getXML_file('fisier.xml');
// Obtine un Array cu toate elementele cu tag "site" din xml_dom
var arr_sites = xml_dom.getElementsByTagName('site');
// Obtine valoarea atributului "categorie" din al doilea element cu tag-ul "site"
var site2_cat = arr_sites[1].getAttribute('categorie');
alert(site2_cat); // Va afisa "Programare Web"
//--></script> Cod: Selectaţi tot
<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()"
// Se apeleaza functia "getXML_file()" cu "fisier.xml"
var xml_dom = getXML_file('fisier.xml');
// Preia al doilea element cu tag-ul "site" din xml_dom
var site2 = xml_dom.getElementsByTagName('site')[1];
// Obtine primul element (tag) "url" din site2
var site2_tag1 = site2.getElementsByTagName('url')[0];
// 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> În exemplul următor va fi folosit același document XML din "fisier.xml", datele din el vor fi parcurse, preluate și ordonate spre afișare într-un tabel HTML. Codul este conceput pe baza faptului că se cunoaște dinainte structura și denumirile tag-urilor și atributelor din documentul XML.
Cod: Selectaţi tot
<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) {
// Daca navigatorul web suporta XMLHttpRequest
if (window.XMLHttpRequest) {
// Creaza variabila care va contine instanta la XMLHttpRequest
xhttp = new XMLHttpRequest();
}
else {
// Pt. IE 5/6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 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"
// Preia intr-un Array toate elementele cu tag-ul "site"
var arr_sites = xml_dom.getElementsByTagName('site');
// Parcurge matricea "arr_sites"
for(var i=0; i<arr_sites.length; i++) {
// Obtine valoarea atributului "categorie" din tag-ul "site" parcurs
var site_cat = arr_sites[i].getAttribute('categorie');
// 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>