Sidste gang jeg skiftede design m.m. her på bloggen tog jeg hijax-princippet til mig, hvilket f.eks. har gjort, at man nu kan søge “live” med Javascript og “almindeligt” uden Javascript. Jeg ville have brugt samme teknik til kommentering, men kom aldrig længere end til at man kunne kommentere via et “normalt” POST.

Blog spam helvede 

At have en ganske almindelig standard HTML-formular er, nu til dags, næsten det samme som at sige “Jeg vil gerne være offer for al jeres lorte-spam – bare fyr løs“. Det var i hvert hvad resultatet for mig…

Heldigvis havde jeg implementeret Akismet Antispam, og havde i min administration rimelig nem mulighed for at se hvilke kommentarer der var spam… men ærlig talt, det er sku liiiidt irriterende at være nød til konstant at slette spam-kommentarer! Man kunne selvfølgelig bare lade være med at gemme de kommentarer Akismet tror er spam – men man kan jo aldrig vide sig sikker?

Følgende screenshot var resultatet af ikke at have været ved computeren en ellers så stille og rolig søndag – Mandag morgen; vær så god at slette spam!

Spam kan mindskes med AJAX!

Nu har jeg endelig fået taget mig sammen til at få implementeret kommentering med AJAX, ligesom i det gamle design. Men ikke nok med det – jeg har nu helt fjernet muligheden for at kommentere, hvis man ikke har Javascript understøttet! Jeps, det er grove løjer, men jeg har set mig nødsaget til det → se ovenstående screenshot .

Faktisk har jeg haft det nye “setup” til at kører i et par dage nu, og indtil nu er der ikke kommet en eneste spam-kommentar igennem – Herligt!

Kommenteringen er testet i IE 6 og 7 + Firefox 3 til Windows samt Firefox 3 og Safari 3 til Mac – skulle der være nogen derud, som ikke synes at kunne få det til at virke må I MEGET GERNE skrive mig en mail på “admin[snabela]simon-jensen.net”.

Mens sidste post om hijax kort fortalte princippet bag hijax, og snakken mere gik på “hvorfor” man burde bruge det, har jeg nu haft mulighed for rent faktisk at lege lidt med hijax, og mener nu der skulle være basis for at skrive endnu en post herom.

Hijax super kort

Jeg har taget udgangspunkt i et simpelt eksempel, som jeg selv synes forklare det praktiske bag princippet. Super kort fortalt, så går hijax ud på at “hijacke” (overtage) funktionalitet på din hjemmeside og udføre denne via AJAX, men SAMTIDIG skal det være muligt at afvikle samme funktionalitet UDEN brug af Javascript – grundtanken i graceful degradation.

Hijax en formular

Hijax kan f.eks. bruges i forbindelse med en formular – I denne post har jeg taget udgangspunkt i en simpelt udgave af en tilmeldingsformular til et tænkt nyhedsbrev, men i princippet kan hijax bruges til en hvilken som helst formular.

HTML formularen:

Formularen er meget standard med to inputs og postering via POST-metoden. Vi kan bruge onsubmit-attributten til at hijacke formularen. onsubmit giver os nemlig mulighed for at udføre en stump Javascript før dataen vil blive postet til serveren. I eksemplet herunder tager jeg hele formularen med som parameter til Javascript funktionen hijax(form). For at være sikker på at det “almindelige” POST ikke bliver udført returnerer vi false efterfølgende… da dette faktisk er direkte Javascripting i formularen vil dennes postering kun stoppes hvis Javascript er understøttet.

<form method="post" action="signup.php" onsubmit="hijax(this); return false;">
    <label>Name:</label>
    <input type="text" name="name"   />
    <label>E-mail:</label>
    <input type="text" name="email"   />
    <input type="submit"   />
</form>

Javascriptet:

Selve Javascriptet behøver ikke være mere indviklet end vist herunder. Jeg har endnu engang taget udgangspunkt i et AJAX request med Prototype JS.

Her serializerer jeg hele formularen, og tilføjet en ekstra parameter hijax=true. Selve værdien er denne parameter bruger jeg faktisk ikke til noget, hvilket du vil kunne se i understående PHP-script. Vi poster det hele til PHP-filen signup.php, hvilken også var action-fil i HTML-formularen ovenfor.

hijax = function(formular) {
    var url = signup.php;
    var params = Form.serialize(formular) + &hijax=true;
    new Ajax.Request(url, {method:post, postBody:params});
}

PHP serveren:

Som programmør forsøger jeg at være doven!? Jeg vil gerne have et optimalt resultat af min kode, og jeg vil skrive så få linier som muligt. Og her er hijax fantastisk, for ligemeget om vi posterer formularen “almindeligt” eller via AJAX, kan vi bruge samme fil til at håndtere posteringen.

Da jeg også forsøger at være lidt af en sucker for brugervenlighed, vil jeg gerne have mulighed for at give brugeren et response ligemeget om denne har Javascript-understøttelse eller ej. Tricket er altså at kunne adskille de to posteringer fra hinanden. Jeg har brugt den ekstra parameter ved AJAX-posteringer, men du vil sikkert selv kunne komme på andre løsninger (tilføj dem gerne i kommentaren)?

<?php
session_start();
$name = mysql_real_escape_string($_POST[name]);
$email = mysql_real_escape_string($_POST[email]);
$isHijax = $_POST[hijax];
mysql_query("INSERT INTO signups (name, email) VALUES ($name, $email)");
if(isset($isHijax)) {
    echo Saved using AJAX...;
} else {
    $_SESSION[message] = Saved using normal post...;
    $redirect = $_SERVER[HTTP_REFERER];
    header("Location: $redirect");
}
?>

Med ovenstående metode vil du kunne “hijaxe” en formular, og med lidt få ændringer i formularens action-fil, vil du også have mulighed for at give brugerene et response, ligemeget om de bruger AJAX eller ej – Det er skudda smart .

Download

Hijax af en formular (.zip)

Problematikken med at visse applikationer udelukker visse brugere, har længe fundet sted, og specielt opstår dette problem ved brugen af Javascripts, Flash eller andet scripting, som stille specielle krav til browseren. AJAX is all about Javascript, og med den store fremgang denne “teknik” har fået, er problemet, selvsagt, ikke blevet mindre.

Vi hopper på Javascript-vognen uden at tænke over at der stadig kan komme brugere til, som ikke har mulighed for at afvikle de smarte features man kan opnå med AJAX, og i værste fald ødelægger dette mere, end den vundne feature ville have givet.

Dette er lige nøjagtig hvad man med Hijax vil forsøge at komme til livs! I denne post vil jeg forklare lidt mere grundlæggende, hvad der ligger i Hijax, for snarest at komme med en mere praktisk gennemgang.

Hvorfor er det så vigtigt?

Den aller vigtigste grund er, som beskrevet ovenfor, at der faktisk stadig er brugere der ikke kan afvikle Javascript! Jeps, den er god nok, og selvom det er brugergrupper som vi måske ikke tænker så meget på i det daglige, er de faktisk pænt store og med voksende indflydelse.

Den største gruppe af disse er vel stadig søgemaskinernes søgerobotter! Søgerobotter “taler” ganske simpelt ikke Javascript sproget. Robotterne læser bedst ren (X)HTML, og det er som om de bare springer over, hvor der står noget med <script…>.

En anden stor, og voksende, gruppe er brugere på mobiltelefoner! At designe en webapplikation til mobiltelefoner er et større kapitel, og Javascript er langt fra den eneste ting man skal tage højde for her – Men mobile browsere der understøtter Javascripts er pt., efter min bedste overbevisning, stadig i undertal! iPhonen er (officielt) ikke kommet til Danmark endnu, men når det sker vil jeg tro, at man vil kunne måle et stigning i søgninger/besøg med mobiltelefonerne på de danske sider. Der findes selvfølgelig mobile løsninger derude, men det skal ikke være nødvendigt at installere en 3. parts browser, for at kunne surfe (ordentligt) på nettet vel?

Specielt er du i farvezonen, hvis du bruger Javascript til navigation på din hjemmeside! Tags som onclick, window.localtion.href, bør ikke være nødvendige at kunne afvikle, for at navigere din side. I henhold til mobiltelefonen, bør man huske på, at langt de fleste ikke har den samme måde at navigere på – musen mangler! Jo, nogle har touchscreen, og nogle kan til dels bruge en pen – men mouseover, og ligeledes CSS tagget :hover, bør du ikke regne med virker specielt godt på en mobiltelefon!

Test hvad der virker uden Javascript

Den letteste måde at teste din sides funktionalitet, som den vil være på en mobiltelefon er ganske simpelt, at slå Javascript fra i din browser – noget langt de fleste browser har mulighed for. Den funktionalitet der efterfølgende kan afvikles, vil højst sandsynligt være den samme som du vil kunne bruge på en mobiltelefon.

For at se hvad søgemaskinernes søgerobotter møder og kan, på din side, findes den tekstbaserede browser Lynx. Lynx findes både til Windows, Mac og Linux, og afvikles i en kommandoprompt som vist på billedet herunder.

Man skal lige vende sig til at navigere i “browseren”, men når det er på plads, kan du få et ret godt billede af, hvordan en søgerobot kan “benytte” din side. Besøger du min side, vil du sikkert ligge mærke til at det ikke er muligt at søge via min Live Search, da denne udelukkende aktiveres via Javascript.

Kernen i Hijax: Graceful degradation

Kernen til at undgå at udelukke en håndfuld besøgende i at kunne bruge dit site ordenligt, skal findes i teknikken Graceful degradation – som også er kernen i Hijax.

Graceful degradation er en meget logisk en simpel tanke – kort fortalt, levere du et alternativ, til de brugere som ikke har mulighed for at afvikle Javascript. Den letteste måde at forklare graceful degradataion på, er gennem et lille eksempel. Du bruger faktisk browserens mulighed for at checke understøttelsen af Javascript. Hvis browseren ikke understøtter Javascript “falder den tilbage” til en standard funktionalitet.

Kodestumpen nedenfor vil udføre Javascript-funktionen popUp(url), som tænkt vil åbne www.simon-jensen.net i et popup-vindue – hvis ellers Javascript er understøttet. Hvis Javascript ikke er understøttet, vil brugeren på normal vis blive videresendt til adressen.

<a href="http://www.simon-jensen.net/" onclick="popUp(http://www.simon-jensen.net); return false;">Simon Jensen</a>

Hijax i en nødeskald

Tankegangen i Hijax er, på samme måde som Gracefull degradation, meget logisk og simpel.

Som Jeremy beskriver Hijax, går dette i praksis ud på, at ud først udvikler en “normal/klassisk” version af din webapplikation. Med normal menes der, en version som ikke udelukker søgemaskinerobotter og andet godtfolk, som ikke kan afvikle Javascript. Herefter kan du “pakke” dine formulare, og evt. andet, ind i Javascript-funktionalitet – Med andre ord “hijacke dine formulare med AJAX“.

Denne “overtagelse” skal selvfølgelig gøres efter Gracelfull degradation, således at vi ikke bare ender med en Javascript baseret løsning, men biholder den klassiske version, så alle kan være med.

Hijax i praksis

Jeg har endnu ikke haft leget med Hijax i praksis, men forventer at komme igang med det snarrest … herefter vil der, som skrevet i starten, komme en lille opfølger på teknikken. Nu skulle de vigtigste pointer være slået fast, og jeg er pændt sikker på at jég, for eftertiden, vil tænke mere over, at levere alternativer til Javascript-baseret funktionaliter.