Visualizzazione post con etichetta Basi su AJAX. Mostra tutti i post
Visualizzazione post con etichetta Basi su AJAX. Mostra tutti i post

domenica 15 luglio 2007

Introduzione su AJAX

AJAX è l'acronimo di Asynchronous JavaScript and XML, più che essere una specifica tecnologia è una tecnica per lo sviluppo di applicazioni web interattive, che utilizza un insieme di diverse tecnologie, tra qui le più importanti sono JavaScript e l'oggetto XMLHttpRequest (XHR).

Il vantaggio principale apportato dall'uso di AJAX è di ottenere pagine web che rispondono immediatamente alle selezioni dell'utente, senza che debba attendere il ricaricamento dell'intera pagina.


Il motore XHR AJAX è un oggeto JavaScript che viene chiamato ogni volta vi sia la necessità di richiedere dati al server.
In sostanza ogni link effettua una chiamata al motore AJAX, che schedula ed esegue la richiesta, che viene effettuata in modalità asincrona, cioè il codice d'esecuzione non attende la risposta per continuare.
Il server che normalmente restituisce dati HTML, immagini, CSS, JavaScript, è configurato per dare informazioni che possono essere trattare dal motore AJAX, come ed esempio semplice testo, XML o altri formati interpretabili da AJAX.
Alla risposta dal server l'oggetto XHR effettua il parsing dei dati e riconfigura l'interfaccia utente sulla base delle informazioni ricevute.
Per il fatto che la quantità di dati scambiata con il server è molto minore rispetto le tradizionali applicazioni web, l'aggiornamento dell'interfaccia e le attività dell'utente vengono eseguite più velocemente.



In sintesi AJAX come funziona:
- chiama qualque tecnologia server-side che può ricevere richieste provenineti da un client
- processa le richieste a livello remoto sul server
- restituisce al browser del client e risultati dei processamento efettuto lato server
- esegue ulteriori elaborazioni dei dati a livello client come per esempio modifiche al DOM.

Tecnologie utilizzate da AJAX:
Componenti client-side
XHTML: linguaggio per la rappresentazione dei contenuti primari (necessaria)

CSS: formattazione degli stili della pagina XHTML (ozionale)

DOM: aggiornamento dinamico della pagina caricata nel browser (necessaria)

XML: formato per lo scambio dei dati (ozionale)

XSLT: trasformazione da XML in XHTML (secondo lo stile CSS) (ozionale)

XMLHttp: mediatore (broker) per le comunicazioni primarie

JavaScript: linguaggio di scripting usato per programmare un motore AJAX (necessaria)

Componenti server-side
PHP
Java servlets
.NET
altri application server
l'importante è assicurare il corretto formato dei dati da reinviare al motore AJAX
Pubblicato da alle Nessun commento:
Etichette:

sabato 14 luglio 2007

Semplice esempio di richiesta

L'esempio descrive una pagina HTML che contiene il pulsante "Invia richiesta asincrona al server".
Cliccando sul pulsante si avvia appunto una richiesta asincrona al server.
Il server risponde inviando un file di testo statico XML contenete la seguente stringa “Hello AJAX world”.
La risposta viene gestita dal browser mostrando il contenuto del file XML in una finestra di avviso mediante il comando alert.

Link all'esempio eseguibile.



Codice della pagina HTML interpretato dal browser

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple XMLHttpRequest</title>

<script type="text/javascript">
var xmlHttp;

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}

function startRequest() {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", "simpleResponse.xml", true);
    xmlHttp.send(null);
}

function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            alert("Risposta dal server: " + xmlHttp.responseText);
        }
    }
}
</script>
</head>

<body>
    <form action="#">
        <input type="button" value="Invia richiesta asincrona al server" onclick="startRequest();"/>
    </form>
</body>
</html>



File simpleResponse.xml presente sul server


Hello AJAX world
Pubblicato da alle Nessun commento:
Etichette:

Paradigma dell'interazione AJAX



L’aspetto di una comune interazione AJAX:





  1. (1) Un evento dal lato client attiva un evento AJAX

  2. (2) Viene creata un’istanza dell’oggetto XMLHttpRequest.
    Viene aperto un canale di comunicazione al server mediante il metodo open(), all’interno del quale si specifica l’URL del server ed il metodo GET o POST per l’inoltro delle richieste.
    Viene infine attivata la richiesta mediante il metodo send().

  3. (3) Al server viene fatta la richiesta mediante una chiamata servlet, uno script CGI o una qualsiasi tecnica lato server.

  4. (4) Il server esegue la query di richiesta, accedendo ad un archivio dati o ad un altro sistema.

  5. (5) La richiesta viene restituita al browser.
    Il Content-Type della risposta deve essere impostato a testo/xml, in quanto l’oggetto XHR può elaborare risultati solo di tipo testo o HTML.

  6. (6) Alla ricezione della risposta dal server, l’oggetto XHR chiama la funzione callback() che verifica controlla le proprietà di readystate ed il codice di stato status reso dal server al fine di verificare il buon esito della trasmissione.

  7. (7) Se tutto procede come previsto, la funzione callback() esegue operazioni interessanti sul server.
Pubblicato da alle Nessun commento:
Etichette:

venerdì 13 luglio 2007

Come creare l'oggetto XMLHttpRequest

Per poter utilizzare l'oggetto XMLHttpRequest XHR per l'invio della richieste e la ricezione delle risposte, è necessiario istanziare tramite il codice JavaScript un oggetto XHR.
L'implementazione varia da browser a browser, l'XHR viene istanziato come un oggetto ActiveX in Internet Explorer, mentre come un oggetto JavaScript nativo in Firefox, Mozilla, Opera, Safari. Sarà quindi sufficiente verificare se il browser supporta l'ActiveX per creare l'istanza XHR come oggetto ActiveX o in altrenativa come oggetto JavaScript nativo.



var xmlHttp;

function creaXMLHttpRequest(){
  if (window.ActiveXObject) {
    xmlhttp = new ActiveXOject("Microsoft.XMLHTTP");
  }
  else
    if (window.XMLHttpRequest) {
      xmlHttp = new XMLHttpRequest();
    }
    else alert("Questo browser non supporta AJAX");
}


Spiegazione del codice:
Bisogna creare una variabile globale detta xmlHttp, in cui verrà depositato il riferimento all’oggetto. Il metodo creaXMLHttpRequest() crea un’istanza di XMLHttpRequest, sulla base del tipo di browser.

L’istruzione if (window.ActiveXObject) valuta se il browser supporta i controlli ActiveX e quindi se è un Internet Explorer, nel qual caso assegna alla variabile xmlhttp l’istanza XHR mediante il costruttore new ActiveXOject("Microsoft.XMLHTTP").

Se il browser non supporta l’ActiveX, verrà valutata la condizione if(window.XMLHttpRequest) ovvero se il browser implementa XMLHttpRequest come oggetto JavaScript. A risposta positiva viene creata un’istanza XMLHttpRequest e assegnata alla variabile xmlHttp. A risposta negativa viene emesso un messaggio di avviso che il browser non suporta AJAX.
Pubblicato da alle Nessun commento:
Etichette:

Asincronia di AJAX

Le richieste al server sono inviate in modalità asincrona, consentendo al browser di continuare a rispondere agli input dell’utente, mentre aspetta la risposta del server in background.
Se invece fosse stat scelta un’operazione sincrona e la risposta del server fosse arrivata dopo molti secondi, il browser non avrebbe risposto all’input dell’utente durante il periodo di attesa, causando nell’utente una perplessità sul perché non vi fosse un feedback durante la lunga attesa
Il funzionamento asincrono consente all’utente di continuare a lavorare mentre il server lavora alla richiesta precedentemente inoltrata in background.
La capacità di comunicare con il server senza interrompere il flusso delle operazioni dell’utente apre una vasta gamma di tecniche per migliorare l’usabilità di una pagina web. Basti pensare ad un’applicazione dedicata alla convalida dei dati di input dell’utente:
- un utente sta completando i campi di un form
- il browser invia periodicamente al server per la convalida i valori inseriti , senza interrompere le operazioni di completamento dei campi dell’utente
- se una regola di convalida non da esito positivo, l’utente viene notificato immediatamente, prima che il modulo venga effettivamente inviato al server per l’elaborazione.

Il processo di controllo asincrono apporta due grandi vantaggi dal lato client e server:
- fa risparmiare tempo e frustrazioni inutili all’utente
- riduce il carico di lavoro al server, non dovendo essere ricreati i contenuti del form nel caso di un invio errato.

Pubblicato da alle Nessun commento:
Etichette:

Document Object Model

DOM acronimo di Document Object Model è una specifica del W3C per un metodo indipendente dalla piattaforma e dal linguaggio che consente di accedere e modificare il contenuto e la struttura di un documento.
È un modello che permette di definire gli oggetti per di rappresentare e manipolare un documento HTML o XML; descrive come i diversi oggetti di una pagina sono collegati tra loro, vediamo un esempi:.

Esempio di DOM di una semplice pagina web

<html>
  <head>
    <title>Pagina Web</title>
  </head>
  <body>
    <h1>Esempio di DOM</h1>
    <p>Questa pagina è costituita da 9 nodi</p>
  </body>
</html>


Rappresentazione grafica del DOM:






La pagina è costituita da nodi, ogni tag, ogni elemento compreso tra i tag è un nodo.
I nodi possono avere e proprietà. Inoltre un nodo (come <body>) può contenere altri nodi.I browser che supportano il DOM W3C offrono la possibilità di possibile accedere e manipolare ogni nodo, ma anche aggiungerne di nuovi dinamicamente, ed eliminarne altri già presenti.
Pubblicato da alle Nessun commento:
Etichette:
Iscriviti a: Post (Atom)