Ajax - Load funktionen
Omdrejningspunktet i 'load' af data er PHP-funktionen:
Ved direkte hentning anvendes den sådan:
$feed = simplexml_load_file('http://www.dr.dk/nyheder/service/feeds/allenyheder');
|
Ved hentning via opslag i database anvendes den sådan:
$feed = simplexml_load_file($row['feed_url']);
|
Feltet 'feed_url' indeholder feed-adressen.
Nedenfor vises et program først uden ajax-kode, og dernæst tilpasset anvendelse af ajax:
Programmet henter RSS-feeds fra DR.DK.
Uden ajax kode
Uden AJAX ser programmet således ud.
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>RSS Reader Applikation</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<article>
<?php
$drfeed = simplexml_load_file('http://www.dr.dk/nyheder/service/feeds/allenyheder');
echo "<h3>" . $drfeed->channel->title . "</h3>";
echo "<p><a href='" . $drfeed->channel->link . "'>Gå til kategorien</a></p>";
foreach ($drfeed->channel->item as $item) {
echo "<section>";
echo "<h3>" . $item->title . "</h3>";
echo "<p>" . $item->description . "</p>";
echo "<p><a href='" . $item->link . "'>Læs hele artiklen</a></p>";
echo "</section>";
}
?>
</article>
</body>
</html>
|
Med ajax kode
Udtaget kode
Den del af den oprindelige kode, der skal gøres asynkron med AJAX, (markeret ovenfor) tages ud og placeres i en fil for sig selv. Der foretages ingen ændringer i koden.
I det aktuelle tilfælde er filen benævnt 'load_data.php'.
<?php
$drfeed = simplexml_load_file('http://www.dr.dk/nyheder/service/feeds/allenyheder');
echo "<h3>" . $drfeed->channel->title . "</h3>";
echo "<p><a href='" . $drfeed->channel->link . "'>Gå til kategorien</a></p>";
foreach ($drfeed->channel->item as $item) {
echo "<section>";
echo "<h3>" . $item->title . "</h3>";
echo "<p>" . $item->description . "</p>";
echo "<p><a href='" . $item->link . "'>Læs hele artiklen</a></p>";
echo "</section>";
}
?>
|
AJAXering af resterende kode
Efter opgradering til at håndtere AJAX ser det oprindelige program således ud:
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>AJAX RSS Reader Applikation</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
loadrss();
setInterval(loadrss, 3000);
})
function loadrss(){
$('#article_id').load('load_data.php');
};
</script>
</head>
<body>
<article id="article_id">
<!-- Her placeres data'en fra filen load_data.php -->
</article>
</body>
</html>
|
Der er foretaget følgende tilføjelser:
- Der er etableret link til AJAX CDN-server.
- Der er indsat et javaScript med 2 funktioner (events / lyttere)
- 'ready'-funktionen aktiveres så snart programmet er indlæst. Den starter funktionen 'loadrss' - og genstarter den for hver 3000 millisekunder.
- 'loadrss'- indsætter filen load_data.php ved '#article_id', hver gang 'ready'-funktionen beder den om det.
- Start-tagget for 'article' har fået tilføjet ' id="article_id"'.
|