Ajax - Load funktionen

Omdrejningspunktet i 'load' af data er PHP-funktionen:

simplexml_load_file();

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">
       
       </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"'.