Mootools en Ajax
Ajax werkt erg simpel in mootools. Normaal moest je altijd de hele request typen, nu kan het in een paar regels. Hier is een voorbeeld te vinden van een erg simpel stukje script. Het doet niet veel meer dan tekst laten zien van een ander bestand. Als je het werkend wil zien kun je op deze link klikken
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
window.addEvent('domready', function() {
var waar = "http://zjapske.no-ip.org/phphulp/ajax.php";
$('ajaxlink').addEvent('click',function(){
new Ajax(
waar,
{method: 'get', update: $('ajaxtext')}
).request();
});
});
var waar = "http://zjapske.no-ip.org/phphulp/ajax.php";
$('ajaxlink').addEvent('click',function(){
new Ajax(
waar,
{method: 'get', update: $('ajaxtext')}
).request();
});
});
Wat je doet is de class Ajax aanroepen en wat parameters meegeven. Als eerste de url, die staat in de variabele "waar". Als tweede de extra opties. Method kan post en get zijn, update is de plek waar je de tekst terug wil hebben die je krijgt. Met .request(); verzend je de request.
Om het iets uitgebreider te maken kun je, zoals bij bijna alles, extra opties toevoegen. Je zou bijvoorbeeld dit kunnen doen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
var waar2 = "http://zjapske.no-ip.org/phphulp/ajax.php?a=1";
var effect = new Fx.Style($('content'), 'opacity', {duration:500, wait: false});
$('ajaxlinktwee').addEvent('click',function(){
new Ajax(waar2, {
'method' : 'get',
'update': $('ajaxtext'),
'onRequest': function() {
effect.start('1', '0.2');
},
'onComplete': function() {
effect.start('0.2', '1')
}
}).request();
});
var effect = new Fx.Style($('content'), 'opacity', {duration:500, wait: false});
$('ajaxlinktwee').addEvent('click',function(){
new Ajax(waar2, {
'method' : 'get',
'update': $('ajaxtext'),
'onRequest': function() {
effect.start('1', '0.2');
},
'onComplete': function() {
effect.start('0.2', '1')
}
}).request();
});
Om dit voorbeeld in werking te zien moet je even op de 2e link klikken in het voorbeeld. Er gebeurt dan wat met de opacity van het element “content”. Als de request bezig is, dan is de opacity 0.2, maar als hij klaar is, dan wordt de opacity weer 1. Twee vliegen in een klap eigenlijk. Je gebruikt nu de effecten en ajax tegelijk.
« vorige pagina | volgende pagina »
Inhoudsopgave
- Wat kun je met mootools?
- Mootools “installeren”
- Elementen selecteren
- Voorbeeld 1: Tabs in mootools
- Voorbeeld 2: Coole effecten in mootools
- Mootools en Ajax
- Iets gaan doen met de elementen
- Voorbeeld 3 en handige links