Lezione #id-jq-2013-0010#
JQuery ci permette di caricare in background dei contenuti da un file esterno e di mostrarli nella pagina web senza dovere ricaricarla interamente..

Questa tecnica di programmazione prende il nome di AJAX (Asynchronous JavaScript and XML).

JQuery può caricare in background dati da remoto provenienti in formato testo, HTML, XML, o JSON utilizzando le chiamate HTTP GET e HTTP POST.

Scrivere codice AJAX senza utilizzare JQuery è piuttosto laborioso perchè ogni browser ha una sintassi differente per l’implementazione AJAX. Con JQuery invece il codice scritto funzionerà automaticamente su tutti i browser!

NOTA BENE: se in fase di caricamento ad esempio di un file di testo le lettere accentate non sono visualizzate correttamente probabilmente la codifica del file di testo è diversa da quella della pagina web. Ad esempio se la nostra pagina web è codificata UTF-8 (questo parametro viene specificato nel tag – header -), dovrò salvare anche il file di testo in UTF-8.

Metodo: load() -> aggiunta di contenuto ottenuto in remoto all’interno dell’elemento selezionato

Creiamo sul nostro server un file di testo con il seguente contenuto:

<h2>Questo titolo &eacute; caricato da un file esterno</h2>
<p id="p1">Questo paragrafo &eacute; caricato da un file esterno.</p>

Nella stessa cartella del file di testo creato in precedenza creiamo la seguente pagina HTML: 

<!DOCTYPE html>
<html>
 
<head>
<title>Titolo del documento</title>

<script type="text/javascript" src="js/jquery-2.0.3.js"></script>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("id-jq-2013-0010.txt");
  });
});
</script>

</head>
 
<body>

<div id="div1"><h2>Questo testo &eacute; contenuto all'interno della pagina HTML</h2></div>
<button>Carica un contenuto esterno con AJAX load()</button>

</body>
 
</html>

Analizziamo il codice:
1- $(document).ready(function(){ -> JQuery verifica che tutto il documento sia caricato
2- $(“#button”).click(function(){ -> al click sull’elemento con id=button
3- $(“#div1”).load(“…”); -> sostituisci all’interno del tag con – id=div1 – il contenuto caricato in asincrono dal file indicato fra le virgolette.

Vedi il codice in azione! >

La sintassi completa è:

$("elemento selezionato").load("file in remoto");

La chiamata ai contenuti può essere più precisa e riguardare solo uno specifico elemento, ad esempio:

$("#div1").load("sample.txt #p1");

Il codice sopra permette il caricamento del contenuto del tag con – id=p1 -, del file sample.txt

Per verificare l’esistenza di un file esterno si può utilizzare il seguente sistema:

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("File esterno caricato correttamente!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

Il codice che ci interessa è:

  ................................,function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("File esterno caricato correttamente!");

Controlla il caricamento del file txt, se avviene correttamente – success – apri una finestra di conferma.

Il mio sito ufficiale>