Caricare contenuto dinamicamente

Grazie ad Ajax, è possibile realizzare applicazioni web interattive e in grado di effettuare numerose azioni che fino a poco tempo solo in pochi erono in grado di fare o addirittura era impossibile farlo. E' non si tratta di una tecnologia nuova, ma semplicemente dell'unione di più tecnologie!

In questo tutorial vedremo una funzionalità di Ajax molto utile, che ci permette di come creare una pagina in AJAX in cui è possibile caricare il contenuto dinamicamente senza refresh di pagina.

Un esempio pratico è possibile visualizzarlo su questa web-tv.

Il codice sorgente

Per iniziare, dovremo inserire il codice sotto-riportato nella sezione <HEAD> del nostro documento HTML:

<style type="text/css">
body{
background-repeat:no-repeat;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.9em;
line-height:130%;
text-align:center;
height:100%;
background-color: #E2EBED;
}
#contentContainer h2{ /*Nessun margine sopra la tag <h2>*/
margin-top:0px;
}


#mainContainer{
width:755px;
margin:0 auto;
text-align:left;
padding:5px;
margin-top:20px;
border:1px solid #000;
background-color: #FFF;
}
#contentContainer{
float:left;
border:1px solid #000;
background-color: #E2EBED;
overflow:auto;
margin-right:10px;
padding:10px;

/* CSS HACK */
width: 497px; /* IE 5.x */
width/* */:/**/480px; /* Per gli altri browsers */
width: /**/480px;

/* CSS HACK */
height: 412px; /* IE 5.x */
height/* */:/**/390px; /* Per gli altri browsers */
height: /**/390px;

}


#contentContainer .openingText{
;
}

#articleListContainer{ /* <ul> per la lista articoli */
float:left;
height:410px;
overflow:auto;
width:240px;
border:1px solid #000;
background-color:#FFF;
}
.articleList{
margin:0px;
padding:2px;
}
.articleList li{ /* lista articoli per il layout generico */
list-style-type:none;
border:1px solid #999;
background-color:#EEE;
height:50px;
margin:1px;
padding:2px;
color:#333;
cursor:pointer;
}
.articleList li.articleMouseOver{ /* azioni al passaggio del mouse sulla lista articoli */
border:1px solid #000;
color:#000;
}
.articleList li.articleClick{ /* azioni al click su un articolo della lista - layout */
border:1px solid #000;
color:#000;
background-color:#317082;
color:#FFF;
}

.keyText{
background-color:#FFF;
border:1px dotted #000;
float:right;
margin-top:5px;
margin-left:5px;
margin-bottom:5px;
width:150px;
padding:3px
}
.clear{
clear:both;
}
</style>
<script type="text/javascript" src="/AJAX/24_ajax.js"></script>
<script type="text/javascript">


Ajax dynamic articles
Copyright (C) 2006 DTHMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public

Alf Magne Kalleland, 2006
Owner of DHTMLgoodies.com
 

var ajax = new sack();
var articleListObj;
var activeArticle = false;
var clickedArticle = false;
var contentObj // Reference to article content <div>

function mouseoverArticle() // Highlight article
{
if(this==clickedArticle)return;
if(activeArticle && activeArticle!=this){
if(activeArticle==clickedArticle)
activeArticle.className='articleClick';
else
activeArticle.className='';

}
this.className='articleMouseOver';
activeArticle = this; // Storing reference to this article
}

function showContent() // Mostro il contenuto nella <div>
{
contentObj.innerHTML = ajax.response; // ajax.response è una variabile contenente il contenuto del file esterno
}

function showWaitMessage()
{
contentObj.innerHTML = 'Ricerca articolo.....<br>Attendere prego';
}
function getAjaxFile(fileName)
{
ajax.requestFile = fileName; // Specifico quale file leggere
ajax.onCompletion = showContent; // SSpecifico la funzione da eseguire a termine lettura
ajax.onLoading = showWaitMessage; // Azione da eseguire mentre la funzione AJAX stà lavorando
ajax.runAJAX(); // Eseguo la funzione AJAX
}

function selectArticle() // L' utente ha clickato su un articolo
{
getAjaxFile(this.id + '.html'); // Chiamo la funzione getAjasFile. passandole il nome del file da richiamare, ovvero l' ID della <li> + '.html'
if(clickedArticle && clickedArticle!=this)clickedArticle.className='articleMouseOver';
this.className='articleClick';
clickedArticle = this;
}


function initAjaxDemo()
{
articleListObj = document.getElementById('articleList');
var articles = articleListObj.getElementsByTagName('LI');
for(var no=0;no<articles.length;no++){
articles[no].onmouseover = mouseoverArticle;
articles[no].onclick = selectArticle;
}

contentObj = document.getElementById('contentContainer');
}
window.onload = initAjaxDemo;
</script>

A questo punto andremo invece ad inserire, in <BODY>

<div id="mainContainer">
<div id="header">
<img src="/images/heading3.gif">
</div>
<div id="contentContainer">
<h2 class="openingText">Selezionare un articolo di destra.</h2>
<p>Verrà così caricato in questa <DIV> il contenuto dell' articolo scelto</p>
</div>
<div id="articleListContainer">
<ul id="articleList" class="articleList">
    <li id="articolo1">Articolo1</li>
    <li id="articolo2">Articolo2</li>
    <li id="articolo3">Articolo3</li>
    <li id="articolo4">Articolo4</li>
    <li id="articolo5">Articolo5</li>
    <li id="articolo6">Articolo6</li>
    <li id="articolo7">Articolo7</li>
    <li id="articolo8">Articolo8</li>
    <li id="articolo9">Articolo9</li>
  </ul>
</div>
<div class="clear"></div>
</div>

 

Per quanto riguarda il codice AJAX, tratto da http://twilightuniverse.com/projects/sack  , è scaricabile da qui. Questo andrà inserito in una cartella chiamata "js"; nel caso tal cartella non possa assumere questo nome, sarà necessario ridefinirne la path anche nel codice sopra riportato, precisamente in <script type="text/javascript" src="js/ajax.js"></script>

Configurazione

Una volta eseguita la demo della sorgente sopra-creata, si potrà notare un elenco di articoli posto sulla destra. Il relativo codice HTML è:

<ul id="articleList" class="articleList">
    <li id="articolo1">Articolo1</li>
    <li id="articolo2">Articolo2</li>
    <li id="articolo3">Articolo3</li>
    <li id="articolo4">Articolo4</li>
    <li id="articolo5">Articolo5</li>
    <li id="articolo6">Articolo6</li>
    <li id="articolo7">Articolo7</li>
    <li id="articolo8">Articolo8</li>
    <li id="articolo9">Articolo9</li>
  </ul>

dove, secondo la classica sintassi della tabella in HTML, ciascun blocco <li> corrisponde ad un articolo. Ad ogni <li> è associato un ID, corrispondente al nome di un file esterno contenente il testo di ciascun articolo.

Nel momento in cui l' utente clikkerà su uno degli articoli in lista, lo script, tramite AJAX, restituirà il contenuto del file associato all' articolo richiesto (il nome del file è "ID articolo selezionato" + ".html"). Facciamo un esempio: il visitatore clikka su <LI id="articolo1"> ? Lo script stamperà nella pagina il contenuto del file articolo1.html.

Considerazioni sulla funzione in AJAX

All' inizio dello script viene creato un oggetto in JavaScript chiamato "AJAX":

var ajax = new sack();

Nel momento in cui il visitatore clikka su un articolo della lista, viene ordinato a tale oggetto di aprire un file esterno:

function getAjaxFile(fileName)
{
  ajax.requestFile = fileName;
  ajax.onCompletion = showContent;
  ajax.onLoading = showWaitMessage;
  ajax.runAJAX();
}

Dove:

  • ajax.requestFile è il nome del file esterno da processare;
  • ajax.onCompletion = showContent; dice allo script cosa fare quando viene terminata la lettura del file;
  • ajax.onLoading = showWaitMessage; dice allo script quale funzione eseguire mentre esso è in esecuzione;
  • ajax.runAJAX(); esegue l' AJAX

A questo punto non resta che scrivere, restando nell' ottica dell' esempio riportato, 9 file .html dal nome articolo1.html, articolo2.html, articolo3.html ecc contenenti il contenuto di ciascun articolo presente in lista, ponendoli nella stessa directory del file .html principale.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Staff
Ti interessano altri articoli su questo argomento?
Chiedi alla nostra Redazione!