Caricare contenuto dinamicamente

Grazie ad Ajax, è possibile realizzare applicazioniweb interattive e in grado di effettuare numerose azioni chefino a poco tempo solo in pochi erono in grado di fare oaddirittura era impossibile farlo. E' non si tratta diuna tecnologia nuova, ma semplicemente dell'unione dipiù tecnologie!

In questo tutorial vedremo una funzionalità di Ajaxmolto utile, che ci permette di come creare una pagina inAJAX in cui è possibile caricare il contenutodinamicamente senza refresh di pagina.

Un esempio pratico è possibile visualizzarlo su questaweb-tv.

Il codice sorgente

Per iniziare, dovremo inserire il codice sotto-riportatonella 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 itand/or
modify it under the terms of the GNU Lesser GeneralPublic

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';elseactiveArticle.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 leggereajax.onCompletion = showContent; // SSpecifico la funzione da eseguire a termine letturaajax.onLoading = showWaitMessage; // Azione da eseguire mentre la funzione AJAX stà lavorandoajax.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. Questoandrà inserito in una cartella chiamata"js"; nel caso tal cartella non possa assumerequesto nome, sarà necessario ridefinirne la path anchenel codice sopra riportato, precisamente in <scripttype="text/javascript"src="js/ajax.js"></script>

Configurazione

Una volta eseguita la demo della sorgente sopra-creata, sipotrà 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 sintassidella tabella in HTML, ciascun blocco <li> corrispondead un articolo. Ad ogni <li> è associato un ID,corrispondente al nome di un file esterno contenente il testodi ciascun articolo.

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

Considerazioni sulla funzionein AJAX

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

var ajax = new sack();

Nel momento in cui il visitatoreclikka su un articolo della lista, viene ordinato a taleoggetto 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 nomearticolo1.html, articolo2.html, articolo3.html ecccontenenti il contenuto di ciascun articolo presente inlista, ponendoli nella stessa directory del file .htmlprincipale.