Chiamata Ajax sincrona Come effettuare una chiamata Ajax sincrona in modo tale da evitare problemi che possono presentarsi con chiamate asincrone.

Pubblicato da lentux-informatica il

  •  
  •  
  •  
  •  
  •  

Introduzione

Come ben si sa, il termine AJAX, acronimo di Asynchronous JavaScript and XML, è una tecnica di sviluppo di applicazioni WEB.

Essa permette lo scambio di dati in background fra un web browser e un server, che consente l’aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell’utente.

Facciamo un esempio pratico ti utilizzo di Ajax:

Abbiamo una pagina web in cui c’e’ bisogno di inserire dei campi all’interno di un form e una volta inseriti tutti i campi effettuare una conferma e andare avanti.

Se c’e’ la necessita di fare un lavoro completo, ossia verificare i campi inseriti se sono corretti (ad es. lunghezza e valori di un codice fiscale, correttezza di un indirizzo mail ecc.) o far comparire delle liste dinamiche nel caso in cui il valore di una lista dipende dalla selezione della lista precedente (ad es. caricare una lista di province una volta selezionata una lista di regioni) c’e’ bisogno di fare delle chiamate al server per la validazione degli errori o per il caricamento delle liste da visualizzare.

Per effettuare tali operazioni solitamente si utilizzano le classiche chiamate in GET o POST al server e si ricevono i risultati desiderati.

Facendo ciò però una volta effettuato il submit del form tutti i dati precedentemente inseriti potrebbero in alcuni casi essere persi poichè viene effettuato un refresh della pagina.

Quindi tutti i campi del form rimarranno inalterati ma se stiamo lavorando con javascript e alcuni campi non sono salvati nel form questi verranno resettati e dovranno essere inseriti nuovamente.


Approfitta di tutte le offerte di Amazon per i tuoi regali di Natale con sconti fino al 60% su moltissimi prodotti!!!


Chiamata Ajax Asincrona

Questo è il momento in cui le chiamate AJAX risolvono tutti i problemi per chi lavora spesso con javascript.

Una chiamata AJAX solitamente ha una forma del tipo:

$.ajax({
  // definisco il tipo della chiamata
  type: "POST",
  // specifico la URL della risorsa da contattare
  url: "/prova.html",
  // passo dei dati alla risorsa remota
  data: "nome=marco&cognome=bianchi",
  // definisco il formato della risposta
  dataType: "html",
  // imposto un'azione per il caso di successo
  success: function(risposta){
    $("div#prova1").html(response);
  },
  // ed una per il caso di fallimento
  error: function(){
    alert("failure!!!");
  }
}

Non sto qui a spiegare le varie parole chiave evidenziate ma passo direttamente alla soluzione del titolo del post, ossia effettuare una chiamata AJAX sincrona.

Come dice l’acronimo di AJAX (Asynchronous JavaScript and XML), di base viene effettuata una chiamata asincrona e cioè indipendente dalle operazioni che compie l’utente, una volta chiamata lei svolge da sola le sue operazioni.

Questo può essere un notevole vantaggio, ma ci sono casi in cui può risultare uno svantaggio.

Esempio pratico è il caso in cui tramite una funzione AJAX voglio inviare una quantita di dati elevata al server per essere processati nell’ordine in cui io li invio.

Se esegue il suo lavoro in maniera asincrona può nascere un problema.

Può accadere che alcuni dati arrivino al server in maniera non ordinata rispetto a come penso di inviarli io.

Quindi se mi aspetto come ritorno una lista ordinata con i valori che gli ho inviato io dalla parte WEB, magari riceverò un ordine diverso da come pensavo di avergli inviato io, ma otterrò l’ordine con cui AJAX ha inviato i dati.


Approfitta delle offerte di Natale di Ebay con sconti fino al 60% su moltissimi prodotti e SPEDIZIONE GRATUITA!!!

Chiamata Ajax Sincrona

Per evitare questo problema a volte è necessario aver bisogno di una chiamata AJAX Sincrona.

Voglio fare in modo che ogni dato sia inviato al server solo e soltanto quando il dato precedente è stato gia processato.

Ciò vuol dire che la chiamata AJAX avrà ricevuto una risposta del tipo Success oppure Error.

Facendo cosi, sarò sicuro che l’ordine sarà quello che ho inviato io al server tramite la chiamata AJAX.




Per fare ciò basta semplicemente inserire una parola chiave all’interno della chiamata AJAX per fare in modo di impostare la chiamata Sincrona, che di default è Asincrona.

La chiamata AJAX precedente diventerà quindi:

$.ajax({
  type: "POST",
  url: "/prova.html",
  data: "nome=marco&cognome=bianchi",
  dataType: "html",
  async:false,
  success: function(risposta){
    $("div#prova1").html(response);
  },
  error: function(){
    alert("failure!!!");
  }
}

Quindi ricordate che l’ottimo utilizzo asincrono che ci da AJAX a volte può rivoltarsi contro ed è meglio conoscere tutte le sue particolarità.


  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •