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)
PHP script in nieuw venster Selecteer het PHP script
1
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();
    });
});

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)
PHP script in nieuw venster Selecteer het PHP script
1
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();
});

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.

« Lees de omschrijving en reacties

Inhoudsopgave

  1. Wat kun je met mootools?
  2. Mootools “installeren”
  3. Elementen selecteren
  4. Voorbeeld 1: Tabs in mootools
  5. Voorbeeld 2: Coole effecten in mootools
  6. Mootools en Ajax
  7. Iets gaan doen met de elementen
  8. Voorbeeld 3 en handige links

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.