Det här är del tre i en serie artiklar om jQuery. Här hittar du del ett: jQuery tutorial introduktion och här kan du läsa del två: jQuery tutorial – del 2 – arbeta med formulär.

Nej, det är inte ett fotbollslag. Inte heller är det ett medel som får köksbänken att skina som jag ska prata om idag.

Ajax är ett sätt att skicka http-anrop med JavaScript (http-anrop kan enkelt förklaras som att hämta en webbsida). jQuery har inbyggda, enkla funktioner för att använda detta. Det här kanske inte låter så speciellt, men det är faktiskt oerhört användbart.

Ajax gör att man kan skicka data mellan användare och server på ett mycket förfinat vis, i jämförelse med de alternativ som fanns tidigare. Istället för att överföra all information kan man alltså välja exakt det som behöver ändras. Dessutom slipper man ladda om sidan efter att informationen skickats.

Vår Ajax-kurs idag innefattar följande delar:

$.get och $.post

Hur man skickar datan.

Formulärdata

Sätt att komma åt det du vill skicka.

PHP och Ajax

Vad man gör med (tar emot) datan man skickat.

callbacks

Olika sätt att uppdatera/påverka webbsidan när ajax-funktionerna har gjort sitt jobb.

$.get och $.post

För att anropa en sida, på enklast möjliga vis använder man funktionen
$.get ( url )

Exempel

// hämta sidan stats
$.get("/stats.php");

Notera att vi i detta exempel helt bortser från om sidan returnerar någon data. Exempel på hur man tar emot data kommer längre fram i artikel.

Man kan skicka med parametrar till sidan.

Exempel

// hämta sidan settings, skicka med inställning för font-size
$.get("/settings.php", { fontsize: "11px" });

Skicka med post-metod går till på samma vis.

Exempel

// spara namn på sidan save.html
$.post("save.html", { firstname: "Christian",  lastname: "Albinsson"});

Formulärdata

Det kan vara praktiskt att skicka värdet av ett fält direkt när man fyllt i det, utan att behöva klicka på spara. Detta förfarande används t.ex. på Facebooks statusuppdatering.

Exempel

<script type="text/javascript">
$(document).ready( function () {
  $("input[name=status]").blur( function () {
   var newstatus = $(this).val();
   $.get("updatestatus.php", { statustext: newstatus });
  });
});
</script>
<input type="text" name="status" />

PHP och Ajax

För att forsätta exemplet ovan med hur man hanterar datan som skickas till servern ska vi se på den mottagande php-filen updatastatus.php.

Exempel

<?php
if (isset($_GET['statustext'])){
   $this->db->update('UPDATE tbl SET status="' . $_GET['statustext'] . '" WHERE userid=' . $_SESSION['userid']);
}
?>

Här uppdaterar vi databasen utan att bry oss ifall det verkligen lyckades. Så får man bara göra i tutorials!

Nedan visar jag ett exempel på hur vi testar om sql-kommandot verkligen sparades.

Exempel

<?php
if (isset($_GET['statustext'])){
   $this->db->update('UPDATE tbl SET status="' . $_GET['statustext'] . '" WHERE userid=' . $_SESSION['userid']);
   if ($this->db->error != '') {
	print "Statusen kunde inte sparas!";
   } else {
	print "Statusen sparades";
   }
}
?>

Callbacks

Callback är funktioner som man uppdaterar/påverkar webbsidan med när ajax-anropen har gjort sitt jobb.

Den text som php-sidan skriver ut fångar vi med en callback i $.get-funktionen.
Det ges som ett tredje argument till $.get som vi kan använda till att påverka sidan med.

Det är i parametern data som vi kan hämta den text/html som updatastatus.php skickar, d.v.s. om uppdateringen lyckades eller inte.

Exempel

<script type="text/javascript">
$(document).ready( function () {
  $("input[name=status]").blur( function () {
   var newstatus = $(this).val();
   $.get("updatestatus.php", { statustext: newstatus },
	   function (data){
		$('#statusmessage').html(data);
	   }
	);
  });
});
</script>
<input type="text" name="status" />
<div id="statusmessage"></div>

Sammanfattning

Vi har i denna del av PRODUKTION203:s jQuery-serie tittat på hur man lätt kommer igång med AJAX. AJAX är i hög grad en teknik som är på framsteg och varje nyfiken webbutvecklare borde nosa lite på alla möjligheter den innebä r- bl.a. kraftig minskad dataöverföring och ett bättre, mer intuitivt gränssnitt mot användaren.

jQuery-serien fortsätter med oförminskad styrka. I nästa lektion ska jag hålla upp förstoringsglaset mot de delar i jQuery som handlar om det grafiska gränssnittet. Bilder, effekter, färger med mera!

Tveka inte att höra av er till mig om ni skulle ha några frågor: christian@produktion203.se