oppure

    httpRequest.open("POST", URL, modalita);
    httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Nel caso decidessimo di effettuare una connessione POST dovremmo necessariamente inviare anche l'header (come scritto sopra) per far capire al nostro server il modo con cui riceverà i dati. Il tipo "application/x-www-form-urlencoded" è l'enctype standard con cui vengono inviati i form attraverso internet.

La funzione setRequestHeader serve per passare qualsiasi informazione all'header della richiesta senza alcun vincolo.

Il terzo parametro della funzione open() corrisponde alla modalità con la quale vogliamo effettuare la richiesta al nostro server: sincrona o asincrona:

1) mettiamo true per la modalità asincrona
2) mettiamo false per la modalità sincrona

Se utilizziamo la modalità sincrona JS invia una richiesta per volta al server e fino a che non riceve risposta non invia altre richieste.

Esistono anche un 4° e 5° parametro da passare alla funzione, omessi da me perchè a mio avviso inutili: username e password.
Dato che la connessione con questo metodo permette anche l'accesso ad aree riservate sul server, questi 2 parametri permettono l'accesso a queste aree. Sconsiglio vivamente l'utilizzo in quanto chiunque sarebbe in grado di recuperare i dati di accesso, semplicemente leggendo il vostro script.

Concludendo se volessimo richiamare la nostra pagina "pippo.php" sul server con metodo GET in modalità asincrona, dovremmo scrivere:

 httpRequest.open("GET", "/path_to/pippo.php", true);

Per essere pignoli, anche la richiesta remota possiamo inserirla in una condizione try / catch in modo tale da trappare l'errore se per caso il server non risponde.

N.B. nella URL non siamo obbligati a chiamare una pagina PHP, ma potremmo chiamare semplicemente una pagina HTML o un file TXT:


Eventuali parametri che volessimo passare alla nostro server, li possiamo codificare direttamente nella URL che richiamiamo:


A.A.A. ricordatevi che il valore delle variabili se è alfanumerico va sempre escappato con la funzione apposita, onde evitare errori:

var valore = "sono = a te ?";

URL = "/pippo.php?variabile=" + escape(valore);

Nell'esempio sopra se aganciassimo la variabile valore senza escapparla, genereremmo una URL non valida e il browser andrebbe in errore.

Una volta aperta la connessione con il server ed inviata la richiesta della pagina, dobbiamo procedere con l'invio dei nostri parametri, semplicemente utilizzando:


per tutte le connessioni GET, mentre per le connessioni POST sarebbe meglio evitare di inserire i parametri all'interno della URL (come indicato sopra), ma inserirli direttamente nel comando:


Se prendessimo come esempio l'esempio inserito poco sopra, la nostra richiesta POST diventerebbe:

var valore  = "sono = a te ?";
var valore2 = "qualcosa!";

httpRequest.open("POST", "/pippo.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("variabile=" + escape(valore) + "&variabile2=" + escape(valore2));

La differenza è che le variabili vengono codificate prima di essere inviate alla URL. Ricordatevi che in base al metodo di connessione utilizzato, anche le variabili in PHP ne risentono:

- se usate GET le variabili PHP saranno contenute nell'array $_GET[]
- se usate POST le variabili PHP saranno contenute nell'array $_POST[]

Ora che siamo riusciti ad inviare una richiesta al nostro server, dobbiamo metterci in attesa della risposta con l'oggetto readyState che contiene il codice di "interazione con il server". Nello schema seguente vediamo quali sono gli stati possibili della nostra connessione:


L'unico stato che a noi interessa è il numero 4 ovvero che la richiesta è andata a buon fine. Tutti gli altri stati sono stati di errore, quindi provando a scrivere il codice per questo comando:

switch ( httpRequest.readyState ) {
    case 1,2,3:
        alert('Errore di comunicazione: ' + httpRequest.status);
    break;
    case 4:
        if ( httpRequest.status != 200 ) {
            alert('Il server ha risposto con l'errore: ' + httpRequest.status);
        } else {
            // OK abbiamo il nostro risultato
        }
    break;
}

Nel codice sopra abbiamo aggiunto anche l'oggetto status che non è altro che l'errore che ci invia il server. I codici d'errore sono quelli standard ( 404 pagina non trovata, 403 permesso negato, ecc.). Volendo stampare anche il testo dell'errore, possiamo utilizzare l'oggetto statusText, cioè utilizzato verrebbe scritto:

 alert("Il server ha risposto: " + httpRequest.statusText); 

Per quello che serve a noi, il codice 200 indica "OK", quindi vuol dire che il server ci ha inviato il risultato della nostra richiesta.
Ora sta a noi decidere cosa dobbiamo farne dei dati ricevuti, o meglio, dobbiamo sapere se i dati che abbiamo ricevuto sono in formato XML oppure in formato testo (HTML, TXT, ecc..). Sapendo cosa abbiamo ricevuto, possimo utilizzare 2 oggetti diversi:

- httpRequest.responseText per i formati "ASCII"
- httpRequest.responseXML per il formato XML

Nel secondo caso (XML) utilizzando l'oggetto responseXML il nostro risultato sarà convertito automaticamente in DOM, ovvero verrà generato un oggetto JS contenente i nostri dati.
Come leggere i dati contenuti nel nostro ogetto sarà tema di un altro capitolo del corso.

In conclusione, se dovessimo unire tutte le parti di codice viste in questa pagina, otterremmo come risultato il codice seguente:

    if ( window.XMLHttpRequest ) {
        httpRequest = new XMLHttpRequest();
    } else if ( window.ActiveXObject ) {
        try { httpRequest = new ActiveXObject("MSXML2.XMLHTTP.3.0"); }
        catch (e) {
            try { httpRequest = new ActiveXObject("MSXML2.XMLHTTP"); }
            catch (e) {
                try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }
                catch (e) { httpRequest = false; }
            }
        }
    } else {
        httpRequest = false;
    }
    
    if ( httpRequest ) {
        try {
            httpRequest.open("POST", URL, true);
            httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            httpRequest.send( parametri);
        } catch (e) {
            alert("Impossibile inviare la richiesta al server");
        }
        
        switch ( httpRequest.readyState ) {
            case 1, 2, 3:
                alert("Errore di comunicazione: " + httpRequest.status);
            break;
            
            case 4:
                if ( httpRequest.status != 200 ) {
                    alert("Il server ha risposto con l'errore: " + httpRequest.status);
                } else {
                    var risultato = httpRequest.responseXML;
                }
            break;
        }
    } else {
        alert("Il browser non supporta connessioni XMLHttpRequest");
    }

Questo codice è il codice standard che viene utilizzato per inviare una richiesta al server utilizzando AJAX. Naturalmente il codice preso così non funzionerà (bisogna sostituire alcuni parametri con valori veri). Nella prossima lezione metteremo in pratica quanto acquisito in questa lezione provando a inviare una richiesta semplice al nostro server e stampare la risposta che ci viene ritornata.

Vi ricordo che per qualsiasi chiarimento è a disposizione il forum!

Alla prossima lezione.