Share
Questa serie di tutorial mira a familiarizzare i progettisti front-end e gli sviluppatori principianti con AJAX, una tecnica essenziale di front-end.
In questo primo tutorial, tratteremo le basi di AJAX. Inizieremo ad esplorare diverse cose ad esso correlate, impareremo esattamente di cosa si tratta, come funziona e dove si trovano i suoi limiti. Cominciamo!
Nota: Questa serie presuppone che tu abbia familiarità con le tecnologie di front-end core, come HTML e CSS.
AJAX sta per "Asynchronous JavaScript and XML". Non è una singola, né una nuova tecnologia. In realtà, si tratta di un gruppo di tecnologie esistenti (ad esempio HTML, CSS, JavaScript, XML, ecc.) Che si uniscono per costruire applicazioni web moderne.
Con AJAX, un client (cioè il browser) comunica con un server Web e richiede i dati. Quindi elabora la risposta del server e apporta modifiche alla pagina senza ricaricarla completamente.
Analizziamo l'acronimo AJAX:
"Asincrono" significa che quando un client richiede dati da un server web, non si blocca fino a quando il server non risponde. Al contrario, l'utente può comunque navigare tra le pagine. Non appena il server restituisce una risposta, una funzione rilevante manipola i dati restituiti dietro le quinte.
"JavaScript" è la lingua che istanzia una richiesta AJAX, analizza la risposta AJAX corrispondente e infine aggiorna il DOM.
Un client utilizza la XMLHttpRequest o l'API XHR per effettuare una richiesta a un server. Pensa all'API (Application Programming Interface) come un insieme di metodi che specificano le regole di comunicazione tra le due parti interessate. Tuttavia, si noti che i dati in arrivo da una richiesta AJAX possono essere in qualsiasi formato e non solo in XML formato.
Per avere un'idea iniziale di come funziona AJAX, dai un'occhiata alla seguente visualizzazione:
Questa visualizzazione descrive uno scenario tipico guidato da AJAX:
L'utente desidera vedere più articoli, quindi fa clic sul pulsante di destinazione. Questo evento attiva una chiamata AJAX.
Una richiesta viene inviata al server. Insieme alla richiesta, possono essere passati diversi dati. La richiesta può indicare un file statico (ad es. example.json) che è memorizzato sul server. In alternativa, è possibile eseguire uno script dinamico (ad es. functions.php) a quel punto lo script comunica con il database (o altro sistema) per recuperare i dati.
Il database rimanda gli articoli richiesti al server. Successivamente, il server li invia al browser.
JavaScript analizza la risposta e aggiorna parti specifiche del DOM (la struttura della pagina). Qui, ad esempio, viene aggiornata solo la barra laterale. Le altre parti della pagina non cambiano.
Con questo in mente, puoi capire perché AJAX è un concetto importante per il web moderno. Sviluppando applicazioni AJAX, siamo in grado di controllare la quantità di dati che viene scaricata dal server.
AJAX è ovunque. Per dimostrarlo, citiamo brevemente alcuni siti popolari che ne approfittano.
Innanzitutto, considera come funzionano Facebook e Twitter. Mentre scorri verso il basso, i nuovi contenuti appaiono grazie ad AJAX. In secondo luogo, quando si inviano o meno una domanda o una risposta su Stack Overflow, viene attivata una chiamata AJAX. Infine, non appena si cerca qualcosa su Google o Youtube, vengono eseguite più richieste AJAX.
Inoltre, se vogliamo, possiamo monitorare le richieste. Ad esempio, sulla console di Chrome lo facciamo facendo clic con il pulsante destro del mouse e controllando il Log XMLHttpRequests opzione.
Come menzionato sopra, per impostare una richiesta AJAX, usiamo l'API XMLHttpRequest. Inoltre, jQuery, la libreria JavaScript più popolare, offre diverse funzioni e metodi relativi ad Ajax.
In questa serie, illustreremo diversi esempi che utilizzano JavaScript semplice e jQuery per inviare una richiesta a un server.
Quando recuperiamo i dati da un server web, questi possono essere in diversi formati. XML, JSON, JSONP, testo normale e HTML sono possibili formati di dati.
XML (eXtensible Markup Language) è uno dei formati più diffusi per lo scambio di dati tra applicazioni. Simile all'HTML, XML utilizza i tag per definire la sua struttura. Tuttavia, si noti che l'XML non viene fornito con alcun tag predefinito, infatti, abbiamo impostato un documento XML specificando i nostri tag. Di seguito è riportato un esempio della sua struttura:
Mike Mathew australiano Inglese spagnolo francese russo
Esistono molti editor online che puoi utilizzare per creare documenti XML. Il mio editor preferito è:
Basato su questo editor, il nostro esempio verrebbe visualizzato come segue:
JSON (JavaScript Object Notation) è un altro popolare formato di interscambio dati. Usando JSON, la struttura XML di cui sopra sarebbe simile a questa:
"nome": "Mike", "cognome": "Mathew", "nazionalità": "australiano", "lingue": ["inglese", "spagnolo", "francese", "russo"]
Ancora una volta, puoi trovare molti editor JSON online sul Web. Ecco gli editori che mi piace usare:
Basato sullo strumento JSON Editor Online, l'esempio precedente ha il seguente aspetto:
Prima di iniziare a utilizzare effettivamente AJAX, è importante capire i suoi limiti. Nello specifico, menzioneremo due problemi comuni.
Innanzitutto, considera il seguente errore visualizzato nella console di Chrome:
Questo errore si verifica quando la nostra richiesta punta a un file locale. Qui abbiamo provato ad accedere ai dati memorizzati in un file locale (ad es. Demo.json) e non in un server. Per superare questo problema, possiamo installare un server locale (ad esempio, configurare XAMPP come ambiente di sviluppo locale) e archiviare il file di destinazione in esso.
In secondo luogo, guarda il seguente messaggio di errore:
Ciò accade quando richiediamo dati situati su un altro dominio relativo alla nostra pagina (noto come restrizione della politica di origine). Qui, ad esempio, i dati sono memorizzati su un server locale, mentre la pagina è archiviata sul server di Codepen. Fortunatamente, ci sono soluzioni a questa restrizione.
Una soluzione è sfruttare il meccanismo CORS (Cross-Origin Resource Sharing) proposto dal W3C. Si noti che questo meccanismo richiede di apportare alcune modifiche nei file di configurazione del nostro server. Ad esempio, questa pagina descrive come personalizzare il server Web Apache.
Un'altra opzione è usare la tecnica JSONP (JSON con Padding).
Questa panoramica dovrebbe darti una buona idea di cosa sia AJAX, dove potresti già averlo incontrato e dove si trovano alcuni problemi potenziali. Ha anche esaminato rapidamente i formati di interscambio dati più popolari. Nel prossimo tutorial entreremo in un esempio funzionante. Ci vediamo lì!
Se vuoi saperne di più su AJAX e Codepen, assicurati di controllare le seguenti risorse:
Accentsconagua