Ajax + JAVA

**PerformancePort** · 21-04-2010, 22:44

Ciao ragazzi, ho un piccolo problema con Ajax. Praticamente mi sono messo a studiarlo da 2 giorni. Io programmo in JAVA.

Supponiamo che faccia una richiesta asincrona in una jsp:

Codice PHP:


         function inviaRichiesta(){



                new Ajax.Request('NomeServlet', {

                    method:  'get',

                    onSuccess: function(transport) {



                    }

                });

            }

Così entro all'interno della servlet chiamata "NomeServlet". Supponiamo che nella jsp in cui ho messo la funzione inviaRichiesta, ci sia un div chiamato:

<div id="test"></div>

al ritorno della richiesta asincrona come faccio a far stampare un messaggio nel div?Insomma cosa devo scrivere nella servlet?

**artorius** · 22-04-2010, 09:16

no, aspetta: tu devi avere un elemento nell'HTML della pagina che hai già aperto, dentro il quale andrai ad inserire la risposta del server:

Fai conto di avere

codice:

<html>
   <head>
      ...
   </head>
   <body>
      ...
      <div id = "Content"></div>
      ...
   </body>
</html>

Nell'Head poi hai la tua funzione per l'ajax

codice:

function inviaRichiesta(){
    new Ajax.Request('NomeServlet', {
         method:  'get',
         onSuccess: function(transport) {
             //$(str) ritorna l'elemento con id = alla stringa passata
             //Update sostituisce il contenuto dell'elemento con quello che gli passi
             //l'oggetto transport ha diversi attributi e metodi, responseText è il testo di ritorno dal server alla richiesta AJAX
             $('Content').update(transport.responseText);
         }
    });
}

In questo caso, quando nella servlet stampi, per esempio, "Pippo", dopo la richiesta ajax il div sarà:

codice:

<div id = "Content">Pippo</div>

**PerformancePort** · 22-04-2010, 09:32

Non mi è ancora del tutto chiaro. Allora new Ajax.Request, sta a indicare che sto facendo una richiesta asincrona, al suo interno definisco l'url, “in questo caso la servlet”, method dico che è un get o un post “in base a come voglio passare i parametri” onSuccess: function(transport) sta a indicare cosa? Che si tratta di una funzione asincrona ? E come passare un valore booleano o no? Oppure transport dovrebbe contenere i parametri che voglio passare alla servlet? Perchè se ho letto bene i parametri almeno che non si tratti di una richiesta post che vengono passati nella url, si dovrebbe usare il metodo send...

&('Content') è il nome del div dove andrò poi a stampare i valori che mi ritornano dalla servlet grazie al comando update;

Quindi nella servlet per far tornare il valore cosa dovro usare? L'oggetto della classe HttpServletResponse ?

**artorius** · 22-04-2010, 11:09

Originariamente inviato da PerformancePort
Non mi è ancora del tutto chiaro. Allora new Ajax.Request, sta a indicare che sto facendo una richiesta asincrona, al suo interno definisco l'url, “in questo caso la servlet”, method dico che è un get o un post “in base a come voglio passare i parametri” onSuccess: function(transport) sta a indicare cosa?

onSuccess è un evento, gli eventi sono condizioni che capitano in JS e, in caso di queste condizioni, l'interprete JS lancia la funzione associata all'evento. Nel tuo caso, onSuccess è l'evento che capita quando la richiesta Ajax viene conclusa con un ritorno 200 dal server (ovvero "ho trovato quello che mi hai chiesto e te l'ho mandato").

Che si tratta di una funzione asincrona ?

in un certo senso... essendo asincrona io posso fare altre cose mentre la richiesta è in esecuzione, ma allo stesso tempo non posso sapere quando finirà, proprio per questo uso l'evento, in modo che si occupi lo script di gestire la cosa.

E come passare un valore booleano o no?

No, è una funzione

Oppure transport dovrebbe contenere i parametri che voglio passare alla servlet?

No, transport è la variabile in cui viene salvato l'argomento della funzione, lo script Ajax.Request è fatto in modo che alla funzione associata all'onSuccess venga passato come argomento l'oggetto XMLHttpRequest usato per la richiesta AJAX, resposeText è l'attributo dell'oggetto XMLHttpRequest dove, al momento della conclusione della richiesta AJAX, viene salvata la risposta del server.

Perchè se ho letto bene i parametri almeno che non si tratti di una richiesta post che vengono passati nella url, si dovrebbe usare il metodo send...

O_o ...

&('Content') è il nome del div dove andrò poi a stampare i valori che mi ritornano dalla servlet grazie al comando update;

Quindi nella servlet per far tornare il valore cosa dovro usare? L'oggetto della classe HttpServletResponse ?

In che senso, non ho capito?

**PerformancePort** · 22-04-2010, 11:41

Supponiamo che nella jsp abbia due input , nome e cognome e questi parametri devo passarli nella funzione ajax, dove li infilo?

in più supponiamo che una volta entrato nella servlet, ho una stringa che contiene il valore = "ciao" e questo valore devo farlo poi stampare nel div della jsp, come dico alla servlet, questa stringa passala ad ajax?

con il response di HttpServletResponse ?

**artorius** · 22-04-2010, 12:43

allora i dati della form:

codice:

<form name = "nome" id = "MyForm" method="post" action  = "NomeServlet">
   


      nome: <input type = "text" name = "nome" />
   </p>
   


      cognome: <input type = "text" name = "cognome" />
   </p>
   


       <input type = "submit" value = "GO!!!" />
   </p>
</form>

Per intercettare il submit ed inviare al posto della richiesta normale una Ajax fai:

codice:

function Init(){
   $('MyForm').observe("submit", function(e){
      Event.stop(e); //Blocchi l'esecuzione del submit
      var elems = this.serialize(true); //Ottieni un oggetto con i dati della form {"nome" : "pippo", "cognome" : "de pippis"}
      
      //Qui ti faccio usare l'Ajax.Updater che funziona come il response, con la differenza che prende come secondo parametro l'id dell'elemento da aggiornare con la risposta dal server
      new Ajax.Updater("Content", this.action, {
           method:  this.method, //Uso il metodo della form
           parameters : elems //Gli passo come parametri i valori estratti dalla form
      }); 
   })
}

Event.observe(window, 'load', Init);

Questo è sufficiente per implementare l'invio in POST dei dati tramite AJAX alla servlet e ad aggiornare il div#Content con la risposta dal server.

Consiglio: quando sviluppi tieni sempre aperto http://api.prototypejs.org/

**PerformancePort** · 22-04-2010, 12:52

Ok. ma se dentro la servlet voglio fare ritornare un messaggio nella jsp? Per esempio esegui il login, con la richiesta ajax mi porto dietro nickname e password, nella servlet controllo che l'utente esiste, se non esiste nel div faccio stampare un messaggio d'errore. Ecco nella servlet cosa devo scrivere?

**artorius** · 23-04-2010, 09:23

la servlet deve semplicemente ritornare il messaggio di errore se c'è stato un errore, il messaggio di benvenuto se altrimenti.

**PerformancePort** · 23-04-2010, 09:48

Ok...adesso però scusa se continuo a rompere, però è per capire bene :P.

Lasciando stare il codice che hai scritto te, ho provato a farne uno io:

Codice PHP:


       <script type="text/javascript">

            function recuperaCampi(){



                //Parametri;

                var campo = document.nomeForm.nomeCapo.value;



                new Ajax.Request('ScriviMessaggio?campo='+campo, {

            

                    method:  'post',

                    parameters:campo,

                    onSuccess: function(transport) {

                        

                    }

                });

            }



        </script>

Poi nella servlet faccio semplicemente:

request.getParameter("campo");
Cosa succede, che nella servlet quando lo recupero col getParameter mi esce Stringa vuota oppure recupera un campo del tipo [object http e qualcosa]

**artorius** · 23-04-2010, 10:12

ma hai letto le API di Ajax.Request sul sito di prototypejs.org?

parameters DEVE essere o una stringa nel formato di query HTTP (es. nome=pippo&cognome=pluto$maschio=1 ), o un oggetto JS con chiave il nome per parametro e valore il value da assegnargli (es {"nome" : "pippo", "cognome" : "pluto", "maschio" : 1} ), prova a mettere:

codice:

function recuperaCampi(){

                //Parametri;
                var campo = document.nomeForm.nomeCapo.value;

                new Ajax.Request('ScriviMessaggio', {
                    method:  'post',
                    parameters: "campo="+campo,
                    onSuccess: function(transport) {
                        alert(transport.responseText);
                    }
                });

}

Discussione: Ajax + JAVA

Strumenti discussione

Ricerca discussione

Visualizza

Ajax + JAVA

Permessi di invio