In questo post abbiamo preso la briga di sviluppare una guida pratica per comprendere AJAX in JQUERY con metodi facili e semplici . AJAX è l’acronimo di JavaScript asincrono e XML ed è una nuova serie di tecniche che coinvolge varie vecchie tecnologie come: JavaScript, XML, Document, Object Model (DOM). Tra queste tecnologie l’unico nuovo elemento è XMLHttpRequest.
JQuery è una libreria che appartiene al linguaggio di programmazione JavaScript , è uno dello sviluppo web più utilizzato, open source e la capacità di migliorare l’interattività di una pagina di Internet .
Per progettare applicazioni Web simili alle applicazioni desktop, molti sviluppatori hanno deciso di utilizzare JQUERY per implementare comportamenti AJAX. In JQUERY esiste una varietà di funzioni per produrre AJAX. Ecco i metodi disponibili per comprendere AJAX in JQUERY in modo semplice.
Metodi AJAX JQUERY
.load ()
Ciò consente di caricare i dati in un elemento della pagina, indicando l’URL del file che si desidera portare attraverso AJAX . Questo metodo aggiorna l’HTML dell’elemento su cui viene invocato .load (). Non consente più parametri e non esegue più azioni di quelle menzionate.
$ (“# Element”). Load (“page.html”);
Se si desidera inviare dati tramite GET a una pagina, è possibile utilizzare .load () indicando i dati “a mano” nell’URL del file a cui si accede, sebbene vi siano altri metodi più indicati per farlo.
$ (“# Element”). Load (“page.php? Data = 222”);
Il metodo load () si occupa di tutto, effettua la richiesta al server e invia l’HTML della risposta al contenitore su cui viene invocato .load ().
$ .get () e $ .post ()
Questi sono due metodi gemelli che fanno quasi la stessa cosa: una connessione AJAX che invia dati al server. La differenza è che $ .get () invia i dati tramite GET (nell’URL) e $ .post () li invia tramite POST (nelle intestazioni HTTP). Per questi metodi ti invia una serie di parametri con maggiore complessità, tuttavia solo il primo è obbligatorio.
$ .get (“url.php”, {
dati: “valore”,
data2: “valore2”
}, funzione (risposta) {
$ (“#Resultado”) .html (dati);
}, “Html”);
Ciò chiamerebbe l’ URL “url.php” tramite il metodo GET i dati e i valori indicati nel secondo parametro. Alla ricezione della risposta, eseguirà la funzione indicata nel terzo parametro e i dati che si aspetta di ricevere dal server poiché una risposta ha il formato indicato nel quarto parametro. Va notato che esistono diversi formati di risposta: JSON, script, HTML o XML.
$ .post () è esattamente identico, i dati verranno inviati da jQuery con il metodo POST , ecco come tutto ciò che puoi imparare su $ .get () può essere applicato a $ .post ().
Aspetti da tenere in considerazione
Dovresti considerare che .load () è invocato su un oggetto jQuery, che ha uno o più elementi della pagina, su cui vuoi caricare il contenuto che AJAX porta . Per eseguire un metodo come $ .post () o $ .get (), è necessario eseguirlo dalla funzione $ o jQuery , considerando che questa chiamata non è associata a un elemento della pagina.
Nella funzione che viene eseguita quando si verifica il risultato della richiesta AJAX , è necessario selezionare l’elemento o gli elementi in cui si desidera visualizzare i risultati.
Questi metodi hanno un’altra utilità, perché restituiscono un oggetto AJAX , che è possibile utilizzare per eseguire altre azioni che consentono di configurare una richiesta. Un esempio di ciò è quando è possibile definire aspetti, come cosa fare quando la richiesta viene eseguita in caso di errore.
var objectAJAX = $ .get (“loquesea.php”, function () {
// fa qualcosa quando c’è una risposta AJAX
});
objectAJAX.done (function () {
// fa qualcos’altro quando c’è una risposta alla richiesta corretta
})
objectAJAX.fail (function () {
// fa qualcosa quando si verifica un errore
})
objectAJAX.always (function () {
// fa qualcosa sia nell’errore che nel successo
});
$ .getScript ()
Questo è un altro metodo “abbreviato” , è una scorciatoia per caricare uno script Javascript e implementarlo, nel momento in cui è stato ricevuto correttamente. È possibile configurare un invio di dati e questo metodo lo farà tramite GET, così come sono stati inviati in $ .get ().
$ .getJSON ()
È un altro metodo abbreviato molto usato. Ricevi una risposta in JSON . È esattamente lo stesso descritto con “getScript ()”, solo nella risposta riceverai un oggetto Javascript .
In risposta Il server deve inviare il contenuto dell’oggetto, in un JSON che jQuery internamente sarà responsabile per l’interpretazione e la trasformazione in un oggetto Javascript nativo, a cui è possibile accedere per recuperare i suoi dati.
C’è un’altra classificazione dei metodi nella documentazione di JQuery
Si chiama ” Global AJAX Event Handlers” , sono eventi globali che è possibile assegnare a qualsiasi richiesta AJAX che si sviluppa su una pagina. Sono definiti una sola volta e influiscono su tutte le chiamate AJAX che è possibile effettuare su quella pagina.
In questo modo è possibile salvare la configurazione di vari comportamenti tipici, come i messaggi “caricamento in corso …”, di ciascuna delle funzioni AJAX
Ci sono eventi per i momenti in cui viene generata una richiesta, quando si verifica un errore, successo nella risposta, tra gli altri. Di quali eventi aggiungi all’oggetto jQuery del documento esteso.
$ (documento) .AJAXError (function () {
alert (“errore in una richiesta AJAX (non chiedermi quale)”);
});
Questo è stato tutto, con queste informazioni che ti abbiamo fornito puoi capire AJAX in JQUERY in modo semplice e in pochi minuti.
