Meng Ajax in HTML met Intercooler.js
Het is nog nooit zo gemakkelijk geweest voeg Ajax toe aan een website. In feite is het vrij gebruikelijk om volledige websites te bouwen gebaseerd op verzoeken van Ajax riep Single-Page Apps (of SPA's).
Dit heeft echter altijd een beetje jQuery en wat technisch geharrewar vereist update pagina-inhoud. Als je er gewoon wat nodig hebt standaard Ajax-functionaliteit je kunt gebruiken intercooler.js om dit recht in je HTML te mixen.
Intercooler laat je HTML-kenmerken schrijven die bevatten native Ajax-verzoek-URL's. Wanneer gebruikers op bepaalde links klikken, kunt u dat dicteren Ajax vraagt run in plaats van de normale klikactie.
Dit alles vertrouwt op HTML5 data- * attributen zoals ic-post-aan. Je kunt dit attribuut toevoegen aan een knop of een ankerlink en dat zal het ook zijn automatisch verbinding maken met jQuery voor een Ajax POST-aanvraag.
Er is eigenlijk een pagina vol met deze attributen op de website van de plug-in. Hier is een beetje van voorbeeldcode om te zien hoe het eruit ziet:
Klik hier!
Dit zou stuur een Ajax POST-verzoek naar de URL / buton_click, en laad het antwoord in het containerelement. Intercooler is een vrij eenvoudige bibliotheek en ongelooflijk krachtig als je eenmaal begrijpt hoe het werkt.
Toegegeven, dit zal niet alle Ajax-problemen oplossen, omdat het kan andere delen van de pagina niet automatisch bijwerken. Het ook kan niet teveel aangepaste functies toevoegen zonder de pagina te vertragen, dus een gedetailleerde SPA zou echt moeten gebruik aangepaste Ajax-code.
Intercooler.js biedt een meer semantische manier om Ajax-code te schrijven zodat het laadt en zelfs een native fallback biedt.
Naar intercooler installeren je hebt alleen een kopie van jQuery samen met een kopie van de intercooler-bibliotheek die te vinden is op GitHub. Je kan zelfs testen zonder te downloaden bestanden met behulp van een jQuery-CDN en de lokale Intercooler CDN.
Zet beide in een >
Neem een kijkje op de demo pagina om een te zien volledige lijst met demo's je kunt spelen met. Ik vind vooral de demo 'Klik om te bewerken' leuk omdat deze precies laat zien wat er mogelijk is en hoe ver je deze plug-in kunt gebruiken.
Als je geïnteresseerd bent in meer leren bekijk de referentie gids vol met intercooler HTML-kenmerken. Elke voert een andere actie uit dus het is cruciaal om ze allemaal te bestuderen en te zien wat past het beste voor jouw scenario.
Natuurlijk kunt u vinden alle broncode gratis op GitHub samen met een korte installatiehandleiding.
