Forum programmazione

[DaD]

Corso AJAX - Introduzione



Iniziamo subito col dire che questo corso verrà incentrato prettamente su ajax e quindi sulle tecnologie che vi competono (js, php, xml ecc) per cui è richiesta almeno una base da cui partire (che il corso non fornirà), quindi se non possedete tali requisiti sarà meglio farvi un giro per la rete (o in queta e altre sezioni di big-bug) per trovare guide appropriate.

.Prefazione
Iniziamo quindi subito, cos'è AJAX? Naturalmente di questi tempi non si sente parlare d'altro ed è anche giusto che sia così, ajax infatti è un insieme di tecnologie che nel giro di un paio d'anni ha rivoluzionato il modo di sviluppare per il web, ed è alla base della famosa web 2.0 di cui tanto si sente parlare oggi giorno.
Per chi non lo sapesse AJAX è l'acronimo di Asynchronous JavaScript and XML il che vuol dire Javascript e XML asincroni, dal nome di questa `tecnica di programmazione` (perhcè di questo stiamo parlando) si può capire che lo scopo principale di ajax è quello di ottenere pagine web dinamiche in modo dannatamente più rapido di quanto possano fare script server-side, alla base infatti c'è uno scambio di piccoli pacchetti di dati in background con il server, in questo modo l'utente che effetua delle modifiche alla pagina non deve attendere la ricarica completa della pagina ma bensì solo la richiesta dei dati che ha modificato, in questo modo i tempi di attesa come dicevo prima si accorciano in maniera disarmante.
La parte teorica del corso è bella che finita, se volete approfondire più nello specifico cosa sia ajax e cosa sia possibile fare con esso vi rimando al link dell'onnipresente wiki.

.XMLHttpRequest
Partiamo subito con il cuore di ajax, ossia la richiesta http che avviene da javascript, il segreto che sta alla base di tuto è proprio questo, come possiamo richiedere una query direttamente da javascript e in questo caso quindi in modo asincrono?
Questo tipo di richieste vengono effetuate dall'oggetto XMLHttpRequest, grazie a quest'ogetto (presente in tutti i browser ormai) è possibile interrogare il nostro server. Adesso vediamo per bene le cose essenziali che ci servono per realizzare un'applicazione in ajax:

• Del codice js per gestire lo show delle informazioni richieste;
• L'oggetto XMLHttpRequest per poter far richieste al server in background;
• Ed uno script server-side, che possa gestire il nostro database/applicazione in modo trasparente all'utente.

Adesso che sappiamo cosa ci serve cerchiamo di entrare più nel vivo dell'azione costruendoci la nostra funzione che interroghi il nostro database.

Code: Select all

functin BGrequest(myrequest){
    var xmlHttpReq = null;
    xmlHttpReq = new XMLHttpRequest();
    xmlHttpReq.onreadystatechange = myrequest;
    return xmlHttpReq;
}

Analizziamo ora la funzione BGrequest, per prima cosa la funzione richiede come parametro una funzione (myrequest) che verrà chiamata a richiesta eseguita, questo perchè quando viene effetuata la richiesta al server e viene generata, possono passare alcuni secondi e l'utente può continuare a gestire la sua pagine senza accorgersi che in relatà la nostra richiesta sta ancora generandosi.
Nel momento in cui la richiesta sarà conclusa allora la nosra funzione sarà richiamata, per capire meglio quello che succede è questo;

• La richiesta viene lanciata dal client al server e scatta la nostra funzione myrequest();
• La richiesta per cui viene lasciata in background a lavorare;
• Infine sarà l'oggetto XMLHttpRequest a dirci quando la richiesta sia effetivamente conclusa.

Adesso dobbiamo gestire la nostra funzione BGrequest in modo tale da richiedere effetivamente qualcosa al server per cui andiamo a creare dell'altro codice js;

Code: Select all

function HttpResponse(){
    httpReq = BGrequest(myrequest)
    httpReq.open("GET", "myurl");
    httpReq.send(null);
}

Ok questo stralcio di codice non fa altro che richiamare la nostra funzione BGrequest in questo modo l'interrogazione avrà finalmente inizio grazie al metodo GET che punta al nostro script server side. Ora che abbiamo le nostre funzioni basi dobbiamo creare la funzione myrequest() la quale si preocupa di verificare la request al server.

.Response
Andiamo subito a scrivere la nostra myrequest che gestisce la richiesta:

Code: Select all

funtion myrequest(){
    if(httpReq.readyState == 4 && httpReq.status == 200) workAJAX(httpReq.responseText);
}

Ecco la nostra funzione myrequest, quest'ultima verrà richiamata quando la richiesta effetuata tornerà dal server al client, essa verrà richiamta più volte durante la richiesta e il metodo readystate ci fornisce lo stato corrente della nostra richiesta http.
Ci sono 4 stati in cui si può trovare la richiesta;

• 0 (Non inizializzata): Non c'è stata ancora inizializzazione da parte della richiesta http;
• 1 (In caricamento): In fase di caricamento;
• 2 (Caricata): La richiesta è stata caricata;
• 3 (Interattiva): La richiesta non è ancora conclusa ma l'utente sta già ricevendo i primi dati di ritorno;
• 4 (Completo): L'interroggazione al server è completata

Bene qui si conclude la prima lezione del corso introduttiva ad ajax, spero di farne altre a breve, naturalmente chi ha intenzione di collaborare basta che mi piemma oppure può scrivere anche stesso in questo topic

[k8]

Ottima dad,
una domanda.. che mi dici riguardo a JSON?
io non ho ben capito l'utilità.. la sto spulciando da pochi minuti, magari mi aiuti a capire meglio..

[cobra90nj]

Aggiungo una piccolissima cosa,quando si effettua una richiesta al server come in questo caso:

Code: Select all

httpReq.open("GET", "myurl");

è sempre consigliabile usare la funzione "escape" alle richiesta, un piccolo esempio:

Code: Select all

httpReq.open("GET", "test.php?prova="+escape(name_get));

che viene passato dalla funzione . . .

[code91]

bella..

[Krystal]

FIgo!