AJAX och PHP

AJAX (Asynkron JavaScript och XML) är ett samlingsnamn som innefattar flera olika tekniker för att kunna uppdatera en sida utan att ladda om hela sidan. Detta kan vara praktiskt då vi kan behöva göra något på servern utan att störa användaren genom att behöva vänta på att sidan laddas om. De tekniker som används i samband med AJAX är:

XMLHttpRequest är ett API för att kunna överföra och ta emot XML mellan server och klienten.

DOM (Document Object Model) gör att vi tillåts med javascript ändra i dokumentet.

HTML och CSS hur sidan representeras och vad som finns på sidan.

XML som ibland används för att transportera och strukturera data.

Javascript programmeringspråk.

Det går att använda AJAX med annat än php (exemepelvis ASP) men vi har gjort ett val att använda php. Egentligen skulle vi också kunna använda oss av javascript för att göra asynkrona anrop men eftersom det redan finns någon som abstraherat bort komplexitet så är det lika bra att utnyttja det, jQuery! Detta innebär att vi gör ett aktivt val att inte gå djupare i de nämnda teknikerna utan att vi "slutar jiddrar och börjar trolla".

jQuery´s get()

$("button").click(function(){
 $.get("test.php",function(data,status){
 $( ".result" ).html( data );
 });
});

Som ni ser har vi på en knapp som vid ett knapptryck gör ett HTTP GET request till servern. Innan vi börjar gå igenom i detaljom vad som händer kan det vara en god idé att se den sidan som vi efterfrågar, alltså test.php.

<?php
  echo "Hello med AJAX";
?>

jQuery´s get tar emot två argument (1) URL:en till vilken sida som efterfrågas (2) en callback, alltså vad som skall göras när requesten är klar. Det kan ibland finnas tillfällen då vi vill skicka med information till servern för att göra något med datat, exempelvis lägga in eller hämta något från en databas. Att skicka med argument görs med { name:"Me", lname:"Myself" } . Det skickas med som ett andra argument i functionen get().

jQuery get() med parametrar

$("button").click(function(){
  $.get("test.php",
  {
    name:"Me",
    lname:"Myself"
  },
  function(data,status){
   alert("Lyssna på vad sidan säger dig!"");
  });
});

php test ser nu ut som denna:

<?php
  $fname ,city
  $fname= $_GET["name"]
  $lname= $_GET["lname"]
  echo "kära" . $fname . $lname . "du duger!";
?>

jQuery´s load()

jQurey´s load method är ganska lika get men den har en implicit callbackfunktion som gör det möjligt att kunna skriva:

$( "#result" ).load( "test.php", function() {
alert( "Success!" );
});

Att jobba med asynkrona anrop är kraftfullt och bör vara en viktig kunskap i verktygslådan som webbutvecklare.