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:
-
<script src="jquery-latest.js" type="text/javascript"></script>
-
<script type="text/javascript">
-
-
$(document).ready(function(){
-
-
$("#contentArea").load("pagina.php");
-
-
});
-
-
</script>
-
-
<div id="contentArea"> </div>
se invece vogliamo variare il contenuto del div a secondo del link che primiamo possiamo creare una funzione:
-
<script src="jquery-latest.js" type="text/javascript"></script>
-
<script src="jquery-latest.js" type="text/javascript">
-
-
function loadContent(id) {
-
$("#contentArea").load("rpc.php?o="+id+"");
-
}
-
-
</script>
-
-
<body onLoad="loadContent(1);">
-
-
<a href="javascript:loadContent(1);">Tab 1</a> |
-
<a href="javascript:loadContent(2);">Tab 2</a> |
-
<a href="javascript:loadContent(3);">Tab 3</a> |
-
<a href="javascript:loadContent(999);">This content doesn’t exist</a>
-
-
<div id="contentArea" style="margin: 20px 0px 10px 10px; border: 1px solid #CCC;">
-
-
</div>
-
</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
(No Ratings Yet)
Loading ...Commenti
ciao,
a me serve tantissimo questa cosa…ma ho provato svariati metodi e ognuno mi dà qualche grattacapo…tipo questo dà errori con IE7,con firefox no…la pagina genitore è un asp protetta da login…ie mostra sempre errori nella barra di stato…la prima volta che carico la pagina cliccando sui links non succede nulla…se aggiorno tutto ok ma gli errori permangono. una volta “Autorizzazione negata”…un’altra “Proprietà o metodo non supportati dall’oggetto” oppure ancora “Previsto oggetto”…perchè tutto questo?? mi sta facendo disperare…ed invece dovrebbe essere una cosa semplice….
CIao,io utilizzo una tecnica molto semplice…
inserisco un IFRAME nascosto all’interno della pagina .. quando occorre vado a caricare una pagina dentro all’iframe che restituirà esclusivamente i dati che mi servono e li vado a scrivere nella pagina padre tramite la chiamata: PARENT.DOCUMENT.GEELEMENTBYID(”").VALUE = codice_restituito nell’iframe.
L’ho usata con successo ad esempio per la gestione di : REGIONE / PROVINCIA / COMUNE in molte anagrafiche dove andavo a ricostruire l’Input SELECT dei comuni in base alla selezione della regione e provincia in modo dinamico (lINPUT SELECT era dentro una DIV della pagina padre) e tramite l’IFRAME popolavo i comuni… funziona molto bene !!
.. ah e dimenticavo funziona benissimo con tutti i browser .. =)
Salve, io nel mio sito in html vorrei caricare in un div un contenuto xml comprensivo di formattazione xslt, l’xml me lo carica ma senza la formattazione, come posso fare?
