Comprendere AJAX con jQuery

AJAX Comprende un insieme di tecniche e tecnologie che ci consentono di stabilire comunicazioni asincrone tra ciò che il client vede sul web e le informazioni che esistono sul lato server di una pagina web.
Una delle caratteristiche principali che possiamo evidenziare è che si basa sui diversi metodi HTTP Che cosa POST, GET, PUT o DELETE per poter inviare i dati necessari alle applicazioni sul server.
Nella prima fase di sviluppo con AJAX le chiamate dovevano essere costruite usando Javascript flat, che tuttavia ha generato molto codice per noi jQuery ci aiuta a semplificare le cose portando l'adozione di questa tecnica e tecnologie alle masse, il tutto a beneficio sia dello sviluppatore che dell'utente.
Cos'è l'AJAX?AJAX corrisponde a Javascript e XML asincroni vale a dire Javascript sì XML asincrono, il che significa anche che è qualcosa che non dipende da una struttura fissa come uno script PHP dove le istruzioni vengono eseguite in sequenza, ovviamente salvando le chiamate a metodi e funzioni di classi e oggetti.
Quanto sopra spiegato ci dà la possibilità di caricare informazioni o inviarle senza dover ricaricare o fare una richiesta "completa" al server, la mettiamo tra virgolette perché le chiamate AJAX Queste sono richieste normali, semplicemente non è necessario aggiornare la pagina nella sua interezza se non è il comportamento desiderato.
L'utilizzo di queste tecniche e tecnologie rappresenta dei vantaggi di cui pochi sono a conoscenza dell'esistenza, molte volte lo usiamo solo per una questione di tendenza, ma se ne comprendiamo i benefici potremo sapere a quali progetti possiamo applicarlo per ottenere il massimo da esso. Vediamo di seguito alcuni dei vantaggi più importanti dell'utilizzo AJAX:
Riduzione dell'utilizzo della larghezza di bandaLo otteniamo grazie alle richieste delle sezioni in particolare, con questo possiamo ottenere, ad esempio, non dover ricaricare stili o immagini generali se ciò che vogliamo è aggiornare il testo.
Migliore esperienza utenteAumentando la velocità dell'applicazione web, l'utente ha un notevole miglioramento nell'utilizzo, oltre a darci l'opportunità come sviluppatori di aumentare il grado di interazione con gli elementi che abbiamo disposto.
Rimuovi la dipendenza dal browserQuando si usa jQuery viene eliminata la necessità di scrivere codice dipendente dal browser, questo ci aiuta a migliorare la velocità di sviluppo e la produttività del nostro tempo.
Poiché nulla è perfetto, quando si utilizza AJAX Dobbiamo anche capire che ci sono alcuni svantaggi che possono farci riflettere e pensare se sia l'opzione migliore per il nostro progetto. Successivamente vedremo alcuni di questi punti in modo da avere un quadro più completo prima di iniziare la parte tecnica del tutorial.
DipendenzaSe un client o un utente utilizza un browser molto vecchio o utilizza il Javascript disattivato, la nostra applicazione potrebbe soffrire o non funzionare, il che ci dà l'obbligo di fare casi speciali quando non possiamo usare AJAX.
Scrivi codice aggiuntivoSecondo la nostra applicazione, dobbiamo scrivere codice aggiuntivo per poter integrare le risposte che otteniamo dalle richieste AJAX, come le risposte fornite con HTML sì CSS.
Ovviamente al momento è molto difficile trovare un browser che non sia compatibile con Javascript sì jQueryTuttavia, a seconda della nostra zona, possiamo trovare alcuni casi che possono rendere la vita molto difficile.
Una richiesta AJAX a partire dal jQuery deve avere una struttura di base, dove dobbiamo stabilire alcuni parametri necessari per il quadro, dobbiamo stabilire il metodo HTTP della richiesta, il percorso verso il quale verrà effettuata la richiesta, il formato della risposta e, infine, cosa si dovrebbe fare in caso di esito positivo della richiesta o quando si verifica un errore. Vediamo nel seguente codice non funzionale come possiamo vederlo:

 $ .ajax ({type: "HTTP method", // POST, GET, PUT, DELETE url: "Request path", // http: // www.example.com/request dataType: "Type of data", / / html, xml, json success: function on success, error: function on error}); 

Vediamo che ciascuna delle sezioni che abbiamo descritto sono parametri che la nostra richiesta riceve e che viene eseguita attraverso il metodo $ .ajax () che è fornito da jQuery direttamente, ed è una maschera per il codice Javascript aereo che corrisponde a ciascun motore di ciascun browser supportato, che in questo momento sono quasi tutti gli annunci pubblicitari più recenti come Chrome, Firefox, Opera, Safari Internet Explorer, e quelli derivati ​​dai motori di questi che abbiamo menzionato.
Ora metteremo in pratica ciò che abbiamo visto nella sezione precedente quando si effettua una richiesta AJAX da una pagina HTML che andremo a costruire nel seguente esempio. Dobbiamo sapere che avremo bisogno della versione più recente di jQuery possiamo ottenere, tuttavia possiamo usare quello che immagazzinano nel loro CDN, avremo anche bisogno di un piccolo server web per poter instradare i file che otterremo in modo asincrono, per questo possiamo usare WAMP in finestre, o un'installazione LAMPADA nei sistemi Linux, per quanto riguarda le piattaforme MAC che possiamo utilizzare XAMP o simili.
Nel codice seguente includeremo per primo jQuery, quindi creeremo un'etichetta nel corpo con un id univoco dove collocheremo il contenuto della risposta alla nostra richiesta, e verso la fine del documento faremo un'etichetta sceneggiatura dove genereremo il codice per effettuare la richiesta, nell'attributo del URL faremo la richiesta all'indice della cartella dove si trovano i nostri file, lo facciamo per mostrare il funzionamento del nostro codice, tuttavia il modo per farlo è richiedere un altro file che servirà la risposta di cui abbiamo bisogno, facciamo vedi il codice:

 Esempio di richiesta AJAXProcesso AJAX 

Nell'immagine seguente vediamo come tutto ha funzionato, dove possiamo vedere una risposta di successo dal nostro codice.

Vediamo cosa succede quando cambiamo il percorso della richiesta per uno inesistente per forzare un errore, aggiorniamo e premiamo il pulsante Processo AJAX:

Possiamo vedere che ciò che abbiamo inserito nel codice di errore viene attivato. Ma la cosa più interessante è che il tipo di errore di HTTP, in questo caso si trattava di una risorsa non trovata oppure 404, con un po' di abilità forse possiamo catturarlo e migliorare la gestione degli errori, questo rimane un argomento di ricerca per chi è interessato.
Una delle cose che jQuery vuole è che non perdiamo tempo e codice facendo le cose a lungo, ecco perché ci offre scorciatoie per le chiamate AJAX metodi più comuni come OTTENERE sì INVIARE, quindi utilizzando la scorciatoia salviamo alcune righe di codice e quindi possiamo ridurre il peso della nostra applicazione.
Per questo nella documentazione ufficiale di jQuery Abbiamo tutti i casi esistenti, comunque andremo a rifare l'esempio precedente usando in questo caso la scorciatoia, ma prima di vedere il codice funzionale, vediamo l'esempio non funzionale:

$ .get (percorso, dati, SuccessFunction, ResponseType);

Come abbiamo notato, questa chiamata è molto più piccola, il che ci aiuta ad avere un codice più pulito e leggero, ora applicandolo al nostro esempio precedente sarebbe il seguente:

 Esempio di richiesta AJAXProcesso AJAX 

Vediamo che il numero di righe e caratteri è stato notevolmente ridotto, il che migliorerebbe la nostra trasmissione dei dati utilizzando una larghezza di banda inferiore. Se eseguiamo tutto nel browser, ci darebbe la seguente risposta:

Con questo abbiamo terminato questo tutorial, abbiamo poi visto come in modo semplice abbiamo spiegato cosa rappresenta AJAX e le sue applicazioni più elementari con jQueryD'ora in poi, non resta che continuare a ricercare e cercare di incorporare questa tecnica di sviluppo ogni volta che i suoi vantaggi sono appropriati per le nostre applicazioni.