L’utilizzo di AJAX in jQuery permette a un sito web di reagire di­na­mi­ca­men­te alle in­te­ra­zio­ni con gli utenti, ri­chia­ma­re e inviare i dati sul server, ag­gior­na­re i contenuti e molto altro ancora, senza dover ri­ca­ri­ca­re com­ple­ta­men­te il sito. Le tra­smis­sio­ni asincrone dei dati con AJAX con­sen­to­no quindi di rea­liz­za­re ap­pli­ca­zio­ni web par­ti­co­lar­men­te reattive.

Che cosa sono i metodi jQuery.ajax()?

AJAX sta per “Asyn­chro­nous Ja­va­Script and XML”. Il lin­guag­gio di scripting Ja­va­Script e la libreria jQuery com­pren­do­no metodi AJAX per lo scambio asincrono di dati fra un client e un server. A tal fine, le co­sid­det­te “request” (richieste) AJAX in jQuery uti­liz­za­no in­ter­na­men­te l’oggetto XM­LHtt­pRe­que­st di Ja­va­Script. Le richieste HTTP asincrone sono inviate tramite AJAX al server web, che re­sti­tui­sce la risposta in un de­ter­mi­na­to formato, come XML o JSON. In questo modo è possibile ag­gior­na­re singole sezioni di un sito web senza dover ri­ca­ri­ca­re l’intero sito. Uno dei vantaggi è l’estrema fles­si­bi­li­tà d’uso di AJAX, ad esempio anche con jQuery in WordPress.

Consiglio

Uno spazio web di IONOS ti permette di mettere online il tuo personale progetto web, ad esempio la tua prima ap­pli­ca­zio­ne jQuery, un blog o un forum tutto tuo. IONOS ti offre soluzioni con­ve­nien­ti con spazio di ar­chi­via­zio­ne, dominio e indirizzo e-mail inclusi.

Quali metodi jQuery.ajax() esistono?

Per com­pren­de­re il fun­zio­na­men­to dei metodi .ajax() servono alcune nozioni di base su jQuery. Per questo motivo ti con­si­glia­mo di seguire il nostro tutorial su jQuery prima di af­fron­ta­re AJAX.

  • ajax(): invia richieste HTTP asincrone al server
  • get(): manda una richiesta GET in HTTP per caricare i dati dal server
  • post(): invia una richiesta AJAX jQuery Post per tra­smet­te­re de­ter­mi­na­ti dati al server
  • getJSON(): trasmette una richiesta GET in AJAX jQuery al server e attende la risposta in formato JSON
  • getScript(): manda una richiesta GET in HTTP per ottenere un file Ja­va­Script da un server ed eseguirlo
  • load(): invia una richiesta HTTP per caricare l’HTML o il testo dal server e col­le­gar­lo a elementi del DOM
Consiglio

Con l’API di IONOS puoi gestire i tuoi prodotti Hosting di IONOS in modo pratico e sicuro. L’API di IONOS è a tua di­spo­si­zio­ne con gli appositi dati di accesso. La do­cu­men­ta­zio­ne det­ta­glia­ta si trova sulla pagina in­for­ma­ti­va dell’API per svi­lup­pa­to­ri di IONOS.

Esempio di ap­pli­ca­zio­ne dei metodi jQuery.ajax()

È possibile combinare jQuery.ajax() anche con le classiche funzioni jQuery, come jQuery.click(), jQuery.append() e jQuery.each().

Nelle parti seguenti, l’esempio ricava il testo “Questo è un esempio di AJAX jQuery” dall’URL /jquery/getdata, assegnato come primo argomento al metodo jQuery.ajax(). Come secondo parametro uti­liz­zia­mo una *funzione callback che elabora la risposta del server e inserisce i dati all’interno del tag p nel DOM. Il metodo .ajax() trasmette per im­po­sta­zio­ne pre­de­fi­ni­ta una richiesta GET al server in­te­res­sa­to. L’invio della richiesta AJAX in jQuery è attivato da un evento clic sul pulsante “btn”. Il testo viene quindi vi­sua­liz­za­to nel browser.

<!DOCTYPE html>
                
<html>
<head>
     <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
     </script>
     <script type="text/javascript">
      $(document).ready(function () {
     $('#btn').click(function(){
          $.ajax('/jquery/getdata',    // request url
                {
                success: function (data, status, xhr) {     // success callback function
                                     $('p').append(data);
                }
          });
          });
      });
     </script>
</head>
<body>
     <input type="button" id="btn" value="Invia richiesta AJAX jQuery" />
     <p></p>
</body>
</html>
html

Il risultato che otteniamo è il seguente:

Questo è un esempio di AJAX jQuery
text
Consiglio

Con Deploy Now di IONOS puoi ef­fet­tua­re il de­ploy­ment di siti web statici e ap­pli­ca­zio­ni a pagina singola di­ret­ta­men­te tramite GitHub. Collega con facilità Deploy Now al tuo re­po­si­to­ry e trasmetti le modifiche con il comando push. La piat­ta­for­ma è in grado di ri­co­no­sce­re au­to­ma­ti­ca­men­te una gran varietà di framework e si configura ade­guan­do­si alla tua build. Ottimizza il tuo flusso di lavoro e iscriviti a Deploy Now!

Vai al menu prin­ci­pa­le