Bland Ajax til HTML med Intercooler.js
Det har aldri vært enklere å legg til Ajax på et hvilket som helst nettsted. Faktisk er det ganske vanlig å bygge hele nettsteder basert på Ajax-forespørsler kalt Enkelsidige apper (eller SBOer).
Men dette har alltid krevd litt jQuery og noen tekniske wrangling til oppdater sidenes innhold. Hvis du bare trenger litt grunnleggende Ajax-funksjonalitet du kan bruke intercooler.js å blande dette rett inn i HTML-en din.
Intercooler lar deg skrive HTML-attributter som Native inneholder Ajax forespørselsadresser. Når brukere klikker på bestemte lenker, kan du diktere det Ajax-forespørsler løp i stedet for normal klikkhandling.
Alt dette stoler på HTML5 data- * attributter som for eksempel ic-post til. Du kan legge til dette attributtet til en knapp eller en ankerlink, og det vil Koble automatisk til jQuery for en Ajax POST-forespørsel.
Det er faktisk en side full av disse attributter på plugin nettsiden. Her er litt av prøvekode for å se hvordan det ser ut:
Klikk på meg!
Dette ville send en Ajax POST-forespørsel til URL-adressen / buton_click, og last svaret inn i beholderelementet. Intercooler er et ganske enkelt bibliotek og utrolig kraftig når du forstår hvordan det fungerer.
Gitt dette vil ikke løse alle dine Ajax-problemer fordi det kan ikke automatisk oppdatere andre områder på siden. Det også kan ikke legge til for mange tilpassede funksjoner uten å senke siden, så en detaljert SPA burde egentlig bruk tilpasset Ajax-kode.
Intercooler.js tilbyr a mer semantisk måte å skrive Ajax kode på slik at den laster og til og med tilbyr en naturlig tilbakefall.
Til installer intercooler du trenger bare en kopi av jQuery sammen med a kopi av intercooler biblioteket som finnes på GitHub. Du kan til og med test uten nedlasting noen filer ved å bruke en jQuery CDN og den lokale Intercooler CDN.
Sett begge inn i a >
Ta en titt på demoside å se en full liste over demoer du kan leke med. Jeg liker spesielt "Click to Edit" -demoen fordi den viser nøyaktig hva som er mulig og hvor langt du kan ta dette pluginet.
Hvis du er interessert i lære mer sjekk ut referanseguide full av intercooler HTML attributter. Hver og en utfører en annen handling så det er viktig å studere dem alle og se hva passer best for ditt scenario.
Naturligvis kan du finne all kildekoden gratis på GitHub sammen med a kort installasjonsveiledning.
