Brainleaf
Web Resources

Per aiutare chi si avvicina adesso al mondo della programmazione frontend, abbiamo deciso di realizzare alcuni piccoli tutorial di base sull'uso di ajax, una tecnica molto potete per realizzare siti in modo asincrono.

 

L'acronimo AJAX sta per Asynchronous Javascript And Xml, anche se oggi ormai l'uso di XML è stato praticamente soppiantato dal molto più versatile formato JSON.

In questa guida numero uno vedremo quindi come realizzare una semplicissima chiamata ajax realizzata attraverso il metodo $.ajax() di jQuery.
Realizzeremo un basilare "hello world", composto da quattro file:

  1. index.html
  2. style.css
  3. main.js
  4. contents.json

Aprite un editor (vi consiglio vivamente Brackets) e scrivete il codice base di una pagina html inserendo nel body un elemento h1 e un elemento p assegnando ad ognuno id e classe.
Ovviamente ricordate di includere sia il file syle.css che jquery, che il main.js

Salvate il file con il nome index.php

<!DOCTYPE HTML>
<html>
    <head>
        <title>My First Ajax Page</title>
        <link rel="stylesheet" href="/style.css">
        <script src="/jquery.min.js"></script>
        <script src="/main.js"></script>
    </head>
    <body>
        <h1 id="title" class="page-title"></h1>
        <p id="text" class="page-text"></p>
    </body>
</html>

Creare adesso il file style.css
In questo file ovviamente potete inserire lo stile che volete.


html,body {
    font-family: Arial, sans-serif;
}
.page-title {
    font-size: 3em;
}
.page-text {
    font-style: italic;
}

Passiamo adesso alla creazione del file JSON che conterrà i contenuti testuali della pagina index.php
Chiameremo questo file contents.json ed avrà una struttura veramente basilare


{
    "title":"Hello World!",
    "text": "This is my first AJAX page"
}

Per ultimo generiamo il file main.js dove si dovrà scrivere il codice javascript per la chiamata ajax vera e propria


function ajaxLoader() {
    $.ajax({
        url:'contents.json',
        dataType: 'json',
        success: function(data) {
            $('#title').html(data.title);
            $('#text').html(data.text);
        },
        error: function() {
             alert('AJAX ERROR!');
        }
    });
}

$(document).on('ready', function() {
    ajaxLoader();
});

La parte importante di questo tutorial risiede proprio nella parte javascript.
Come già detto il metodo utilizzato per realizzare la chiamata è $.ajax() di jQuery. Vediamo più nel dettaglio in cosa consiste.

$.ajax();

Il metodo ajax di jQuery permette di caricare in modo asincrono una risorsa esterna alla pagina che esegue la chiamata. La sintassi da utilizzare è:

$.ajax({[parametri],[callbacks]});

Parametri

I parametri da passare in una chiamata sono essenzialmente due:
url consiste nell'url del file da caricare,
dataType specifica il tipo di file ed indica alla funzione che tipo di risorsa interpretare.

Nel nostro caso i due parametri sono:

url: 'contents.json',
dataType: 'json'

Esistono poi ulteriori parametri che vedremo in articoli successivi.

Callbacks

Le callbacks sono delle funzioni che vengono eseguite a seguito della chiamata ajax vera e propria. Ne esistono di diverse, ma diciamo che le due fondamentali sono success: function(data) {}error: function() {}

La callback success viene lanciata quando la chiamata ajax ha successo e lo script riceve il file formattato come espresso nel parametro dataType. Il file di ritorno è costituito dalla variabile data passata come parametro alla callback success.

La callback error viene invece lanciata nel caso in cui la chiamata ajax riscontri problemi, come il file non trovato o se il file non risponde alle specifiche del parametro dataType.

 

success: function(data) {}

Nel caso di questo tutorial la funzione di callback lanciata all'evento success della chiamata ajax è stata utilizzata per passare il contenuto del file contents.json all'interno della pagina index.html

Per far questo è stata utilizzato il metodo .html() di jQuery. 

Come avrete avuto modo di notare, il risultato della chiamata ajax effettuata, consistente appunto in un file json, è stato passato alla funzione come parametro attraverso la variabile data.  Questo object è stato poi "parsato" ottenendo titolo e testo riferendoci ad essi come data.title e data.text

DEMO  DOWNLOAD

Joomla SEF URLs by Artio