[JS] Ajax class
Door Rudie dirkx, 21 jaar geleden, 4.764x bekeken
1 statische functie setHandlers waar je twee handler functies kan invoegen die automatisch uitgevoerd worden. De functies worden toegevoegd aan de class Ajax, niet aan het object.
Het object wordt met elke request opnieuw gemaakt. Daar stop je ook een functie in (of niet) die wordt uitgevoerd als je request klaar is (die staat in het object, dus is request specifiek).
De busy variable staat in het object en in de class, omdat ze met elkaar vergeleken worden. De busy van de class (laten we het static noemen) is namelijk het session id van de laatste request. De busy van het object is het session id van die request. Als een request klaar is worden de busy session id's vergeleken -> zijn ze hetzelfde, dan is de laatste Ajax sessie net afgelopen, dus is Ajax niet busy.
Een voorbeeldje van setHandlers:
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
// Ajax busy handler
Ajax.setHandlers({
'onComplete' : function()
{
if ( !Ajax.busy )
{
$('loading').style.display = 'none';
}
},
'onStart' : function()
{
$('loading').style.display = 'block';
}
});
Ajax.setHandlers({
'onComplete' : function()
{
if ( !Ajax.busy )
{
$('loading').style.display = 'none';
}
},
'onStart' : function()
{
$('loading').style.display = 'block';
}
});
En een voorbeeldje van een ajax request:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
function testUserZoneAction( f_objForm )
{
szZone = f_objForm['zone_id'].options[f_objForm['zone_id'].selectedIndex].text;
szAction = f_objForm['action_id'].options[f_objForm['action_id'].selectedIndex].text;
new Ajax('?test_zone=' + escape(szZone) + '&test_action=' + escape(szAction) + '&test_user=' + escape(f_objForm['test_user'].value) + '', {
'method' : 'get',
'onComplete' : function(ajax)
{
alert(ajax.responseText);
}
});
return false;
}
{
szZone = f_objForm['zone_id'].options[f_objForm['zone_id'].selectedIndex].text;
szAction = f_objForm['action_id'].options[f_objForm['action_id'].selectedIndex].text;
new Ajax('?test_zone=' + escape(szZone) + '&test_action=' + escape(szAction) + '&test_user=' + escape(f_objForm['test_user'].value) + '', {
'method' : 'get',
'onComplete' : function(ajax)
{
alert(ajax.responseText);
}
});
return false;
}
Note: De variabele die meegegeven wordt in de onComplete functie van je Ajax request is het XmlHttp object (google voor properties en methods)!
Note: Als je een get request wil maken moet je niet de parameters in 'params' zetten! Alleen post body hoort daar! 'params' wordt alleen gebruikt als de method POST is.
Veel plezier ermee.
ps. Je mag het natuurlijk gebruiken en veranderen hoe je wilt, maar ik zou graag een mailtje of commentaar hebben als je iets verbetert. Het zou kunnen dat ik dingen vergeten ben of gewoonweg inefficient doe. Laat me dan weten aub. Dank.
Gesponsorde koppelingen
PHP script bestanden
Er zijn 9 reacties op 'Js ajax class'
0 
-0 
-0
Het voorbeeldje is misschien niet zo duidelijk... Deze misschien duidelijker:
Het is een GET request met 3 parameters: test_zone, test_action & test_user.
'method' wordt ingevuld, omdat ie standaard op POST staat.
'params' wordt niet ingevuld omdat GET parameters in de URL thuis horen.
Het is een GET request met 3 parameters: test_zone, test_action & test_user.
'method' wordt ingevuld, omdat ie standaard op POST staat.
'params' wordt niet ingevuld omdat GET parameters in de URL thuis horen.
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
new Ajax('?test_zone=admin&test_action=update&test_user=14', {
'method' : 'get',
'onComplete' : function(ajax)
{
if ( 'ERROR' != ajax.responseText.substr(0,5) )
{
// No problems, print result in div:
document.getElementById('test_div').innerHTML = ajax.responseText;
}
// Something went wrong. Print error:
alert(ajax.responseText);
}
});
'method' : 'get',
'onComplete' : function(ajax)
{
if ( 'ERROR' != ajax.responseText.substr(0,5) )
{
// No problems, print result in div:
document.getElementById('test_div').innerHTML = ajax.responseText;
}
// Something went wrong. Print error:
alert(ajax.responseText);
}
});
0 -0
-0
lol dan zijn we al met zen drieën even slim hehe, ziet er nochtans mooie gescript uit maar snap het eigenlijk ook niet echt.
0 -0
-0
Ehm. Hoe kan het voorbeeld nou niet duidelijk zijn? Het is een makkelijke class waarmee je Ajax requests kan maken (dat lijkt me duidelijk).
de aanroep is 1 functie (de class constructor: Ajax()). Je geeft twee parameters mee: URL & options. De URL lijkt me duidelijk, de options zijn een aantal mogelijkheden:
- method
- params
- onComplete
- async
Ze hebben allemaal een default waarde, en ze kunnen allemaal overschreven worden. onComplete is een functie die 1 parameter gepasst krijgt: this.xmlhttp. In de functie in het laatste voorbeeld heet-ie ajax.
Dat is dus om een ajax request te maken. Dat is wat je sowieso doet bij elke ajax request.
Dan is er nog een extra dingetje: auto-handlers. Twee functies (of 1 of 0) die automatisch uitgevoerd worden door het Ajax object (een instance van de Ajax class). Die functies toevoegen die je dmv Ajax.setHandlers().
Maar die handlers zijn dus optioneel!
Het is AJAX. Als je Ajax niet snapt of het niet gebruikt, heb je hier sowieso niks aan! Ik zal een voorbeeldje maken een keer. Heb een php 5 app die hier op draait, maar geen PHP 5 op mn servert...
de aanroep is 1 functie (de class constructor: Ajax()). Je geeft twee parameters mee: URL & options. De URL lijkt me duidelijk, de options zijn een aantal mogelijkheden:
- method
- params
- onComplete
- async
Ze hebben allemaal een default waarde, en ze kunnen allemaal overschreven worden. onComplete is een functie die 1 parameter gepasst krijgt: this.xmlhttp. In de functie in het laatste voorbeeld heet-ie ajax.
Dat is dus om een ajax request te maken. Dat is wat je sowieso doet bij elke ajax request.
Dan is er nog een extra dingetje: auto-handlers. Twee functies (of 1 of 0) die automatisch uitgevoerd worden door het Ajax object (een instance van de Ajax class). Die functies toevoegen die je dmv Ajax.setHandlers().
Maar die handlers zijn dus optioneel!
Het is AJAX. Als je Ajax niet snapt of het niet gebruikt, heb je hier sowieso niks aan! Ik zal een voorbeeldje maken een keer. Heb een php 5 app die hier op draait, maar geen PHP 5 op mn servert...
0 -0
-0
Een POST voorbeeldje:
Wat er gebeurt is: je voert een username in. Ajax checkt een script en dat script print 'FREE' of 'TAKEN' (ofzo). Als de response FREE is, wordt de border van het input veldje groen, anders rood.
Je kan nu dus makkelijk en snel zien of een username al bezet is of niet...
Een makkelijk voordeel van de Handlers is een plaatje laten zien onStart, en dat plaatje weghalen onComplete, zodat de gebruiker weet als er een Ajax request aan de gang is. De pagina wordt nl. niet ververst, maar er gebeurt wel degelijk iets. Zo gebruik ik de Handlers vooral.
Duidelijk(er)?
PS. Misschien de PHP kant er van even maken:
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
<script>
function checkUsername( f_objInput )
{
new Ajax('ajaxHandler.php', {
'params' : 'check_username=' + f_objInput.value,
'onComplete' : function(ajax)
{
f_objInput.style.borderColor = 'FREE' == ajax.responseText ? 'green' : 'red';
}
return false;
});
</script>
<input type="text" id="user_name" name="user_name" onchange="checkUsername(this);" />
function checkUsername( f_objInput )
{
new Ajax('ajaxHandler.php', {
'params' : 'check_username=' + f_objInput.value,
'onComplete' : function(ajax)
{
f_objInput.style.borderColor = 'FREE' == ajax.responseText ? 'green' : 'red';
}
return false;
});
</script>
<input type="text" id="user_name" name="user_name" onchange="checkUsername(this);" />
Wat er gebeurt is: je voert een username in. Ajax checkt een script en dat script print 'FREE' of 'TAKEN' (ofzo). Als de response FREE is, wordt de border van het input veldje groen, anders rood.
Je kan nu dus makkelijk en snel zien of een username al bezet is of niet...
Een makkelijk voordeel van de Handlers is een plaatje laten zien onStart, en dat plaatje weghalen onComplete, zodat de gebruiker weet als er een Ajax request aan de gang is. De pagina wordt nl. niet ververst, maar er gebeurt wel degelijk iets. Zo gebruik ik de Handlers vooral.
Duidelijk(er)?
PS. Misschien de PHP kant er van even maken:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?php
if ( isset($_POST['check_username']) )
{
$bUsernameTaken = (bool)mysql_result(mysql_query("SELECT COUNT(1) FROM users WHERE username = '".$_POST['check_username']."';"), 0);
echo $bUsernameTaken ? 'TAKEN' : 'FREE';
exit;
}
?>
if ( isset($_POST['check_username']) )
{
$bUsernameTaken = (bool)mysql_result(mysql_query("SELECT COUNT(1) FROM users WHERE username = '".$_POST['check_username']."';"), 0);
echo $bUsernameTaken ? 'TAKEN' : 'FREE';
exit;
}
?>
0 -0
-0
Leuk dat je hem zo in 1 constructor met options doet, maar nu heb ik niet de mogelijkheid om bijvoorbeeld een request helemaal klaar te zetten (url, callbacks e.d.) en hier gewoon achteraf de data aan toe te voegen en de request uit te voeren. En dan nog een keer, dit maal met andere data. Het maakt tevens het hele object-zijn beetje overbodig, aangezien je het gewoon gebruikt als een functie met interne functies...
En ik kan maar 1 request tegelijk uitvoeren? Ja, want Ajax.busy wordt overschreven. Niet van essentieel belang, maar toch, maakt die functie beetje nutteloos. (wat dacht je van gewoon +1 en -1 gebruiken ipv ingewikkeld gaan doen met nummertjes)
Verder vind ik het overbodig gebruik van haakjes (strings voor property-namen? Alsof ze iets anders kunnen zijn :/ ) de complexe naamgeving van de variabelen (f_arrOptions?! f omdat hij als parameter is doorgegeven en arr omdat het een array is? Zeggen 'this' en de 's' aan het einde niet al dezelfde informatie? Leest wel een stuk prettiger...) het willekeurige gebruik van array & object-notatie en de omgedraaide if-statements niet zo mooi. Maar dat is persoonlijk.
En ik kan maar 1 request tegelijk uitvoeren? Ja, want Ajax.busy wordt overschreven. Niet van essentieel belang, maar toch, maakt die functie beetje nutteloos. (wat dacht je van gewoon +1 en -1 gebruiken ipv ingewikkeld gaan doen met nummertjes)
Verder vind ik het overbodig gebruik van haakjes (strings voor property-namen? Alsof ze iets anders kunnen zijn :/ ) de complexe naamgeving van de variabelen (f_arrOptions?! f omdat hij als parameter is doorgegeven en arr omdat het een array is? Zeggen 'this' en de 's' aan het einde niet al dezelfde informatie? Leest wel een stuk prettiger...) het willekeurige gebruik van array & object-notatie en de omgedraaide if-statements niet zo mooi. Maar dat is persoonlijk.
0 -0
-0
Quote:
het willekeurige gebruik van array & object-notatie en de omgedraaide if-statements niet zo mooi. Maar dat is persoonlijk.
Die snap ik niet!?
En het object is idd overbodig, maar zo staan alle functies wel netjes in een class en zijn dus niet public beschikbaar. Ik wil juist geen object opslaan, maar dat is dus persoonlijk.
Alles klaar zetten en alleen nog data toevoegen is niet sneller dan steeds het hele object opnieuw bouwen. Het is javascript. Dat scheelt zo ontzettend weinig. Met 1 extra functie heb je hetzelfde. Gooi in die functie een bijna-klaar class instance met 1 functie param: data.
Het gebruik van f_ en arr etc vind ik juist duidelijk.
En hoezo kan je maar 1 request tegelijk uitvoeren? Als het zo is dan ligt het aan Ajax, niet aan mijn class. Het maakt niet uit dat busy wordt overschreven... Dat houdt een nieuwe request niet tegen! Gewoon optellen en aftrekken is echter wel een stuk makkelijker :) En logischer... Niet aan gedacht.
Om te reageren heb je een account nodig en je moet ingelogd zijn.
PHP hulp
0 seconden vanaf nu