Guida per principianti di AJAX con jQuery

Nel primo articolo di questa serie, abbiamo trattato i fondamenti di AJAX. Nel secondo, abbiamo esaminato un esempio funzionante usando vanilla JavaScript.

In questo tutorial, illustreremo alcune delle funzioni e dei metodi relativi a AJAX di jQuery. Più specificamente, daremo un'occhiata più da vicino alla stenografia caricare metodo e il generico ajax funzione.

Usando il caricare Metodo

jQuery di caricare metodo è un metodo semplice ma potente per il recupero dei dati remoti. Qui sotto puoi vedere la sua sintassi:

 $ (selettore) .load (url [, data] [, completa]) 

La seguente tabella mostra i suoi possibili parametri:

Parametro	Descrizione	necessario
url	Una stringa contenente l'URL a cui viene inviata la richiesta.	sì
dati	I dati (come una stringa o un oggetto semplice) che vengono inviati al server con la richiesta.	No
completare	Una funzione di callback che viene eseguita al completamento della richiesta, con esito positivo o negativo.	No

Ecco i parametri della funzione di callback:

Parametro	Descrizione
responseText	I dati recuperati dalla richiesta.
textStatus	Una stringa che classifica lo stato della richiesta.
jqXHR	L'oggetto jQuery XMLHttpRequest (jqXHR), che è un superset dell'oggetto XMLHttpRequest (XHR) nativo del browser.

Il prossimo elenco riassume i possibili valori del textStatus parametro:

 - success - notmodified - nocontent - error - timeout - abort - parsererror 

Per capire meglio come caricare metodo funziona, rivisitiamo l'esempio discusso nel tutorial precedente.

Ancora una volta, guarda questa semplice struttura HTML:

   Ulteriori informazioni su Einstein   

Ecco come appare:

Ricorda che vogliamo aggiornare il contenuto del #bio elemento con i dati di risposta, non appena si fa clic sul pulsante.

Ecco il codice jQuery richiesto:

 var $ btn = $ ('# richiesta'); var $ bio = $ ('# bio'); $ btn.on ('click', function () $ (this) .hide (); $ bio.load ('Bio.txt', completeFunction);); function completeFunction (responseText, textStatus, request) $ bio.css ('border', '1px solid # e8e8e8'); if (textStatus == 'error') $ bio.text ('Si è verificato un errore durante la richiesta:' + request.status + "+ request.statusText); 

Supponendo che la richiesta abbia successo (cioè quando textStatus è successo o non modificato), il risultato finale sarebbe simile a questo:

Inoltre, considera la seguente visualizzazione che descrive una richiesta corretta:

La parte sinistra di questa visualizzazione mostra l'oggetto XHR così come è stampato nella console del browser se usiamo puro JavaScript (vedi tutorial precedente) per fare la richiesta. D'altra parte, la parte destra visualizza il rispettivo oggetto jqXHR così come viene stampato se usiamo il caricare metodo.

In caso di una richiesta non riuscita, tuttavia, dovrebbe apparire un messaggio corrispondente. Per fare ciò, monitoriamo il valore di textStatus parametro e visualizza un messaggio di errore:

Nota: Se si esegue l'esempio dal proprio ambiente locale (e si memorizza il file Bio.txt file in esso), il messaggio di errore sarà probabilmente diverso. Ad esempio, potresti vedere il seguente risultato:

Infine, vale la pena ricordare che, per impostazione predefinita, il caricare il metodo usa il HTTP OTTENERE metodo, a meno che non inviamo dati come oggetto al server. Solo allora, il INVIARE il metodo è invocato.

Vedi la relativa demo Codepen di seguito:

Ora, modifichiamo il formato del file che richiediamo dal server. Specificamente, per questo esempio, i dati desiderati sono inclusi nel Bio.html file invece di Bio.txt file. Vale anche la pena notare: il file di destinazione contiene due paragrafi.

Supponendo che vogliamo solo caricare il primo paragrafo, dovremo aggiornare il codice iniziale come segue:

 $ btn.on ('click', function () // questa riga cambia solo $ bio.load ('Bio.html p: first-child', completeFunction);); 

Ecco come appare:

Ed ecco la demo di Codepen:

Conclusione

In questo tutorial, ho dimostrato come è possibile utilizzare AJAX con jQuery. Per rendere le cose più interessanti, abbiamo anche lavorato con un paio di esempi pratici. Nell'ultimo tutorial rimanente di questa serie, completeremo le cose lavorando con un esempio più complesso.