jQuery – prelucrare date XML 15
XML (Extensible Markup Language) e un format special de trimitere si stocare date in fisiere cu extensia .xml, cu o sintaxa bazata pe tag-uri. Documentele XML sunt de obicei folosite in aplicatii web de accesare date de la un server la altul.
Acest tutorial arata cum puteti prelua date dintr-un fisier XML si sa le afisati in pagina web, folosind jQuery Ajax.
Iata un exemplu.
Mai intai se creaza un document XML simplu, intr-un fisier denumit „webpages.xml„:
<?xml version=”1.0″ encoding=”utf-8″?>
<webpages>
<course id=”1″>
<title>Curs JavaScript</title>
<url>http://www.discant.net/javascript</url>
</course>
<course id=”2″>
<title>Curs jQuery</title>
<url>http://www.discant.net/javascript/curs-jquery-tutoriale-js</url>
</course>
</webpages>
Acum se creaza codul HTML si jQuery pentru o pagina web care va afisa intr-un DIV date din acest document XML.
Pagina contine un buton care la click pe el va apela o functie jQuery ajax(), aceasta acceseaza fisierul XML creat mai sus (webpages.xml), preia date din el (id, title, si url), apoi le adauga intr-un <div> in pagina.
Pentru a lucra cu XML in jQuery, trebuie sa setati optiunea dataType:”xml” in metoda ajax() (vedeti si comentariile din cod):
<!doctype html>
<html>
<head>
<meta charset=”utf-8″ />
<title>jQuery Ajax – XML</title>
<script type=”text/javascript” src=”jquery_1.6.1.js”></script>
<script type=”text/javascript”><!–
$(document).ready(function() {
// la click pe tag-ul cu id=”buton” se executa o cerere Ajax prin GET la un fisier XML
// preia datele XML si afiseaza: id, title, si url
$(‘#buton’).click(function() {
$.ajax({
type: ‘get’,
url: ‘webpages.xml’,
beforeSend: function() {
// inainte de a trimite cererea, afiseaza o notificare de „Incarcare…” in „#resp”
$(‘#resp’).html(‘Incarcare…’);
},
timeout: 10000, // timpul maxim permis pt. executia cererii (10 secunde)
error: function(xhr, status, error) { alert(‘Eroare: ‘+ xhr.status+ ‘ – ‘+ error); }, // alert in caz de eroare
dataType: ‘xml’,
success: function(response) {
$(‘#resp’).html(”); // sterge notificarea „Incarcare…” din „#resp”
// acceseaza fiecare element copil din <webpages>
$(response).find(‘webpages’).children().each(function() {
// preia „id”, „title”, si „url” din elementul curent
var elm = $(this);
var id = elm.attr(‘id’);
var title = elm.find(‘title’).text();
var url = elm.find(‘url’).text();
// adauga datele in „#resp”
$(‘#resp’).append(id+ ‘) Titlu: <b>’+ title+ ‘</b> – URL: <b><i>’+ url+ ‘</i></b><br />’);
});
}
});
});
});
–></script>
</head>
<body>
<div id=”resp”>Aici vor fi afisate datele din fisierul XML.</div><br />
<button id=”buton”>Click</button>
</body>
</html>
– obiect_jQuery.children().each() – preia fiecare element inclus direct in „obiect_jQuery”.
– elm.attr(‘id’) – returneaza valoarea atributului „id”.
– elm.find(‘url’).text() – returneaza textul din tag-ul <url> inclus in „elm”.
Demo:
Aici vor fi afisate datele din fisierul XML.