Wat is AJAX?

Begrip
AJAX staat voor Asynchronous Javascript and XML. AJAX op zich is geen technologie, maar een combinatie van verschillende technologiën. Dit zijn Javascript en XML. Javascript speelt hier de grootste rol in, XML zorgt voor de communicatie. AJAX wordt op de dag van vandaag veel gebruikt om website's gebruiksvriendelijker en sneller te maken. Een heel belangrijk aspect van AJAX is dat de webpagina niet herladen moet worden.

Voorbeelden
Enkele voorbeelden waar gebruik gemaakt wordt van AJAX:

• Live zoekresultaten weergeven

• Tijdens het registreren live checken of de gebruikersnaam al bestaat of als de wachtwoorden overeen komen

• Een volgende pagina van reacties bekijken terwijl de video blijft spelen

Hoe gebruik ik AJAX?

Vroeger (en soms nu ook nog) werden de RequestObjects nog zelf geschreven. Ze moesten gemaakt worden voor elke browser. Tegenwoordig hoeft dit allemaal niet meer met de stevig geteste en krachtige Javascript Frameworks. Voorbeelden hiervan zijn: jQuery, Prototype, Mootools, XAJAX. In deze tutorial zal ik verder gaan me XAJAX omdat je hiervoor zo goed als geen kennis van Javascript nodig hebt.

XAJAX

Introductie
XAJAX is een opensource PHP library om AJAX applicaties te schrijven. M.a.w. er is geen kennis van Javascript nodig. Dit klopt niet helemaal. Als je een functie wil uitvoeren heb je natuurijk functiewaarden nodig en die moet je wel ophalen met Javascript. Maar gelukkig is dit zeer eenvoudig.

Een voorbeeld:
Bij het versturen van het form zullen de waardes van het form opgehaald worden en als argumenten gebruikt worden bij de functie 'login'.

Code:

onsubmit="xajax_login(document.login.username.value, document.login.password.value);return false;"

Dit waar 'login' de naam van het form is en 'username' en 'password' textfields zijn met dit ID.

Een eerste applicatie schrijven
Allereerst moeten we de library downloaden. Dit kan je hier doen. Nu kunnen we beginnen aan onze applicatie. We beginnen met 'requiren' van XAJAX:

Code:

require_once "xajax/xajax_core/xajax.inc.php";

Om gebruik te maken van een klasse moeten we deze natuurlijk eerst instantiëren:

Code:

$xajax = new xajax();

Bij XAJAX moet je gebruik maken van PHP functions om je applicatie te schrijven. Deze functies moet je ook registreren binnen XAJAX. We zullen in dit voorbeeld een kleine logincheck maken die kijkt of de gebruikersnaam en wachtwoord overeen komen met de combinatie uit de database.

Databasestructuur:

Code:

CREATE TABLE `users` (
  `id` int(11) NOT NULL auto_increment,
  `username` varchar(100) NOT NULL default '',
  `password` varchar(100) NOT NULL default '',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 ;

We zullen onze functie 'login' noemen.

Code:

$xajax->registerFunction('login');

Vervolgens schrijven we onze PHP functie 'login' met 2 argumenten: $username en $password. We zullen gebruik maken van PDO om verbinding te maken met de database. Binnen deze functie kunnen we allereerst gebruik maken van doodgewone PHP, er moeten m.a.w. nog niet meteen XAJAX functies aangeroepen worden:

Code:

function login($username, $password)
{
    $pdo = new PDO('mysql:host=localhost;port=3307;dbname=***','***', '***');
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        
    $query = "SELECT * FROM users WHERE username = :username";
    $stmt = $pdo->prepare($query);
    $stmt->bindParam(':username', $username);
    $stmt->execute();
        
    if(!$data = $stmt->fetch(PDO::FETCH_ASSOC))
    {
        $content = 'Deze gebruiker bestaat niet!';
    }
    elseif($data['password'] == md5($password))
    {
            $content = 'Succesvol ingelogd!';
    }
    else
    {
        $content = 'Verkeerd wachtwoord voor gebruiker.';
    }
}

Onze functie is nu nog niet helemaal klaar, we moeten XAJAX nog laten weten hoe we deze info willen weergeven. We maken binnen onze functie een xajaxResponse object aan. Deze returnen we dan ook aan het eind van onze functie.

Code:

$response = new xajaxResponse();
$response->assign('msg', 'innerHTML', $content);
        
return $response;

Er zijn 3 mogelijkheden om het resultaat weer te geven: 'assign', 'prepend' en 'append'.

Assign: Het resultaat word vervangen door het huidige.
Prepend: Het resultaat wordt voor het element toegevoegd.
Append: Het resultaat wordt na het element toegevoegd.

Het eerste attribuut van de functie is het ID van het element, in ons geval 'msg'. Het 2e attribuut is wat je precies wil wijzigen aan het element, in ons geval is dit de innerHTML. Een ander voorbeeld is 'style'. Het 3e attribuut is de content zegmaar, dat spreekt voor zich.

Nadat we onze functie geschreven hebben moeten we XAJAX laten weten dat we klaar zijn:

Code:

$xajax->processRequest();

Het voornaamste werk zit erop. Het XAJAX object werd gemaakt, de functie werd gemaakt en geregistreerd en we hebben XAJAX de request laten voorbereiden. Het enige wat we nog moeten doen is onze HTML pagina weergeven en een form maken waar de functie uigevoerd wordt.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XAJAX introductie</title>
</head>
<?php $xajax->printJavascript(); ?>

<body>
<form name="login" onsubmit="xajax_login(document.login.username.value, document.login.password.value);return false;">
<input type="text" id="username" />
<input type="password" id="password" />
<input name="Submit" type="submit" value="Inloggen" />
<br /><span id="msg"></span>
</form>
</body>
</html>

Merk op dat we nog een stuk Javascript op de pagina moeten printen om het request te kunnen uitvoeren. Dit doen we als volgd:

Code:

<?php $xajax->printJavascript(); ?>

Verder hebben we een form gemaakt die bij het submitten het volgende doet:

Code:

onsubmit="xajax_login(document.login.username.value, document.login.password.value);return false;"

Merk op dat je als functienaam 'xajax_FUNCTIENAAM' gebruikt inplaats van gewoon de functienaam. Verder werkt dit als een gewone PHP functie die je aanroept met de juiste elementen.

Als laatste maken we plaats om het resultaat van de functie te tonen:

Code:

<span id="msg"></span>

Volgens de 'append' functie zal de content als innerHTML weergegeven worden.

Conclusie

AJAX is niet zo moeilijk als je gebruikmaakt van een Framework. XAJAX is zeer makkelijk te gebruiken om kleine dingen mee te doen. Voor drag/drop menu's en dergelijke gebruik je beter een groter en bekender Javascript Framework. Ik hoop dat je door deze tutorial iets meer geleerd hebt over XAJAX en het gebruik ervan.

wat mooi zou zijn is een overzichtje met soortgelijke "basis" scripts welke gemaakt zijn, dat je die gewoon verder kan uitbreiden en als basis module kan hanteren. Ken je hier toevallig sites van of heb je nog enkele (wat luxere) scripts.,..