AJAX är en teknik som säkert många stött på mer eller mindre. Med AJAX kan man spara och hämta ny information från en server utan att behöva ladda om hela sidan.
Dessutom har de flesta Javascript-frameworks idag även stöd för grymma effekter som gör att denna information skickas och/eller hämtas på ett snyggt sätt (exempel: testa skicka ett mail på min kontakt-sida).
Detta gör AJAX till en värdig motståndare till den gamla godingen känd som Flash, men i fel händer kan AJAX försämra din hemsida både för användaren och för exempelvis Googles sökspindel. Därför tänkte jag nu ta upp några punkter som ni bör passa er för.
Användbara AJAX-knep:
-
Formulär
Den vanligaste tillämpningen för AJAX är formulär av olika slag, t.ex. för mail. Det är något som är väldigt simpelt att ordna. Något som man lätt kan glömma dock är användare som inte har JavaScript aktiverat, då kan formuläret bli helt värdelöst. Tänk på att anpassa sidan för användare utan JavaScript! -
Redigering
Ifall du använder Flickr så har du säkert testat att klicka på dina bilders rubriker för att ändra titeln på bilden. Detta är väldigt trevligt för användaren, lite svårare att ordna på webbsidan men helt klart värt besväret. Även här måste man tänka på användare utan JavaScript, det måste finnas en alternativ metod för att redigera saker. -
Information från andra servrar
Ifall man vill ladda exempelvis sitt senaste meddelande från Twitter så kan det vara en fördel att använda AJAX istället för hårdkodning, eftersom ifall servern skulle ligga nere så behöver inte användaren vänta på server timeout innan resten av sidan laddats. Glöm inte att se till att det finns något informativt meddelande ifall Twitter-meddelandet inte kunde laddas.
Använd inte AJAX till:
-
Hela sidor
Även om det är häftigt att lägga till fade-effekter när man ändrar sida så är det otroligt störande för användaren när denne vill exempelvis spara ett bokmärke mitt i sidan. Då blir startsidan sparad. Även sökmotorer kan få problem att hitta information på sidan ifall man gör på detta viset. -
Gör inga överdrivet avancerade effekter
Alla stör sig på långa väntetider, hur snygga de än är. Jag brukar försöka att inte göra min animation längre än en sekund, helst mindre än en halv ifall det är möjligt... det får dock inte gå för snabbt heller i vissa fall, användaren ska förstå ifall exempelvis ett formulär har skickats.
Viktigt att tänka på:
-
Använd
<noscript>
Av den enkla anledningen att inte förvirra användare utan JavaScript. Ifall JavaScript är avaktiverat kan man ge användaren en alternativ lösning på problemet. -
Kräv inte att användaren ska starta JavaScript
Detta för att nu förtiden finns det ingen som "råkar" ha JavaScript avaktiverat. Det finns i princip alltid en anledning och då har du som kodare ansvaret för att besöket fortfarande ska vara möjligt. Vanligt är att JavaScript inte ens stöds eftersom det är en mobil webbläsare, eller att man kör webbsidan via en textbaserad webbläsare som Lynx. -
Testa sidan utan JavaScript
Börjar bli lite tjatigt om "utan JavaScript" men det är en otroligt viktig punkt av förhoppningsvis förståerliga skäl (annars har du nog inte läst hela inlägget :P).
Det blev ett långt inlägg och det blir eventuellt fler ändringar i framtiden, men det är ett ganska viktigt ämne eftersom allt fler webbplatser använder AJAX och i många fall på fel sätt (även jag själv kan synda ibland utan att jag tänker på det). Skicka gärna en kommentar ifall du har fler tips jag kan lägga in.
Fick "Fjärilen från Tibet" av C J Håkansson idag, som jag fick beställa gratis från biblioteket för nån eller några veckor sedan.