jQuery a XML - parsování a čtení XML pomocí jQuery
Postupně se programátor dostane do situace, kdy je donucen pracovat v JavaScriptu s externími daty. jQuery a XML dokážeme krásně spojit pomocí HTTP request požadavku a přečíst tak téměř neomezené množství dat. Jak si například předat data z PHP do JavaScriptu (jQuery) - to si dnes ukážeme.
Prvním krokem k úspěchu musí být vytvoření libovolného XML. Toto XML může vypadat následovně:
<?xml version="1.0" encoding="ISO-8859-1"?> <data> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> <note> <to>John</to> <from>Mark</from> <heading>Meeting</heading> <body>Coffee, 21 Street</body> </note> </data>
Nyní je potřeba do dokumentu připojit samotnou jQuery knihovnu.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>jQuery a XMl</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
</body>
</html>
V této chvíli jsme připraveni dělat konečně něco užitečného. Předně použijeme klasický model jQuery a vytvoříme asynchronní požadavek ve formátu XML. Nyní budeme ilustrovat jenom surový kód, tedy bez ošetření dalších stavů a hlavně se nebudeme zabívat interakcí s uživatelem.
Vytvořme si základní funkci (jakmile bude dokument připraven) - funkci ready
$(document).ready
(
function()
{
}
);
Do funkce ready definujeme požadavek pomocí HTTP request metory (známe jako AJAX)
$.ajax
(
{
type: "GET",
url: "file.xml",
dataType: "xml",
success: function(xml)
{
}
}
);
Dále projdeme všechy prvky, které nás zajímají. V jQuery vytvoříme smyčku procházení
$(xml).find('note').each
(
function()
{
var to = $(this).find('to').text();
var from = $(this).find('from').text();
var heading = $(this).find('heading').text();
var body = $(this).find('body').text();
$(document.body).append('To: '+to+'');
$(document.body).append('From: '+from+'');
$(document.body).append('Heading: '+heading+'');
$(document.body).append('Body: '+body+'');
$(document.body).append('
');
}
);
Tímto jsme si krátce demonstrovali jak se pracuje v jQuery s XML. Parsování je velmi jednoduché a tento příklad demonstruje, že je možné pomocí klasických způsobů vytvářet mnohem obsáhlejší XML parsery. jQuery nám to dovolí.
Data samozřejmě můžete vkládat dynamicky - například pomocí PHP. Náš zmíněný soubor files.xml může být generovaný na základě požadavku s parametrem. Záleží jenom na tom, jakým způsobem potřebujete data z PHP do JavaScriptu dostat. Způsob jQuery vs. PHP vs. XML je ideální pro objemné soubory dat.
Shrnutí kódu:
$(document).ready
(
function()
{
$.ajax
(
{
type: "GET",
url: "file.xml",
dataType: "xml",
success: function(xml)
{
$(xml).find('note').each
(
function()
{
var to = $(this).find('to').text();
var from = $(this).find('from').text();
var heading = $(this).find('heading').text();
var body = $(this).find('body').text();
$(document.body).append('To: '+to+'');
$(document.body).append('From: '+from+'');
$(document.body).append('Heading: '+heading+'');
$(document.body).append('Body: '+body+'');
$(document.body).append('
');
}
);
}
}
);
}
);
Doufám, že tento článek pomohl byť jednomu čtenáři v budování projektu, kde potřebuje využít spojení jQuery a XML formátu. Nastavení jQuery a XML požadavků je mnohem širší, než zde uvádím. Proto prosím nastudujte dokumentaci jQuery na oficiálním webu.
