PHP och lite ajax
Tänkte skriva lite bas om php och ajax. Men blir lite moral-predikan först.
När man handskas med saker som t.ex. ajax/javascript, flash, upplösning osv så får man tänka igenom några saker.
Låt oss säga att vi ska göra det vi ska göra i detta exemplet, ett formulär som vi sedan använder ajax för att skicka iväg för att vi inte vill att sidan ska ladda om när man klickar på Posta.
1. Är vi säkra på att målgruppen för sidan kommer ha möjlighet att köra ajax? Många skolor och stora företag stänger av javascript och dylikt ur säkerhets-synpunkt då man t.ex. via javascript kan exekvera filer osv på klient-maskinen. Men även kanske andra saker så som mobiler, webläsare (lynx kanske) osv. Här kan vi dra en parrallell till optimal upplösning för hemsidor. Gör vi en hemsida för gamers så vet vi att dom ganska troligt sitter med skärmar på 21” osv, medan om vi gör en hemsida om chai-latte kanske får anpassa sidan till iphone eller en macbook 13”-15”.
2. Har vi en backup-lösning för dom som inte har ajax
3. Tillför ajax/javascript så mycket att det är nödvändigt?
Åter till ämnet, vi ska göra ett formulär som vi postar och får tillbaka svar från utan att ladda om sidan. Väldigt smidigt då man kan göra svars-filer som ligger helt bakom i php osv och man behöver inte göra en sida som hanterar post-resultatet.
Till detta ska vi använda prototype.js biblioteket från prototypejs.org. Jättestort bibliotekt och hur mycket bra som helst. Deras hemsida hittar du här och biblioteket kan du ladda ned här
Spara denna i din sedvanliga includes mapp i ditt nya webb-projekt på din server. Under rooten skapar vi en index.html. I den stoppar vi sedan följande:
<html>
<head>
<script type="text/javascript" src="includes/prototype.js" />
<script type="text/javascript">
function send() {
new Ajax.Request("includes/post.php",
{
method: ‘post’,
postBody: ‘text=’+ $F(‘text’),
onComplete: result
});
}function result(req){
$(‘show’).innerHTML= req.responseText;
}
</script>
</head><body>
<form id="test" onsubmit="return false;" action="">
<input type="text" name="text" id="text" >
<input type="submit" value="Posta" onClick="send()">
</form>
<div id="show"></div>
</body>
</html>
som du ser uppifrån så har vi inkluderat prototype.js. Vi skapar ett javascript som gör ej Ajax.Request (funktion i prototype.js som gör förfrågningar). I Request-funktionen så får vi deklarera en method (post), postBody som då är vad vi har för olika fält, i detta fallet har vi bara ett fält, Text. Vi avslutar med vad som ska hända när vi har skickat, vad vi gör med resultatet från filen, onComplete. Där sätter vi en funktion som vi döper till result som vi deklarerar nedanför. Som helt enkelt sätter innehållet i diven show till out-puten av post.php. Låter självklart va?
Så nedanför har vi skapat ett enkelt formulär, skillnaden är att vi har en onsubmit=”return false” Vad den gör är att den hindrar en traditionell postning av formuläret, med omladdning och allt. Och på submit-knappen har vi en onClick=”send()” som kallar på vår java-funktion. Detta innebär ju att du inte behöver ha en submit-knapp överhuvudtaget. det behöver man ju inte normalt heller då man kan trigga en submit i javascript, men det är ett sidospår.
När man normalt trycker på en submit så utförs en method mot action, t.ex. post mot includes/post.php. Post.php har då tillgång till en post-array $_POST som innehåller allting som finns i vårt formulär. Nu utför vi faktiskt ingen riktig postning, så ingen sådan post-buffert kommer att skapas. Därför vi i ajax:en får skapa en egen post-buffert där vi stjäl värdena från formuläret genom kod istället.
includes/post.php ser ut som vilken formulär-mottagare som helst. Den kan uppdatera sql osv osv. Vi behöver inte det, vi returnerar bara ut strängen.
<?php
if($_POST["text"] == "")
echo "du skrev inget";
else
echo "du skrev: ".$_POST["text"];
?>
Om vi sedan kör index.html så kan det se ut enligt följande
Och här kan vi posta om och om igen utan att sidan laddas om.
Testa att lägga formuläret inne i show diven för att se hur innerhtml fungerar.
Vad ska man då ha detta till? hmm… säg att vi har en funktion som laddar data från mysql in i en tabell, och så vill vi kunna sortera. Då skulle man kunna köra sortering fram och tillbaka uppifrån och ned utan att varje gång ladda om hela sidan och tappa positionen man hade på sidan osv.
Jag använde det t.ex. till http://url.ka-os.se/index.php för att skapa en bättre skapning av ny kort länk.