Programmazione Web » ajax loading content http://www.programmazione-web.com il Blog open degli sviluppatori del web! Tue, 10 Nov 2009 21:04:43 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Jquery Ajax content loading, caricare contenuti html in un div http://www.programmazione-web.com/jquery-ajax-content-loading-caricare-contenuti-div.php http://www.programmazione-web.com/jquery-ajax-content-loading-caricare-contenuti-div.php#comments Mon, 19 May 2008 17:40:17 +0000 neryo http://www.programmazione-web.com/jquery-ajax-content-loading-caricare-contenuti-div.php Jquery Ajax content loading (XMLHttpRequest), caricare contenuti html in un div.

Capita sempre piu’ spesso di voler caricare porzioni di contenuti presenti in un sito, senza dover per forza ricaricare interamente tutto il contenuto della pagina.. questo tipo di interazioni sono la novita’ che contraddistinguono i siti e le applicazioni web di ultima generazione, che consentono di avere una rapporto di usabilita’ molto piu’ alto grazie a chiamate asincrone (Ajax), che ci permettono di interagire con le applicazioni in modo piu’ fruibile, avvicinando il web a vere e proprie applicazioni desktop.

Per realizzare questo tipo di chiamate dinamiche e interattive si utilizza solitamente l’oggetto XMLHttpRequest che e’ un elemento fondamentale della tecnica di sviluppo web conosciuta con l’acronimo Ajax.

Un esempio di script che realizza questo tipo di interazioni lo possiamo vedere in questa pagina.

Ma in questo post voglio pero’ illustrarvi come realizzare lo stesso meccanismo utilizzando il framework jQuery, che lo implementa in modo molto semplice, senza dover direttamenti occuparci dei dettagli sottostanti. Ricordando che jQuery a mio parere e’ il framework javascript che ha il rapporto tra semplicita’/potenza piu’ alto e anche le operazioni piu’ complesse vengono realizzate con pochissime righe di codice.

Detto questo vi illustro come caricare contenuti dinamici usando jquery in un div a cui gli e’ stato assegnato un id css univoco:

  1. <script src="jquery-latest.js" type="text/javascript"></script>
  2. <script type="text/javascript">
  3.  
  4. $(document).ready(function(){
  5.  
  6.         $("#contentArea").load("pagina.php");
  7.  
  8. });
  9.  
  10. </script>
  11.  
  12. <div id="contentArea"> </div>

se invece vogliamo variare il contenuto del div a secondo del link che primiamo possiamo creare una funzione:

  1. <script src="jquery-latest.js" type="text/javascript"></script>
  2. <script src="jquery-latest.js" type="text/javascript">
  3.  
  4.  function loadContent(id) {
  5.         $("#contentArea").load("rpc.php?o="+id+"");
  6.   }
  7.  
  8. </script>
  9.  
  10. <body onLoad="loadContent(1);">
  11.  
  12.         <a href="javascript:loadContent(1);">Tab 1</a> |
  13.         <a href="javascript:loadContent(2);">Tab 2</a> |
  14.         <a href="javascript:loadContent(3);">Tab 3</a> |
  15.         <a href="javascript:loadContent(999);">This content doesn’t exist</a>
  16.  
  17.         <div id="contentArea" style="margin: 20px 0px 10px 10px; border: 1px solid #CCC;">
  18.  
  19.         </div>
  20. </body>

Chiaramente nel file rpc.php richiamato dalla funzione load di jQuery, dovra’ essere implementata una struttura che ci permetta in base alla scelta numerica passata alla funzione loadContent() di selezionare il contenuto da restituire, questo puo ‘ essere realizzato usando uno switch case. Se non e’ sufficientemente chiaro il funzionamento potete scaricare il pacchetto da modificare sul sito di nodstrum.com presente nei riferimenti.


Riferimenti:
http://nodstrum.com/2007/03/20/jquery-content-loading/
http://docs.jquery.com/Ajax/load
http://it.wikipedia.org/wiki/XMLHttpRequest

]]> http://www.programmazione-web.com/jquery-ajax-content-loading-caricare-contenuti-div.php/feed 8