Hijax i praksis

Tilbage i april fandt jeg frem til hijax princippet, og i den forbindelse lovede jeg at der ville komme en mere praktisk gennemgang - det vil jeg så forsøge mig med nu.

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="<strong>signup.php</strong>" 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 = <strong>signup.php</strong>;
    var params = Form.serialize(formular) + <strong>&hijax=true</strong>;
    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]);
<strong>$isHijax = $_POST[hijax];</strong>
mysql_query("INSERT INTO signups (name, email) VALUES ($name, $email)");
if(isset(<strong>$isHijax)</strong>) {
    <strong>echo</strong> Saved using AJAX...;
} else {
    <strong>$_SESSION[message]</strong> = 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.