Mescola Ajax in HTML con Intercooler.js

Non è mai stato così facile aggiungi Ajax a qualsiasi sito web. In effetti è abbastanza comune costruire interi siti web basato su richieste Ajax chiamato App per singola pagina (o SPA).

Tuttavia questo ha sempre richiesto un po 'di jQuery e qualche disputa tecnica a aggiornare il contenuto della pagina. Se hai bisogno di un po ' funzionalità Ajax di base Puoi usare intercooler.js per mescolare questo diritto nel tuo HTML.

Intercooler ti consente di scrivere attributi HTML in modo nativo contengono URL di richiesta Ajax. Quando gli utenti fanno clic su determinati link, puoi dettarlo Le richieste Ajax vengono eseguite invece della normale azione di clic.

Tutto questo si basa su attributi HTML5 data- * ad esempio ic-post-to. È possibile aggiungere questo attributo a un pulsante oa un collegamento di ancoraggio, e lo sarà connettersi automaticamente in jQuery per una richiesta POST Ajax.

C'è in realtà una pagina pieno di questi attributi sul sito Web del plugin. Ecco un po 'di codice di esempio per vedere come appare:

Cliccami!

Questo sarebbe inviare una richiesta POST Ajax all'URL / buton_click, e carica la risposta nell'elemento contenitore. Intercooler è una libreria abbastanza semplice e incredibilmente potente una volta capito come funziona.

Certo, questo non risolverà tutti i tuoi problemi Ajax perché impossibile aggiornare automaticamente altre aree della pagina. Anche non è possibile aggiungere troppe funzioni personalizzate senza rallentare la pagina, quindi un dettaglio SPA dovrebbe davvero usa il codice Ajax personalizzato.

Intercooler.js offre a un modo più semantico per scrivere il codice Ajax in modo che carichi e persino offre un fallback nativo.

A installare intercooler hai solo bisogno di un copia di jQuery insieme a a copia della libreria intercooler che può essere trovato su GitHub. Puoi persino prova senza scaricare qualsiasi file utilizzando un CDN jQuery e il CDN Intercooler locale.

Metti entrambi in a > etichetta nell'intestazione della tua pagina, e poi basta posizionare gli attributi HTML dove vuoi!

Dai un'occhiata al pagina demo vedere a elenco completo di demo puoi giocare con. Mi piace particolarmente la demo "Clicca per modificare" perché mostra esattamente cosa è possibile e quanto lontano puoi prendere questo plugin.

Se sei interessato a imparare di più controlla il guida di riferimento pieno di attributi HTML intercooler. Ognuno esegue un'azione diversa quindi è fondamentale studiarli tutti e vedere cosa si adatta meglio per il tuo scenario.

Naturalmente, puoi trovare tutto il codice sorgente gratuitamente su GitHub insieme a breve guida all'installazione.