Ajax/JS - PHPhulp

Pagina 1

Wat zit er in?

Okey dames en heren, hier is hij dan. Een tutorial volledig gewijd aan Ajax/Javascript.
(JS = Javascript)

In deze tutorial zal ik de volgende dingen gaan behandelen :

0. Inleiding en voorbereidingen

1. Veel gebruikte javascript functies (in combinatie met ajax)
2. Voorzichtig de eerste stapjes javascript.
3. Functies met Javascript
4. Javascript en formulieren
5. Ajax requests zonder reactie
6. Ajax requests met reactie

Er komt ongetwijfelt nog veel meer maar hier moeten jullie het helaas eerst mee doen.

Verder is het wel handig om http://phphulp.nl/php/tutorials/3/474/ van wes even door te lezen

Pagina 2

Inleiding

Ajax is de manier om met een database te communiceren zonder zichtbaar te posten of refreshen.

Deze tutorial heb ik geschreven omdat de vraag naar Ajax/JS steeds meer de kop op begint te steken.
ook heb ik gezien dat de vorige tut al even oud was.

Structuur :
Eerst maken we de volgende structuur aan :

/
|-js
|-pages

Voorbereidingen
Op de volgende plek kun je prototype downloaden
http://prototypejs.org/assets/2007/1/18/prototype.js

De code die je hier te zien krijgt kun je opslaan in de map js met als naam prototype.js

Verder maak je een bestand aan genaamd index.php met de volgende code :


<html>
<head>
  <script src="./js/prototype.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

Je structuur is nu als volgd :
/
|-js
||-prototype.js
|-pages
|-index.php

Ready or not
Here we go

Pagina 3

|Javascript beginsels

Alle voorbeelden werken mits binnen de body tag geplaatst (tenzij anders aangegeven)

Okey even snel de meest gebruikte functies en mogelijkheden (icm Ajax) :

Alert :
Het weergeven van een melding. Met name handig om te kijken of een variabele gevuld is


<script type="text/javascript">
	alert("Een meldings box")
</script>

document.getElementById("id") :
Data van een element ophalen. Prototype maakt het mogelijk dit korter te noteren en wel als volgt :
$("id"). Vanaf nu gebruik ik deze notatie.


<div id="testDiv" name="testDiv"></div>
<script type="text/javascript">
alert($("testDiv").name)
</script>

$("id").innerHTML :
Kan gebruikt worden om de HTML tussen 2 elementen te lezen (en verder ook aanpassen)


<div id="testDiv" name="testDiv">Voorbeeldje</div>
<script type="text/javascript">
alert($("testDiv").innerHTML)
</script>

Pagina 4

Functies

We gaan een nieuw bestand in onze js folder zetten :
functions.js

Vervolgens zetten we onder de regel


  <script src="./js/prototype.js" type="text/javascript"></script>

Deze regel


  <script src="./js/functions.js" type="text/javascript"></script>

In functions.js zetten we de volgende code


function show_alert()
{
   alert("Berichtje")
}

Er staan nu geen script tags omheen. Dit omdat je met de .js extensie al aangeeft dat het om javascript gaat

Vervolgens zetten we in de index.php tussen de body tags :


<input type="button" value="Klik me" onclick="show_alert()">

Pagina 5

JS en input

Tijd om daarwerkelijk iets nuttigs te maken. We gaan er vliegensvlug doorheen.

in de index.php zet je tussen de body tags BOVEN de button :


<input type="text" id="tekst">

Vervolgens kijken we even naar 1 van de belangrijke functies van JS :
$("id").value :
Hiermee kun je de waarde van een input element uitlezen

Dit wetende passen we de show_alert() functie in functions.js aan naar :


function show_alert()
{
   var waarde = $("tekst").value
   alert(waarde)
}

Pagina 6

Ajax request zonder reactie

En nu het groffe geschut :

Wederom beginnen we met het aanpassen van show_alert() :


function show_alert()
{
   var waarde = $("tekst").value
   new Ajax.Request("pagina.php",{
   		postBody : "opgegeven_waarde="+waarde }
   )
}

okey hier staan een aantal belangrijke dingen in. Ten eerste dat we graag een Ajax Request willen doen
DHUUUUUUUUU

Vervolgens staat er welke pagina we willen hebben. in dit geval pagina.php.
Daarnaast hebben we postBody. Dit is heel belangrijk.
De naam zegt het al hier kun je je post body mee maken.

even pagina.php in orde maken.
In pagina.php zet je de volgende code.


<?php
$waarde = $_POST["opgegeven_waarde"] ;
?>

Zoals de titel al aangeeft krijgen we geen reactie. Dat kom in het volgende hoofd.

Prepare for glory

Pagina 7

Ajax request met reactie

Okey we gaan een aantal pagina's aanpassen :
Eert zetten we in index.php DIRECT onder de body tag :


<div id="response"></div>

Ik weet dat de div leeg is. Hier word straks de reactie van onze ajax request in weergegeven ;)

Vervolgens functions.js :


function show_alert()
{
   var waarde = $("tekst").value
   new Ajax.Request("pages/pagina.php", {
   		postBody : "opgegeven_waarde="+waarde ,
   		onComplete : function(t)
   		{
   			$("response").innerHTML = t.responseText
   		}
   	}
   )
}

en pagina.php


<?php
$waarde = $_POST["opgegeven_waarde"] ;
echo "Je hebt ".$waarde." ingevuld";
?>

Okey ik weet dat de opbouw en inhoud van de tut echt bagger is maar ben er gewoon niet goed in :'(
Hoop toch dat jullie er iets van snappen en als het echt slecht is moet een modje hem maar verwijderen.

Beam me up Scotty