Polo tecnologico Colle di Nocera Umbra propone una applicazione Ajax completa sviluppata passo passo

castello di collePolo tecnologico Nocera Umbra nel corso delle sessioni di training su Ajax nei vari portali Umbriaway Consulting ha avvicinato il focus su Ajax riassumiamo con questo post alcuni principi cardine di facile assimilazione introduttivi. Asynchronous JavaScript and XML é la spiegazione dell’ acronimo. Con Ajax puoi aggiornare parti della pagina senza ricaricare tutto il documento rendendo il tutto dinamico e veloce. Per usare Ajax devi conoscere tecnologie base come JS / DOM manipulation, HTML, CSS, PHP. E’ proprio questo l’aspetto più interessante di questa tecnologia sottolinea polo tecnologico Colle di Nocera Umbra, in quanto la commistione di più tecnologie consentono una interesezione di comportamenti, tecnologia che dovrai conoscere preferibilmente client side. Le tecniche usate in Ajax sono nello specifico: XMLHHTPRequest – permette lo scampio asincrono con il server mentre la pagina può fare altro; JAvaScript / Dom Manipulation che permette di processare e interagire con i dati; CSS per vestire i dati con una veste grafica; XLM or JSON usati come formato di dati. Come abbiamo sottolineato più volte noi di polo tecnologico Colle di Nocera Umbra X sta per XML ma non é un vincolo da patto di sangue, visto che altre opzioni come JSON sono molto usate e diffuse. Ma la domanda di polo tecnologico Colle di Nocera Umbra é: come lavora Ajax? Come sappiamo in una poagina web tradizionale le richieste al server sono singolarmente sincrone e tutto si arresta finché il processo non finisce. Con Ajax l’elaborazione dati avviene in background permettendo alle singole parti della pagina il caricamento senza vincolare tutta la pagina al redrawn totale. Adesso vedremo nello specifico come creare una semplice applicazione Ajax. Passo uno pagina web base:

<!DOCTYPE html>
<html>
<head>
<title>pagina web base</title>
</head>
<body>
</body>
</html>

Passo 2 , aggiungere un div section e dargli un nome specifico carta di identità per riconoscimento, in questo modo Ajax potrà lavorare su quella porzione di pagina:

<!DOCTYPE html>
<html>
<head>
<title>pagina web base</title>
</head>
<body>

 div id=ajaxinfo

</body>
</html>

Fase tre aggiungere un buttone per la chiamata del codice Ajax:
<!DOCTYPE html>
<html>
<head>
<title>pagina web base</title>
</head>
<body>

 div id=ajaxinfo

<button type=”button” onclick=”load()”>Go</button>
</body>

fase 4 aggiungere la funzione load() sull’ head:
<!DOCTYPE html>
<html>
<head>
<title>pagina web base</title>

function load()
{
}

</head>
<body>

 div id=ajaxinfo

<button type=”button” onclick=”load()”>Go</button>
</body>
</html>

fase 5 creare l’oggetto XMLHTTPRequest e definizione metodi uno che aprirà un file e l’altro che consentirà lo scambio dei dati con il metodo send

<!DOCTYPE html>
<html>
<head>
<title>pagina web base</title>

function load()
{
var xmlHttpRequest;
if (window.XMLHttpRequest)
{
xmlHttpRequest = new XMLHttpRequest();
}
else
{
xmlHttpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlHttpRequest.open(“GET”, “ajax_file.txt”, true);
xmlHttpRequest.send();
}

</head>
<body>

 div id=ajaxinfo

<button type=”button” onclick=”load()”>Go</button>
</body>
</html>

nella fase sei dobbiamo aggiungere quelle istruzioni che ci consentono di monitorare a che punto é la richiesta spedita al server questo avviene tramite “onreadystatechange” che fa il punto sulle richieste e sulla loro elaborazione prima del completamento per dare infine una risposta:

<!DOCTYPE html>
<html>
<head>
<title>pagina web base</title>

function load()
{
var xmlHttpRequest;
if (window.XMLHttpRequest)
{
xmlHttpRequest = new XMLHttpRequest();
}
else
{
xmlHttpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
}

xmlHttpRequest.onreadystatechange=function()
{
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)
{
document.getElementById(“ajaxInfo”).innerHTML = xmlHttpRequest.responseText;
}
}

xmlHttpRequest.open(“GET”, “ajax_file.txt”, true);
xmlHttpRequest.send();
}

</head>
<body>

div id=ajaxinfo

<button type=”button” onclick=”load()”>Go</button>
</body>
</html>

che cosa succederà quindi nel momento in cui schiaccerò il pulsante GO chiede polo tecnologico Colle di Nocera Umbra?
1. La richiesta viene spedita al Server; 2 il server ritorna il contenuto del file richiesto; 3 i dati elaborati verranno inseriti come risposta nella porzione di pagina contrassegnata dal nome del div che in questo caso é ajaxinfo. Ovviamente polo tecnologico Colle di Nocera Umbra fa presente che questa dinamica si realizza soltanto se sul server esisterà un file ajax_file.txt per il completamento dell’ intero processo. Abbiamo visto un esempio completo in Ajax vivisezionata in ogni sua più piccola fase in uno dei prossimi articoli in uno dei portali di Umbriaway Consulting vedremo nello specifico alcune righe utilizzate qui per confezionare la nostra applicazione Ajax.

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Blog su WordPress.com.

Su ↑

%d blogger hanno fatto clic su Mi Piace per questo: