Brainleaf
Web Resources

Nel primo articolo (Tutorial Ajax - Il primo "Hello World") di questa serie abbiamo realizzato insieme una prima elementare chiamata ajax. In questo secondo articolo vedremo invece come interagire con un vero e proprio webservice php.

 

In questo articolo imparerete a gestire un'interazione asincrona tra una pagina web e un webservice, dove da un lato verranno inviati dei dati a un webservice che, dopo averli processati, invierà una risposta di ritorno con dei dati associati.

L'esempio pratico sarà basato su un semplicissimo form nel quale inseriremo una piccola operazione matematica che verrà validata dal webservice php. Realizzeremo tre file principali:

  1. index.html
  2. style.css
  3. main.js
  4. webservice.php

GET e POST

Con GET e POST si definiscono due diversi tipi di chiamata.

Il tipo GET
è quello che si utilizza quando il tipo di chiamata non richiede invio di dati e il cui scopo e solo quello di prelevare dati da un file di norma statico.

Il tipo POST
è al contrario quello che si utilizza quando devono invece essere passati dei dati al webservice. Ovviamente entrambi i tipi di chiamata prevedono un "ritorno" di dati, ma solo attraverso POST è possibile inviarne degli altri al momento in cui viene lanciata la chiamata.

Nella chiamata realizzata nel'articolo Tutorial Ajax - Il primo "Hello World" è stato utilizzato il metodo GET, dato che il nostro interesse era quello di prelevare solamente dei dati da un file statico.
Nell'esempio di questo articolo invece, si dovrà necessariamente ricorrere ad una chiamata di tipo POST, in quanto dovremo inviare i dati della nostra operazione ad un webservice che dovrà validarli.

Inviare Dati

Il modo più semplice, e sicuramente il più comune, per permettere ad un utente di interagire con un applicativo web è il form.
Con un form è possibile permettere all'utente di inviare dati e ottenere risposte.
Quello che faremo sarà quindi prima di tutto realizzare un form per l'operazione matematica che vogliamo validare.

HTML

Inseriamo nel file index.html un form con tre input di tipo text ed un sumbit.
Inseriamo inoltre anche un elemento div all'interno del quale andremo ad "piazzare" il messaggio personalizzato generato dalla risposta del webservice.


<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>My First Ajax Page</title> 
        <link rel="stylesheet" href="/style.css"> 
        <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="/main.js"></script> 
    </head> 
    <body> 
        <h1>Ajax POST</h1> 
        <form id="form">
            <input type="text" id="number-1" name="number-1" class="form_input" placeholder="Your First Number">
            <span>+</span>
            <input type="text" id="number-2" name="number-2" class="form_input" placeholder="Your Second Number">
            <span>=</span>
            <input type="text" id="user-result" name="user-result" class="form_input" placeholder="Your Result">
            <p>
                <input type="submit" id="sendBtn" value="Check Your Result">
            </p>
        </form>
        <div id="message">
            <h3></h3>
            <p></p>
        </div>
    </body> 
</html>

Ovviamente, come avrete già notato, il form non è stato realizzato proprio a regola d'arte, ma è sicuramente sufficiente a dare un'idea di ciò che deve essere fatto. La cosa importante da sottolineare è l'assenza degli attributi action e method solitamente associati ad un form quando esso viene usato in maniera sincrona.

In una chiamata asincrona il form viene infatti utilizzato semplicemente come collettore tra la pagina html e la funzione javascript che invierà i dati al webservice utilizzando il metodo post di ajax.

Per questo motivo è importante associare una ID univoca sia al form che al bottone di invio, che ovviamente non deve necessariamente essere un input di tipo submit dato che attraverso la chiamata asincrona "snaturiamo" il comportamento del form.

Javascript

Rimanendo sempre dal lato frontend, il file che gestirà il passaggio di dati tra la pagina html e il webservice sarà ovviamente il javascipt. Vediamo quindi di capire cosa stiamo facendo dando una prima occhiata alla funzione ajaxLoader()


function ajaxLoader() {
    $('#sendBtn').on('click', function(e) {
        e.preventDefault();
        var formData = $('#form').serialize();
console.log(formData); $.ajax({ url: 'webservice.php', type: 'POST', data: formData, dataType: 'json', success: function(data) { var msgTitle = (data.success === true) ? "Success" : "Error"; var msgText = (data.success === true) ? "Your result is correct." : "Your result is wrong."; $('#message > h3').html(msgTitle); $('#message > p').html(msgText); }, error: function() { alert('AJAX ERROR!'); } }); }) } $(document).on('ready', function() { ajaxLoader(); });

Iniziando dal principio, la prima cosa fatta è stata quella di "racchiudere" la chiamata all'interno dell'evento click associato all'input sumbit con ID "sendBtn". Essendo un input di tipo submit è stato quindi necessario prevenire la sua funzione nativa (che è quella di inviare in maniera sincrona i dati con conseguente caricamento della pagina) grazie all'uso di preventDefault()

Subito dopo è stata definita la variabile formData attribuendogli come valore il risultato del metodo jQuery .serialize() applicato all'elemento form. Questo metodo permette di generare un oggetto contenente i valori del form in forma name: value (a scopo esplicativo è stato inserito un console.log per mostrare in console l'oggetto passato al webservice).

L'ultima fase riguarda invece la chiamata ajax vera e propria.
A differenza di quella vista nel precedente articolo, in questa chiamata sono stati utilizzati due ulteriori parametri. Il primo nuovo parametro è type, in cui è stato esplicitato che si tratta di una chiamata POST, mentre nel secondo, il parametro data, abbiamo specificato quali dati (nel nostro caso il risultato della serializzazione del form) inviare al webservice.

Il resto della chiamata è sostanzialmente il medesimo ad eccezione del fatto che nella callback di successo abbiamo controllato il messaggio di ritorno del webservice e generato due diversi messaggi da mostrare in caso di risultato esatto o sbagliato.

Demo Download

Joomla SEF URLs by Artio